Ext之Grid

1

var columns = [new Ext.ux.grid.CCRowNumberer({width:40}), {
        header : '排名',
        dataIndex : 'id',
        width : 40
    }, {
        header : '姓名',
        dataIndex : 'name',
            width : 40
    }, {
        header : '业务类型',
        dataIndex : 'yewu'
    }, {
        header : '项目名称',
        dataIndex : 'xiangmu'
    }, {
        header : '发送渠道',
        dataIndex : 'qudao'
    }, {
        header : '获得积分',
        dataIndex : 'point',
        sortable : true,
    }, {
        header : '时间范围',
        dataIndex : 'date'
    }, {
        header : '工号',
        dataIndex : 'no'    }, {
        header : '业务条线',
        dataIndex : 'tiaoxian'
    }, {
        header : '所属中心',
        dataIndex : 'zhongxin'
    }, {
        header : '所属科室',
        dataIndex : 'keshi'
    }, {
        header : '所属业务组',
        dataIndex : 'zu'
    } ];
    var data = [
            [ '1', '张三', '服务', '额度引导', '掌上生活', 12, '2015/01/01-2015/06/06',
                    '9527', '金普/高端/收单', '上海客服', '金普卡五室', 'xxx组' ],
            [ '2', '李四', '服务', '额度引导', '掌上生活', 34, '2015/01/01-2015/06/06',
                    '9527', '金普/高端/收单', '上海客服', '金普卡五室', 'xxx组' ],
            [ '3', 'Jack', '营销', '额度引导', '掌上生活', 38, '2015/01/01-2015/06/06',
                    '9527', '金普/高端/收单', '上海客服', '金普卡五室', 'xxx组' ],
            [ '4', 'Rose', '营销', '额度引导', '掌上生活', 40, '2015/01/01-2015/06/06',
                    '9527', '金普/高端/收单', '上海客服', '金普卡五室', 'xxx组' ]

    ];
    var store = new Ext.data.ArrayStore({
        pageSize : 10,
        data : data,
        fields : [ 'id','name','yewu', 'xiangmu', 'qudao','point', 'date', 'no', 'tiaoxian', 'zhongxin', 'keshi', 'zu']
    });
    var grid = new Ext.grid.GridPanel({

        title:'查询结果',
        autoHeight : true,
        store : store,
        columnLines: true,                            

        //列之间的分割线
        columns : columns,
        //斑马线
        stripeRows:true,

        bbar : new Ext.PagingToolbar({
            pageSize : 10,
            store : store,
            displayInfo : true,
            displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
            emptyMsg : "没有记录"
        }),
        loadMask : true,// 数据加载过程中显示正在加载的效果
        forceFit : true

    });

 

Done