標準面板:
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...