数据显示 gripPanel

代码：

var data = [                                                            //数据内容
        ['1','name1','descn1','sakdfjd','sldakjfdsa'],
         ['2','2','2','2','2010/04/06'],
    ];

    var ds = new Ext.data.Store({                             
       // proxy: new Ext.data.MemoryProxy(data),
       data:data,                                                    //加载数据
        reader: new Ext.data.ArrayReader({}, [          //数据接口
            {name: 'company'},                            
            {name: 'price'},
            {name: 'change'},
            {name: 'pctChange'},
            {name: 'lastChange'}
        ])
    });


var grid = new Ext.grid.GridPanel({
  //  store: new Ext.data.Store({
       // data: xg.dummyData
   // }),
 
    columns: [
        {id:'company', header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},//处理数据对象的DataReader会返回一个Ext.data.Record对象的数组。其中的id 属性会是一个缓冲了的键
        {header: "Change", width: 120, sortable: true, dataIndex: 'change'},
        {header: "% Change", width: 120, sortable: true, dataIndex: 'pctChange'},
        {header: "Last Updated", width: 135, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
    ],
    viewConfig: {
        forceFit: true,

//      Return CSS class to apply to rows depending upon data values
        getRowClass: function(record, index) {
            var c = record.get('change');
            if (c < 0) {
                return 'price-fall';
            } else if (c > 0) {
                return 'price-rise';
            }
        }
    },
    store:ds,                                                     //加载数据
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width:600,
    height:300,
    frame:true,
    title:'Framed with Checkbox Selection and Horizontal Scrolling',
    iconCls:'icon-grid',

    bbar: new Ext.PagingToolbar({
        pageSize: 2,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
        emptyMsg: "没有记录"
    })                                                                             //分页显示
});

Ext.onReady(function(){
     grid.render('hello');

});

 

//extjs 中的gridPanel 是用于显示数据的，其采用了接口的方式，方便的把数据的定义，数据源及数据的显示分开来，是不错的使用，感觉很好。