ExtJS6.0之Grid用法

1. 创建数据源

 store = Ext.create('Ext.data.Store', {
    pageSize: limit,
    proxy: {
        type: 'ajax', 
        url: basePath + 'mathineSupplier/mathine-supplier!getMathineSupplierList',
        extraParams :{
            searchKey:searchKey
        },
    reader: {
        type: 'json',
        root: 'root',
        totalProperty: 'count'
    }
    },

});

//向后台请求数据
store.load();
// 点击下一页保留条件
store.on("beforeload", function() {
    //ext3和4以上差异
    store.proxy.extraParams = {
            searchKey:searchKey
    };
});

1. 获取分页数据

limit = parseInt(getCookie("supplier_list_page_size"));
if (!limit || limit <= 0) {
    limit = 20;
}

3.实例化Grid

//复选框
checkBox = Ext.create('Ext.selection.CheckboxModel', {
    mode : "SIMPLE",
    checkOnly : true
});
grid = Ext.create('Ext.grid.Panel', {
    title:'供应商管理',
    store:store,
    renderTo:'grid',
    height:'100%',
    //width:1050,
    stripeRows : true,
    viewConfig : {
        forceFit : true
    },

    height : document.body.clientHeight - 130,
    selModel : checkBox,//复选框添加
    columns: [
        { header: '', xtype: 'rownumberer',dataIndex:'operate', width: 60, align: 'center', sortable: false },  
        //new Ext.grid.RowNumberer({width:50}),
        { header: '供应商名称',  dataIndex: 'suName', align: 'center' },
        { header: '企业类型',  dataIndex: 'coTypeName', align: 'center'},
        { header: '注册号',  dataIndex: 'registeCode', align: 'center'},
        { header: '供应商所在地',  dataIndex: 'suAddr', align: 'center' },
        { header: '企业性质',  dataIndex: 'coNatureName', align: 'center'},
        { header: '注册资本及币种',  dataIndex: 'registeMoney', align: 'center'},
        { header: '联系人',  dataIndex: 'contactName', align: 'center'},
        { header: '手机',  dataIndex: 'contactMobile', align: 'center'},
        { 
            header: '经营范围',  
            dataIndex: 'companyRange',
            width: 300,
            align: 'center',
            renderer : function (value, meta, record) {//实现自动换行
            //  meta.style = 'white-space:normal;word-break:break-all;';
                return '<div style=\"white-space:normal;word-break:break-all;\">' + value + '</div>';
            }
        },
        { header: '备注',  dataIndex: 'remark', align: 'center'},
        {header:'操作', dataIndex: 'operate', width:150, align: 'center', renderer:renderer}
    ],
    tbar: [
    {
        text:'新增',
        iconCls:'ray-icon-add',
        handler:function(){
            var win = Ext.create('Ext.window.Window', {
                title:'新增供应商',
                html: '<iframe style="overflow:auto;width:100%; height:100%;" src="'+basePath+'app/daily_work/supplier_add.jsp" frameborder="0"></iframe>',
                modal: true,
                closable: true,
                width:'50%',
                height:'60%',
                id:'supplier_add'
            }).show();
            win.on('close', function() {
                store.load();
            }, this);
        }
    },
    searchKeyDiv,
    searchTr,
    save2Excel
    ],
    bbar : new Ext.PagingToolbar({  
        store : store, 
        displayInfo : true, 
        displayMsg : '显示第{0}条到{1}条记录,共{2}条,每页 <input name="pageSize" id="pageSize" value="'
        + limit + '" class="NumericInput" size="3" style="vertical-align:middle;width:24px;height:18px;"'
        + ' onChange="limitChanged()" maxLength="4" /> 条 ', 
        emptyMsg : "没有记录" 
    })
});


function renderer(value,cellmeta,record, rowIndex) {

    var html='';
    if(accountId == admin){//record.data.creatorId
        html+='<a href="#" onclick="edit(\''+rowIndex+'\')" >编辑</a>&nbsp;&nbsp;';
    }
//  if(datas.get("attrAddr")){
    html += '<a href="#" onclick="viewAttachment(\''+rowIndex+'\')" >查看附件</a>&nbsp;&nbsp;';
//  html+='<a href="'+basePath+'upload/'+attrAddress+'" target="_blank">查看附件</a>';
//  }
    return html;
}

4.输入每页显示数量后，点击enter后页数变化

function limitChanged(){
    if (parseInt(Ext.get('pageSize').dom.value) <= 0) {
        alert("请输入有效数值");
        return ;
    } else {
        limit = Ext.get('pageSize').dom.value;
        var result = addCookie("supplier_list_page_size", limit, 20);
        store.pageSize = limit;
        grid.dockedItems.items[3].displayMsg = '显示第{0}条到{1}条记录,共{2}条,每页 <input name="pageSize" id="pageSize" value="'
            + store.pageSize + '" class="NumericInput" size="3" style="vertical-align:middle;width:24px;height:18px;"'
            + ' onChange="limitChanged()" maxLength="4" /> 条 ';
        reloadList();
    }
}

//重载数据
function reloadList(){
    store.proxy.extraParams = {
        searchKey:searchKey
    };
    store.load();
}