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中的表头  columnmodel

10 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 });