extjs學習筆記4—grid

grid在整個項目中是比較重要的一塊，所以把它化簡了看下主體

        Ext.onReady(function () {            //myData的資料            var myData = [        ['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],        ['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],        ['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],        ['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am']    ];            //創立一個store            var store = new Ext.data.ArrayStore({                fields: [           { name: 'company' },           { name: 'price', type: 'float' },           { name: 'change', type: 'float' },           { name: 'pctChange', type: 'float' },           { name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia' }        ]            });            //裝載資料            store.loadData(myData);            // create the Grid            var grid = new Ext.grid.GridPanel({                //從store中讀取grid資料store: store,                columns: [            {                id: 'company',                header: 'Company',                width: 160            },            {                header: 'Price',                width: 75            },            {                header: 'Change',                width: 75            },            {                header: '% Change',                width: 75            },            {                header: 'Last Updated',                width: 85                renderer: Ext.util.Format.dateRenderer('m/Y/d')            }        ],                height: 350,                width: 600            });            //render到grid所在的div            grid.render('grid-example');        });

　　

 

2012-11-2

　　最近由於項目的原因有寫了很多js代碼，對extjs中grid的用法有了些新的感悟。

1、對結構進行模組化

View Code

 1 grid=Ext.extend(Ext.grid.GridPanel,{ 2     initComponent : function(){ 3     this.ds=new Ext.data.Store({ 4      //對store的執行個體化 5 });//等三種store模式 6     this.sm=new Ext.grid.CheckboxSelectionModel();//grid中表示選中行號的 7     this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),this.sm, 8     {header:''...dataIndex:''}         9 ]);//grid中的表頭  columnmodel10 Ext.apply(this.{11     store:this.ds,12     sm:this.sm,13     cm:this.cm,14     autoExpandColumn:'',//grid的自動拓展列''中的內容為cm中設定的id值15     bbar:new Ext.PagingToolbar({});//底部工具列16     tbar:[] //頂部工具列   17 });18 grid.superclass.initComponent.call(this);//調用父類的構建函數19 }  20 //各類其它函數  例如雙擊事件21 ,dblclick:function(){}22 });