Extjs-GridPanel的使用之显示数据

posted by David Chen at April 21, 2008, 1:56 AM    

在extjs中，用GridPanel来显示数据，需要用到Store来处理，详细就不多说了，因为基本上看了下在的代码应该
知道如何去处理数据了，如果看得一头雾水，建议还是先回去看看ext的基础说明吧。
var store = new Ext.data.SimpleStore({

// fields的取值应与下面columns的dataIndex值对应,注意大小写
        fields: ['company', 'price', 'change', 'pctChange', 'lastChange'],
        data : [
        ['AL', '0.1', 'The Heart of Dixie', '6', new Date()],
        ['AK', '22222', 'The Land of the Midnight Sun', '7', new Date()],
        ['IN', '109.1', 'The Hospitality State', '8', new Date() ]
        ]
});
var grid = new Ext.grid.GridPanel({
    store: store, // 数据
    columns: [ // 列名, dataIndex应对应store中的fields, 指明显示某个field的数据
        {header: "Company", width: 200, sortable: true, dataIndex: 'company'},
        {header: "Price", width: 120, sortable: true, renderer: 
                  Ext.util.Format.usMoney, dataIndex: 'price'},
        // 货币格式
        {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
    },
    sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
    width:600,
    height:300,
    frame:true,
    collapsed: false, // 默认是展开状态
    collapsible: true, // 自动出现 expand/collapse toggle button, 上下收展的按纽
    titleCollapse: true, //collapsible: true,点击title也可以收展
    hideCollapseTool: true, //隐藏上下或左右按纽
    // 如果是放到 viewPort中，region: 'west',那么就变成了左右收展的按纽, region: 'north'又变成了上下收展的按纽
    title:'test title', // 表格标题
    header: false, // 不创建标题栏
    headerAsText: false, // 如果有标题栏, 隐藏标题栏
    iconCls:'icon-grid', // pressed:true, 设置按纽状态为按下的状态,
    tbar:[{ pressed:true, text:'刷新', handler:function(){alert('q');} }], //表格的工具栏
    tools:[ // 与title同一栏的按纽
          {id:"save"},
          {id:"help", handler:function(){Ext.Msg.alert('help','please help me!');}},
          {id:"close"}
          // 按纽取值如下, close,minimize ,maximize ,restore ,gear ,pin ,unpin 
          // toggle, down ,refresh ,minus ,plus ,help ,search ,save ,right ,left ,up
          ]
});
grid.render('grid');
grid.addListener( 'rowclick', function( g, rowIdx, eobj ) { // 对grid的行添加点击事件
        var rd = store.getAt(rowIdx); // 返回是的一个 Record. Store包含的就是Record[]
        //alert(rd.get('id'));
        //substore.removeAll(); // 清除另一个store,
        //substore.addSorted(rd); // 给另一个store在原来的排序方式下添加一个record
});