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="#" οnclick="edit(\''+rowIndex+'\')" >編輯</a>&nbsp;&nbsp;';
    }
//  if(datas.get("attrAddr")){
    html += '<a href="#" οnclick="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();
}