面板及布局类
            
      
               
       
加载远程页面
            
       
                
        
加载本地资源
            
        
                 
         
html配置项自定义面板内容
            
         
                  
          
items配置项添加组件
            
          
                   
           
使用items项添加多个组件
        
           
                加载的本地资源
            
                 items加载的本地资源
            
           
          
         
        
       
      
     
    

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 = [        '
    
     ',            '
     
      员工列表',            '
      
       序号
       
        姓名',            '1张三',            '1张三',            '1张三',            '1张三',            '1张三',            '1张三',            '1张三',            '1张三',        ''    ];    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            }        }]                        });});