ExtJS4學習筆記五 面板使用

2021-08-31 17:18:15 字數 3231 閱讀 4587

標準面板:

ext.create('ext.panel.panel',,,],

buttons:

});

面板載入遠端頁面:

ext.create('ext.panel.panel',);

面板載入本地資源:

本地資源---員工列表

序號姓名1張三

2李四3王五

4趙六5陳七

6楊八7劉九

使用html配置項自定義面板內容:

var htmlarray = [

'','員工列表

','序號

姓名',

'1張三

','2

李四',

'3王五

','4

趙六',

'5陳七

','6

楊八',

'7劉九

',''

];ext.create('ext.panel.panel',);

使用items配置項新增單一元件示例:

ext.create('ext.panel.panel',]

});

使用items配置項新增多個元件示例:

本地資源---員工列表

序號姓名1張三

2李四3王五

ext.layout.container.auto布局示例:

ext.create('ext.panel.panel',,

//面板items配置項預設的xtype型別為panel,

//該預設值可以通過defaulttype配置項進行更改

items: [,]

});

ext.layout.container.fit布局示例:

ext.create('ext.panel.panel',,

//面板items配置項預設的xtype型別為panel,

//該預設值可以通過defaulttype配置項進行更改

items: [,]

})

ext.layout.container.accordion布局示例:

ext.create('ext.panel.panel',,

items: [,,]

});

ext.layout.cardlayout布局示例:

百分比(percentage)定位示例:

ext.create('ext.panel.panel',,

items:

});

偏移值(offsets)定位:

ext.create('ext.panel.panel',,

items:

});

參考邊(sides)定位:

ext.create('ext.panel.panel',,

items:

});

ext.layout.container.absolute布局示例:

ext.create('ext.panel.panel',,

items: [,]

});

指定固定列寬示例:

ext.create('ext.panel.panel',,

items: [,]

});

使用百分比指定列寬:

ext.create('ext.panel.panel',,

items: [,]

});

固定值與百分比結合使用:

ext.create('ext.panel.panel',,

items: [,,]

});

ext.layout.container.table布局示例:

ext.create('ext.panel.panel',,

frame:true,//渲染面板

height : 150,

width : 210,

renderto: ext.getbody(),

defaults : ,

items: [,,,,

]});

ext.layout.container.border布局示例:

ext.create('ext.panel.panel',,

items: [,,,,]

});

ext.layout.container.hbox布局示例:

ext.create('ext.panel.panel',,

height : 150,

width : 300,

frame : true,

renderto: ext.getbody(),

items: [,,]

});

ext.container.viewport示例:

ext.create('ext.container.viewport',,,]

});

ext.tab.panel示例:

ext.create('ext.tab.panel',,,,

,]});

ext.tab.panel示例(動態新增tab頁):

var tabpanel = ext.create('ext.tab.panel',],

buttons :

});function addtabpage())

tabpanel.setactivetab(tabpage);//設定當前tab頁

}

ExtJS4學習筆記 五 Grid分頁

grid元件,當資料量很大的時候,就需要分頁顯示,本文介紹如何實現extjs4 grid的分頁功能。先看thml w3c dtd xhtml 1.0 transitional en demo 這裡引用的js檔案,都是相對於extjs4整個目錄的。如果已經將js和css檔案剝離並分目錄放置了,那麼一定...

學習Extjs4心得

其實,學習extjs4的過程中,經常的檢視api。因為一開始接觸這個,所以一開始不會檢視api,但後來玩久了,也就能夠很熟練的玩了。其實,不管事什麼開發語言還是框架,學會檢視api是我們必須要做的事 在開發過程中,最糾結的就是除錯,我用的是firefox,裡面有個firebug,是除錯js的神器,可...

ExtJS4學習筆記 八 Grid分頁

grid元件,當資料量很大的時候,就需要分頁顯示,本文介紹如何實現extjs4 grid的分頁功能。先看thml w3c demo 這裡引用的js檔案,都是相對於extjs4整個目錄的。如果已經將js和css檔案剝離並分目錄放置了,那麼一定要注意修改bootstrap.js。js ext.requi...