5章：標準面板

<style> 
        .box { padding:50px 0 0 50px; }
        * { padding:0; margin:0; }
        .w_320 { width:320px; float:left; }
        .my-foo-trigger { border-radius:5px; }
        .aaa { background:red; }
</style>



<div class="box">
    <div id="myPanel" class="w_320">
        <h2>面板及佈局類</h2>
    </div>
    
    <div id="panelLoadPage" class="w_320">
        <h2>加載遠程頁面</h2>
    </div>
    
    <div id="LoadLocalEle" class="w_320">
        <h2>加載本地資源</h2>
    </div>
    
    <div id="htmlCon" class="w_320">
        <h2>html配置項自定義面板內容</h2>
    </div>
    
    <div id="itemsAddCon" class="w_320">
        <h2>items配置項添加組件</h2>
    </div>
    
    <div id="itemsAddCons" class="w_320">
        <h2>使用items項添加多個組件</h2>
    </div>
    
</div>

<div id="localElement">
    加載的本地資源
</div>

<div id="localElement1">
    items加載的本地資源
</div>

Ext.onReady(function(){
    
    //面板(就像畫板，能夠放各類組件（元素）)及佈局
    
    //標準面板
    Ext.create("Ext.panel.Panel",{
    
        width : 300,
        height : 150,
        renderTo : 'myPanel',
        frame : true,
        bodyStyle : 'padding:5px; background-color:#ffffff;',
        
        title : '面板頭部(header)',
        tbar : ['頂部工具欄(top toolbars)'],
        bbar :['底部工具欄(bottom toolbars)'],
        html : '面板體(body)',
        tools:[{
            type:'toggle',
            handler : function(){
                console.info('toggle');
            }
        },
        {
            type:'close',
            handler : function(){
                console.info('close');
            }
        },{
            type : 'maximize',
            handler : function(){
                console.info('maximize');
            }
        }]
        //tools : [{id : 'toggle'},{id : 'close'},{id : 'maximize'}],
        /*buttons : [{
            text : '面板底部(footer)'
        }]*/
    });
    
    //使用autoLoad配置項爲面板加載遠程頁面
    Ext.create('Ext.panel.Panel',{
        title : '加載遠程頁面',
        width : 250,
        height : 150,
        renderTo : 'panelLoadPage',
        frame : true,
        autoScroll : true,//顯示滾動條
        collapsible : true,//容許展開和收縮
        bodyPadding : '5px',
        //autoLoad : '/page.html',//過時配置項
        bodyStyle : 'background-color : #ffffff',
        loader: {//自動加載面板體的默認連接
            url: 'page.html',
            autoLoad: true
        }
    });
    
    //使用contentEL配置項爲面板加載本地資源
    Ext.create("Ext.panel.Panel",{
        title : '',
        width : 250,
        height : 150,
        renderTo : 'LoadLocalEle',
        frame : true,
        bodyStyle : 'background-color:#ffffff;padding:5px',
        autoScroll : true,
        collapsible : true,
        contentEl : 'localElement'//加載本地資源
    });
    
    //使用html配置項自定義面板內容
    //html內容
    var htmlArray = [
        '<table border=1>',
            '<tr><td colspan=2>員工列表</td></tr>',
            '<tr><th width="60">序號</th><th width="100">姓名</th></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
            '<tr><td>1</td><td>張三</td></tr>',
        '</table>'
    ];
    Ext.create('Ext.panel.Panel',{
        title : '使用配置項自定義內容',
        width : 250,
        height : 150,
        renderTo : 'htmlCon',
        frame : true,
        autoScroll : true,
        collapsible : true,
        bodyStyle : 'padding:5px;background-color:#ffffff',
        html : htmlArray.join('')
    });
    
    //使用items配置項在面板中添加組件
    Ext.create('Ext.panel.Panel',{
        title : 'items配置項在面板中添加組件',
        width : 250,
        renderTo : 'itemsAddCon',
        frame : true,
        bodyPadding : '5px',
        collapsible : true,
        items : [{
            xtype : 'datepicker',
            minDate : new Date()
            
        }]
    });
    
    //使用items項添加多個組件
    Ext.create('Ext.panel.Panel',{
        title : '使用items項添加多個組件',
        width : 250,
        height : 200,
        renderTo : 'itemsAddCons',
        frame : true,
        bodyPadding : 5,
        collapsible : true,
        layout : 'vbox',
        defaults : {
            bodyStyle : 'background-color:#ffffff',
            collapsible : true,
            width : 230,
            autoScroll : true
        },
        items : [{
            title : '面板一',
            height : 80,
            contentEl : 'localElement1'//加載本地資源 
        },{
            title : '面板二',
            height : 80,
            //autoLoad : 'page.html'//已通過期配置項
            loader: {//加載遠程頁面
                url: 'page.html',
                autoLoad: true
            }
        }]
            
        
    });
});