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

时间: 2024-11-05 22:43:04

Ext之Grid的相关文章

Ext让grid选中第一行,并且触发点击事件

     grid.getSelectionModel().selectRow(0);     grid.fireEvent("rowclick",this,0,Ext.EventObject); 给grid绑定事件即可: listeners:{        scope:this,        rowclick:function(grid,rowIndex,event){            var row=grid.getStore().getAt(rowIndex);    

ext中grid根据数据不同显示不同样式

核心代码: var clsRender = function(value){ if (value == 'male') { return "<span style='color:red;font-weight:bold;'>红男</span>"; } else { return "<span style='color:green;font-weight:bold;'>绿女</span>"; } }}, var cm =

Ext 表格grid

this.sm = new Ext.grid.CheckboxSelectionModel({ singleSelect : false, checkOnly : true }); this.cm = new Ext.grid.ColumnModel([ this.sm, { header : '任务号', align : 'left', menuDisabled : true, dataIndex : 'task_no', width : 100 }, { singleSelect 表示是否可

详解Ext分页Grid

Ext.onReady(function() { var store = getJsonStore(); var cols = getCols(); var pagingbar = getPagingBar(store); var grid = new Ext.grid.GridPanel({ width : 700, height : 500, title : 'ExtJS.com - Browse Forums', store : store, trackMouseOver : true,

Ext js ----&gt; grid

<link href="../bootstrap32/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> <link href="../font-awesome41/css/font-awesome.min.css" rel="stylesheet" type="text/css" /> <l

后台查到了json数据,前台ext的grid中显示不出来

前台页面 <script type="text/javascript"> Ext.onReady(function(){ Ext.QuickTips.init(); //定义列 var cm=new Ext.grid.ColumnModel([ {header:'客户编号',dataIndex:'id'}, {header:'客户姓名',dataIndex:'name'}, {header:'联系电话',dataIndex:'phone'}, {header:'房屋种类',

Ext之grid內編輯

Ext.grid.Panel xtype:gridpanel,grid 如果要完成在grid中編輯的功能.首先要填加 selType: 'cellmodel',    plugins: [        Ext.create('Ext.grid.plugin.CellEditing', {            clicksToEdit: 1        })    ],這個是實現單個點擊直接編輯 或者加上 selType: 'rowmodel',    plugins: [        E

Ext中Grid重新load设置URL

一.前言    Extjs中grid网格有时候需要重新加载,加载的时候对应不同的URL,什么情况出现:有需要我们在添加附件的时候,添加完成了附件,需要把另一个show添加的数据重新加载到grid中,而加载show刚刚添加的数据的,传入的参数不同,初始化gird的方法不能再使用,这个时候需要重新去加载不同URL所对应的方法. 二.代码示例 三.代码说明

Ext 再grid的renderer中使用ajax访问服务器

ps:在renderer中使用ajax访问服务器,并不是一个很好的方法因为会徒增大量的页面负载,个人建议是将数据在后台处理好后,封装到store中. 以下是在renderer中利用ajax渲染表格内容的代码: //定义列模式 var colunms=[ { header: '项目名称', align: 'left', dataIndex : 'xm_name', flex: 1, sortable: false}, { header: '项目类型', align: 'left', dataInd