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、对结构进行模块化

grid=Ext.extend(Ext.grid.GridPanel,{
    initComponent : function(){
    this.ds=new Ext.data.Store({
     //对store的实例化
});//等三种store模式
    this.sm=new Ext.grid.CheckboxSelectionModel();//grid中表示选中行号的
    this.cm=new Ext.grid.ColumnModel([new Ext.grid.RowNumberer(),this.sm,
    {header:''...dataIndex:''}        
]);//grid中的表头  columnmodel
Ext.apply(this.{
    store:this.ds,
    sm:this.sm,
    cm:this.cm,
    autoExpandColumn:'',//grid的自动拓展列''中的内容为cm中设置的id值
    bbar:new Ext.PagingToolbar({});//底部工具栏
    tbar:[] //顶部工具栏   
});
grid.superclass.initComponent.call(this);//调用父类的构建函数
}  
//各类其它函数  例如双击事件
,dblclick:function(){}
});