Ext複雜的功能表列

標籤：style   blog   http   color   os   檔案   

程式碼範例：

1、按鈕組的配置方式是按照buttongrouptable進行布局的，columns可以多少行，colspan跨幾行，所以在布局的時候注意；2、在buttonggroup中，scale:‘large‘表示表徵圖的大小；3、iconAlign：可以定義按鈕所在的位置，上面或下面4、new Ext.menu.ColorPicker可以定義一個顏色選取器

 1 Ext.onReady(function(){ 2  3 var toolbar =newExt.toolbar.Toolbar({ 4  5 renderTo:‘toolbar‘, 6  7 width:300 8  9 });10 11 var fileMenu =newExt.menu.Menu({12 13 items:[{14 15 xtype:‘textfield‘,16 17 hideLabel:true,18 19 width:10020 21 },{22 23 text:‘顏色選擇‘,24 25 menu:newExt.menu.ColorPicker()26 27 },{28 29 xtype:‘datepicker‘30 31 },{32 33 xtype:‘buttongroup‘,34 35 columns:3,36 37 title:‘按鈕組‘,38 39 items:[{40 41 text:‘使用者管理‘,42 43 scale:‘large‘,44 45 colspan:3,46 47 width:170,48 49 iconCls:‘userManager‘,50 51 iconAlign:‘top‘52 53 },{54 55 text:‘建立‘,56 57 iconCls:‘newIcon‘58 59 },{60 61 text:‘建立‘,62 63 iconCls:‘openIcon‘64 65 },{66 67 text:‘儲存‘,68 69 iconCls:‘saveIcon‘70 71 }]72 73 }]74 75 });76 77 toolbar.add({78 79 text:‘檔案‘,80 81 menu:fileMenu82 83 })84 85 });

 

展示效果：   

來自為知筆記(Wiz)