Ext panel中增加多個tbar

爲Ext panel中增加多個tbar展示兩種方式:
方法一:
通過render

var subPanel = new Ext.Panel({
   title:'測試',
   tbar:[{text:'一個按鈕'},{}],
   bbar:[{xtype:'tbsplit',text'測試'},{}],
   listeners:{
               'render' : function() {
                var bbar1 = new Ext.Toolbar([{
                text : "腳本管理",
                //iconCls : 'icon-set',
                handler : function() {
                }
               }]);
       bbar1.render(subPanel.tbar);
       }
    }
 });

方法二:
利用數組型:

<script type="text/javascript">  
Ext.onReady(function(){  
    var oneTbar = new Ext.Toolbar({  
        items: ['開始時間',{     
            xtype:'datefield',  
            id : 'startDate',  
            editable:false,  
            height:20,  
            format:'Y-m-d'  
        },{  
            text:'清空',  
            handler:function(){  
                        Ext.getCmp("startDate").setValue("");  
                    }  
        }]  
    });  
    var twoTbar = new Ext.Toolbar({  
        items: ['結束時間',{  
            xtype:'datefield',  
            id : 'endDate',  
            editable:false,  
            height:20,  
            format:'Y-m-d'  
        },{  
            text:'清空',  
            handler:function(){  
                        Ext.getCmp("endDate").setValue("");  
                    }  
        }]  
    });  
    var w = new Ext.Window({  
        title:"消息",  
        width:520,  
        height:500,  
        layout: "anchor",  
        buttonAlign:"center",  
        tbar:{  
            xtype: 'container',  
            items: [oneTbar,twoTbar]  
        },  
        bbar: {  
            xtype: 'container',  
            items: [oneTbar,twoTbar]  
        }  
    });  
    w.show();  
});  
</script>  

通過以上方式可以在自己設計panel中增加多個tbar或者bbar工具條。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章