5章：标准面板

2019独角兽企业重金招聘Python工程师标准>>>

<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
            }
        }]
            
        
    });
});

转载于:https://my.oschina.net/u/1773772/blog/616489