Ext JS学习笔记三

表格组件的应用

GridPanel的应用：

常用配置：

1.store ： 配置数据源

2.columns或者colModel ： 列的定义

3.autoExpandColumn：自动扩展的行

常用事件：

1.行的操作：rowclick　　rowdbclick

2.数据单元格：cellclick　　celldbclick

3.排序事件：sortchange

4.选择事件：RowSelectionModel中的各种事件

    Ext.onReady(function(){
                var myData = [
                ['1m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['2m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['3m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['4m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['5m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['6m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['7m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['8m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['9m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['10m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['11m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['12m Co',1.11,0.01,0.12,'9/1 12:00am'],
                ['13m Co',1.11,0.01,0.12,'9/1 12:00am']
                ];
            
            var stores = 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'}
                ]
            });    
            stores.loadData(myData);    
            
            var gridview = new Ext.grid.GridPanel({
                store:stores,
                columns:[
                {id:'company',header:"Company",width:160,sortable:true,
            dataIndex:'company'},
                {header:"Price",width:75,sortable:false,renderer:'usMoney',
            dataIndex:'price'},
                {header:"Change",width:75,sortable:true,
            dataIndex:'change'},
                {header:"% Change",width:75,sortable:true,
            dataIndex:'pctChange'},
                {header:"Last Updated",width:85,sortable:true,renderer:Ext.util.Format.dateRenderer('m/d/Y'),
            dataIndex:'lastChange'}
                ],
                stripeRows:true,
                autpExpandColumn:'company',
                height:350,
                width:600,
                title:'Array Grid',
                bbar: new Ext.PagingToolbar({
                    pageSize:5,
                    store:stores,
                    displayInfo:true,
                    displayMsg:'Displaying topics {0}-{1} of {2}',
                    emptyMsg:"No topics to display",
                    change:function(){ Ext.Msg.alert('ddd'); },
                    beforechange:function(){ Ext.Msg.alert('beforechange'); },
                    items:['-',{
                        pressed:true,
                        enableToggle:true,
                        text:'Show Preview',
                        cls:'x-btn-text-icon details',
                        toggleHandler:function(btn,pressed)
                        {
                            
                            var view = gridview.getView();
                            view.showPreview = pressed;
                            view.refresh();
                        }
                    }]
                    
                })
            });
            gridview.render('grid');
            
            });//

在定义表格的columns配置时，列中的renderer属性，这个属性的含义主要是定义该字段的渲染方式