ExtJS 常用組件屬性 及使用方法

/*
Ext.Panel主要配置表:
animCollapse Boolean  設置面板摺疊展開是否顯示動畫,Ext.Fx可用默認true,否則false
applyTo      Mixed    面板定位
autoDestroy Boolean   是否自動銷燬從容器中移除組件(默認true)
autoHeight Boolean    是否自動高度(默認false)
autoLoad Object/String/Function 設置面板自動加載的url
autoScroll Boolean 設置是否自動加載滾動條(默認false自動加滾動條)
autoShow Boolean 是否移除組件的隱藏樣式(默認flase)
autoWidth Boolean 是否自動寬度(默認false)
baseCls String 面板的基本樣式類(默認x-panel)
bbar Object/Array 設置面板底端工具欄,可是Ext.Toolbar,工具欄配置對象,button的數組
bodyBorder Boolean 是否顯示面板體內部邊框(默認true，在border=true生效)
bodyStyle String/Object/Function 應用於面板體的自定義樣式(默認null)
border Boolean 是否顯示面板體邊框(默認true，2px)
buttonAlign String 設置面板底部按鈕對齊方式(默認right,可爲left,center)
buttons Arry 設置面板底部按鈕配置數組
collapseFirst Boolean 該項決定展開收縮按鈕的位置(默認true)
collapsed Boolean 設置面板在第一次渲染時是否處於收縮狀態(默認true)
collapsible Boolean 是否允許面板展開收縮(默認false)
contentEI String 設置面板的內容元素,可爲頁面元素id，已存在的HTML節點
defaultType String 面板中元素的默認類型(默認panel)
defaults Object 應用到面板容器中所有元素配置對象,如:defaults:{bodyStyle:'padding:15px'}
floating Boolean 設置面板是否可浮動(默認true,會導致面板顯示負偏移,位置要明確設置!)
footer Boolean 設置是否創建面板底部元素(默認true)
frame Boolean 設置是否渲染面板
header Boolean 設置是否創建頭部(默認true)
headerAsText Boolean 是否在面板header中顯示title(默認true)
height Number 面板高度(默認auto)
hideBorders Boolean true隱藏面板中所有元素的邊框，false據組件具體配置
hideCollapseTool Boolean 設置當collapsible爲true是，是否顯示展開收縮按鈕
html String/Object 設置面板元素內容爲HTML片段或DomHelper生成內容
items Mixed 單獨一個子組件或子組件數組
layout String 面板佈局類型(默認Ext.layout.ContainerLayout佈局)
layoutConfig Object 這個配置對象包含被選佈局的配置項
maskDisabled Boolean 設置當面板不可使用時是否遮罩面目(默認true)
shadow Boolean/String 設置是否在面板後顯示陰影(默認true)
shadowOffset Number 設置面板陰影偏移量(默認4)
tbar Object/Array 設置面板頂端工具欄,可是Ext.Toolbar,工具欄配置對象,button配置對象數組,面板
                                                       渲染後只能通過getTopToolbar方法訪問該工具欄
title String 顯示在面板的頭部標題信息
titleCollapse Boolean 設置是否允許單擊面板頭部進行展開收縮(默認false)
tools Array 面板頭部工具按鈕配置對象數組
width Number 面板寬度(默認auto)

tools配置表:
id String 必選
handler Function 單擊按鈕後出發的處理函數
scope Object 處理函數執行範圍
qtip String/Object 爲按鈕指定提示信息
hidden Boolean 設置初次渲染是否隱藏
on Object 爲按鈕配置事件監聽

tools配置項id對應不同按鈕
*/

<mce:script
type="text/javascript"><!--
    Ext.onReady(function(){
        var config 
= {
            title:'面板頭部(hear)',
            tbar:['頂端工具欄(top toolbars)'],
            bbar:['底端工具欄(bottom toolbars)'],
            height:200,
            width:300,
            frame:true,
            renderTo:'panel',
            bodyStyle:'background-color:#ffffff',
            html:'
面板體(body)
',
            tools:[
                {id:'toggle'},
                {id:'close'},
                {id:'maximize'}
            ],
            buttons:[
                new Ext.Button({
                    text:'面板底部(footer)'
                })
            ]
        }

        new Ext.Panel(config);
    });

通過面板加載內容的方式有：
1.通過autoLoad加載遠程頁面

<mce:script
type="text/javascript"><!--
    /*
    使用autoLoad加載遠程頁面
    */

    Ext.onReady(function(){
        var config 
= {
            title:'面板加載遠程頁面',
            height:150,
            width:250,
            frame:true,
            autoScroll:true,
            collapsible:true,
//允許展開和收縮
            applyTo:'panel',
            autoLoad:{url:'page1.html'},
//自動加載面板體的鏈接
            bodyStyle:'background-color:#ffffff'
        }

        var panel 
= new Ext.Panel(config);
    });

2.通過contentEl加載本地資源

<mce:script
type="text/javascript"><!--
    /*
    contentEI加載本地資源
    */

    Ext.onReady(function(){
        var config 
= {
            title:'面板加載本地數據',
            height:150,
            width:250,
            frame:true,
            collapsible:true,
            autoScroll:true,
            autoHeight:false,
            //autoHeight:true,
            renderTo:'panel',
            contentEl:'localElement',
//要加載的本地資源的id,contentEl中l爲小寫的L!
            bodyStyle:'background-color:#ffffff'
        }

        new Ext.Panel(config);
    });

<table
id='localElement'>
        <tr>
            <td
colspan="2">遠程頁面</td>
        </tr>
        <tr>
            <td
width="60">編號</td>
            <td
width="80">姓名</td>
        </tr>
        <tr>
            <td>編號</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>編號</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>編號</td>
            <td>姓名</td>
        </tr>
        <tr>
            <td>編號</td>
            <td>姓名</td>
        </tr>
    </table>

3.通過html配置自定義面板內容

<mce:script
type="text/javascript"><!--
    var htmlArray 
= [
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '',
        '
html配置自定義面板內容
編號
姓名
編號
姓名
編號
姓名
編號
姓名
編號
姓名
編號
姓名
編號
姓名
編號
姓名
編號
姓名

'
    ];

    var config 
= {
        title:'使用html配置自定義面板內容',
//panel標題
        height:150,
//panel高
        width:250,
//panel寬
        frame:true,
//渲染
        collapsible:true,
//允許展開收縮
        autoScroll:true,
//允許顯示滾動條
        autoHeight:false,
//使用固定高度
        //autoHeight:true, //自適應高度
        renderTo:'panel',
//定位
        html:htmlArray.join(''),
//panel中顯示的自定義html代碼
        bodyStyle:'background-color:#ffffff'
//panel背景色
    }

    var panel 
= new Ext.Panel(config);

4.通過items配置在面板中添加組件

<mce:script
type="text/javascript"><!--
    /*
    使用items配置在面板中添加組件
    */

    /*使用items配置添加單一組件實例*/
    Ext.onReady(function(){
        var config 
= {
            headler:true,
//面板頭部
            title:'日曆',
//面板標題
            frame:true,
//渲染
            collapsible:true,
//允許伸展收縮
            autoHeight:true,
//允許自動高度
            width:189,
//面板固寬度
            renderTo:'panel',
//面板定位
            items:new Ext.DatePicker()
//向面板中添加一日期組件
        }

        var panel 
= new Ext.Panel(config);
    });

    /*使用items配置添加多個組件實例*/
    Ext.onReady(function(){
        var config 
= {
            headler:true,
            title:'使用items配置添加多個組件',
            frame:true,
            height:200,
            width:250,
            renderTo:'panel',
            //設置所有面板的默認屬性
            defaults:{
                bodyStyle:'background-color:#ffffff',
//背景色
                height:80,
//面板固定高度
                collapsible:true,
//允許伸展收縮
                autoScroll:true
//自動顯示滾動條
            },
            //面板元素數組
            items:[
                //嵌套面板一
                new Ext.Panel({
                    title:'嵌套面板一',
                    contentEl:'localElement'
//加載本地數據
                }),
                new Ext.Panel({
                    title:'嵌套面板而',
                    autoLoad:'page1.html'
//加載遠程頁面(失敗)
                })
            ]
        }

        var panel 
= new Ext.Panel(config);
    });

摘自： http://blog.csdn.net/lulu_jiang/article/details/5474370