ExtJs之表格控制項入門

標籤：des   style   blog   class   code   c   

　　extjs的表格功能非常強大,包括了排序,緩衝,拖動,隱藏某一列,自動顯示行號,列匯總,儲存格編輯等實用功能.表格由類Ext.grid.GridPanel定義,繼承自Panel,其xtype為grid.Extjs中表格Grid必須包含列定義資訊,並指定表格的資料存放區器Store.表格的列資訊由類Ext.grid.ColumnModel定義,而表格的資料存放區器則是由Ext.data.Store定義,資料存放區器根據解析資料的不同分為JsonStore,simleStore,GroupingStore等.

大家知道要使用Extjs必須引入他的庫,所以我們要引入以下幾個檔案:

ext-all.css

ext-base.js

ext-all.js

PS:筆者採用的是extjs3.0版本

那怎麼載入外掛程式呢?放心,extjs有自己載入的方法:

Ext.onReady(function(){

//coding...

}

下面我們看一個簡單一實例代碼:

Ext.onReady(function(){var cm =new Ext.grid.ColumnModel([                {header:‘編號‘,dataIndex:‘id‘},                {header:‘名稱‘,dataIndex:‘name‘},                {header:‘描述‘,dataIndex:‘descn‘}            ]);        //資料定義        var data=[            [‘1‘,‘name1‘,‘descn1‘],            [‘2‘,‘name1‘,‘descn2‘],            [‘3‘,‘name1‘,‘descn3‘],            [‘4‘,‘name1‘,‘descn4‘],            [‘5‘,‘name1‘,‘descn5‘]        ];        //資料來源定義        var ds=new Ext.data.Store({            proxy:new Ext.data.MemoryProxy(data),            reader:new Ext.data.ArrayReader({},[                {name:‘id‘},                {name:‘name‘},                {name:‘descn‘}                ])                    });        ds.load();        var grid = new Ext.grid.GridPanel({            renderTo:Ext.getBody(),            ds:ds,            cm:cm,            width:300,            autoHeight:true        });        });

View Code

執行個體效果:

後期表格中的資料都是可以用json從後台擷取的哦.這樣既有了效率又有了良好的ui介面,何樂而不為呢.