EXTJS入門教程及其框架搭建
EXTJS是一個相容AJAX的前臺WEB UI的框架，在普通的HTML檔案的 BODY 元素中無須寫任何HTML程式碼，就能產生相應的表格等元素。
首先是為每一個頁面定義一個類，再以EXTJS的規範格式增加所需的元素，可以使用所見所得的工具：extbuilder 來操作，這個類將以XXXXX.js的檔名儲存，最後在相應的HTML頁面中引入相關的JS和CSS檔案：
1 |
<script type=" text/javascript " src="/EXTJS/ext-2.2/adapter/ext/ext-base.js "></script>
|
2 |
<script type=" text/javascript " src="/EXTJS/ext-2.2/ext-all-debug.js "></script>
|
3 |
<link rel=" stylesheet " type=" text/css " href=" /EXTJS/ext-2.2/resources/css/ext-all.css " />
|
4 |
<script type=" text/javascript " src= "XXXXX.js "></script>
|
並在BODY中加入下面這段JAVA SCRIPT：
01 |
<script> |
02 |
Ext.onReady( function () {
|
03 |
Ext.QuickTips.init();
|
04 |
Ext.form.Field.prototype.msgTarget='side';
|
05 |
var viewport=new Ext.Viewport( {
|
06 |
layout : 'fit',
|
07 |
border : false,
|
08 |
items : [new system.XXXXX()]
|
09 |
});
|
10 |
viewport.render();
|
11 |
});
|
12 |
</script>
|
其中XXXXX就是之前新加的JS類，則EXT引擎就會以一定的非常漂亮的樣式渲染出頁面來，並且以後的頁面風格要改變，只須更換CSS即可，無須改動頁面。
附完整的程式碼：
PagingGridPanel.js
001 |
Ext.namespace('system');
|
002 |
system.PagingGridPanel = function(config) { |
003 |
Ext.applyIf(this, config);
|
004 |
this.initUIComponents();
|
005 |
system.PagingGridPanel.superclass.constructor.call(this);
|
006 |
this.loadData();
|
007 |
}; |
008 |
Ext.extend(system.PagingGridPanel, Ext.Panel, { |
009 |
initUIComponents : function() {
|
010 |
// BEGIN OF CODE GENERATION PARTS, DON'T DELETE CODE BELOW
|
011 |
this.store1 = new Ext.data.Store({
|
012 |
proxy : new Ext.data.MemoryProxy({
|
013 |
total : 2,
|
014 |
root : [{
|
015 |
age : 56,
|
016 |
name : "IOyFo"
|
017 |
}, {
|
018 |
age : 239,
|
019 |
name : "87tPp"
|
020 |
}]
|
021 |
}),
|
022 |
reader : new Ext.data.JsonReader({
|
023 |
root : "root",
|
024 |
total : "total",
|
025 |
|