ext.layout.columnlayout.html

Ext中文API,学习ext的同志只要你学会ext里的一种控件后其实其他的就大同小异了

<!--
Mock
<link rel="stylesheet" type="text/css" href="http://localhost/ext/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/docs.css"/>
<link rel="stylesheet" type="text/css" href="http://localhost/ext/doc/resources/style.css"/>
-->
<style type="text/css">
    body {
        overflow: scroll;
    }
    /**
	 .mdesc .long {
        display: block;
    }
     */
</style>
<!-- End Mock-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<div class="body-wrap">
    <div class="top-tools">
        <a class="inner-link" href="#Ext.layout.ColumnLayout-props"><img src="/images/s.gif" class="item-icon icon-prop">Properties</a><a class="inner-link" href="#Ext.layout.ColumnLayout-methods"><img src="/images/s.gif" class="item-icon icon-method">Methods</a><a class="inner-link" href="#Ext.layout.ColumnLayout-events"><img src="/images/s.gif" class="item-icon icon-event">Events</a><a class="inner-link" href="#Ext.layout.ColumnLayout-configs"><img src="/images/s.gif" class="item-icon icon-config">Config Options</a><a class="bookmark" href="../docs/?class=Ext.layout.ColumnLayout"><img src="/images/s.gif" class="item-icon icon-fav">Direct Link</a>
    </div><h1>Class Ext.layout.ColumnLayout</h1>
    <table cellspacing="0">
        <!--
        <tr>
        <td class="label">
        Package:
        </td>
        <td class="hd-info">
        </td>
        </tr>
        -->
        <tr>
            <td class="label">
                Defined In:
            </td>
            <td class="hd-info">
                ColumnLayout.js
            </td>
        </tr>
        <tr>
            <td class="label">
                Class:
            </td>
            <td class="hd-info">
                Ext.layout.ColumnLayout
            </td>
        </tr>
        <tr>
            <td class="label">
                Extends:
            </td>
            <td class="hd-info">
                Ext.layout.ContainerLayout
            </td>
        </tr>
    </table>
    <div class="description">
        <p>
  这是为构建多个垂直式结构而准备的布局，
  当中包含已指定宽度的多个列，列的宽度可以是固定值，也可以是可伸缩的百分比宽度，但里面的内容就是自适应高度了。
  应通过继承此类或设置<a href="###" onClick="alert('Ext.Container#layout');">Ext.Container#layout</a>的配置layout:'column' 的方式创建，一般很少通过关键字new直接使用。</p>
  </p><p>虽然ColumnLayout没有直接的配置项（不同于继承），但是ColumnLayout的任意一个子面板都支持特殊的配置项属性 <b>columnWidth</b>。
  可采用width（像素）或columnWidth（百分比）的方式来决定面板的尺寸大小，如不为面板指定width或columnWidth，
  那么将缺省为面板的自动宽度。
  属性width是以象素pixles来固定宽度，并必须是数字大于或等于1；属性columnWidth是百分比相对单位，并必须是百分比字符串区间是大于0小于1（像.25）。
  <p>分配列宽度的基本规则非常简单。UI逻辑会将所包含的一组面板分成两类：
  第一类是宽度固定值或不指定的（设置为auto）面板，当此类面板传入到布局时，先不立即渲染，但它们的宽度就会从容器的总宽度减去；
  第二类是以百分比指定的面板，百分比的含义时在基于剩下宽度中计算的百分比。当传入布局时，会将这些百分比转换为宽度的固定数字值，分配到面板上。
  换句话讲，百分比的面板的用途填充由固定值宽度或AUTO宽度面板占据后<b>所留下</b>的空间。因此，虽然你可以以不同的百分比来分配列，但columnWidth加起来必须是等于1（或100%）。
  否则的话，渲染出来的布局可能出现不正常。用法举例：</p>
  <pre><code>
// All columns are percentages -- they must add up to 1
var p = new Ext.Panel({
    title: 'Column Layout - Percentage Only',
    layout:'column',
    items: [{
        title: 'Column 1',
        columnWidth: .25 
    },{
        title: 'Column 2',
        columnWidth: .6
    },{
        title: 'Column 3',
        columnWidth: .15
    }]
});

// Mix of width and columnWidth -- all columnWidth values values must add
// up to 1. The first column will take up exactly 120px, and the last two
// columns will fill the remaining container width.
var p = new Ext.Panel({
    title: 'Column Layout - Mixed',
    layout:'column',
    items: [{
        title: 'Column 1',
        width: 120
    },{
        title: 'Column 2',
        columnWidth: .8
    },{
        title: 'Column 3',
        columnWidth: .2
    }]
});
</code></pre>
 
    </div>
    <div class="hr">
    </div>
    <a id="Ext.layout.ColumnLayout-configs"></a>
    <h2>配置项</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    配置项
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="CSS-header"></a>
                        <b>CSS</b>
                        : String
                        <div class="mdesc">
                            <div class="short">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容... 
                            </div>
                            <div class="long">
                                一个可选添加的CSS样式类，加入到组件的容器上（默认为''）。 这为容器或容器的子节点加入标准CSS规则提供了方便。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-CSS" 
								href="output/Ext.layout.ContainerLayout.html#method-CSS">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
                <tr class="config-row expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="renderHidden-header"></a>
                        <b>renderHidden</b>
                        : Boolean
                        <div class="mdesc">
                            <div class="short">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                            <div class="long">
                                True表示为在渲染时隐藏包含的每一项（缺省为false）。 
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                        
                            <!--如果这不是同个namespace下-->
							<a 	ext:cls="Ext.layout.ContainerLayout" 
								ext:member="#method-renderHidden" 
								href="output/Ext.layout.ContainerLayout.html#method-renderHidden">
								ContainerLayout
							</a>
                        
                        
                    </td>
                </tr>
            
        </table>
    
    
	<a id="Ext.layout.ColumnLayout-props"></a>
    <h2>公告属性</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th colspan="2">
                    属性
                </th>
                <th>
                    定义者
                </th>
            </tr>
            
                <tr class="property-row inherited expandable">
                    <td class="micon">
                        <a class="exi" href="#expand">&nbsp;</a>
                    </td>
                    <td class="sig">
                        <a id="activeItem-activeItem"></a>
                        <b>
                        activeItem: activeItem</b>
                        <div class="mdesc">
                            <div class="short">
                                 一个已激活Ext.Component的引用 例如，if(myPane... 
                            </div>
                            <div class="long">
                                 一个已激活<a href="###" onClick="alert('Ext.Component');">Ext.Component</a>的引用 例如，if(myPanel.layout.activeItem.id == 'item-1') { ... }。 activeItem只会作用在布局样式上。（像<a href="###" onClick="alert('Ext.layout.Accordion');">Ext.layout.Accordion</a>,  <a href="###" onClick="alert('Ext.layout.CardLayout');">Ext.layout.CardLayout</a>和<a href="###" onClick="alert('Ext.layout.FitLayout');">Ext.layout.FitLayout</a>）。只读的。   Related to <a href="###" onClick="alert('Ext.Container#activeItem');">Ext.Container#activeItem</a>.   
                            </div>
                        </div>
                    </td>
                    <td class="msource">
                    	
						
                        
                            <!--如果这不是同个namespace下--><a ext:cls="Ext.layout.ContainerLayout" ext:member="#method-activeItem" href="output/Ext.layout.ContainerLayout.html#method-activeItem">
                        
                        ContainerLayout
                        
                        </a>
                    
                    </td>
                </tr>
            
        </table>
    
    
    <a id="Ext.layout.ColumnLayout-methods"></a>
    <h2>公共方法</h2>
    
        <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">
                    方法
                </th>
                <th class="msource-header">
                    定义者
                </th>
            </tr>
            
        </table>
    
    
    <a id="Ext.layout.ColumnLayout-events"></a>
    <a id="Ext.Ajax-events"></a>
    <h2>公告事件</h2>
    
    
        <div class="no-members">
            这个类没公共的事件。
        </div>
    
</div>