extJs弹出动态表格和列表

extJs弹出动态表格和列表

1.extJs弹出可编辑表格

效果：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

弹出下面的可编辑表格

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

话不多说：上代码

       //自己的事件名称
	   function  test() {
        var records = this.grid.getSelection();
        if (records.length < 1) {
            Ext.alert("提示", "请先选择数据!");
            return;
        }
        //设置 store store数据
        var myModel = Ext.define("InStore", {
            extend: 'Ext.data.Model',
            fields: ['字段1', '字段2', '字段3', '字段4', '字段5', '字段6', '字段7', '字段8', '字段9']
        });
        //接受后台返回数据
        var myStore = Ext.create("Ext.data.JsonStore", {
            model: 'InStore',
            proxy: {
                // load using HTTP
                type: 'ajax',
                url: '加载数据的url?字段=' + xx + '&token=' + token,
                // the return will be XML, so lets set up a reader
                reader: {
                    type: 'json',
                    root: 'value' //数据path
                }
            }
        });

        //加载数据
        myStore.load();
        //声明表格
        var grid = new Ext.grid.GridPanel({
            xtype: 'grid',
            border: true,
            columns: [
           
                {
                    dataIndex: '到货通知编号对应的展示字段',
                    width: 200,
                    text: '到货通知编号'
                },
                {
                    dataIndex: '商品名称对应的展示字段',
                    width: 250,
                    text: '商品名称'
                },
         
                {
                    dataIndex: '应收数量对应的展示字段',
                    text: '应收数量'
                },
                {
                    dataIndex: '实收数量对应的展示字段',
                    text: '实收数量',
                    editor: {
                        allowBlank: true
                    }
                },
                {
                    dataIndex: '正品数量对应的展示字段',
                    text: '正品数量',
                    editor: {
                        allowBlank: true
                    }
                },
                {
                    dataIndex: '生产日期对应的展示字段',
                    text: '生产日期',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                    editor: {
                        xtype: "datefield",
                        format: "Y-m-d",
                        allowBlank: true
                    }
                },
                {
                    dataIndex: '失效日期对应的展示字段',
                    text: '失效日期',
                    renderer: Ext.util.Format.dateRenderer('Y-m-d'),
                    editor: {
                        xtype: "datefield",
                        format: "Y-m-d",
                        allowBlank: true
                    }
                }

            ],
            store: myStore,
            plugins: [
                Ext.create('Ext.grid.plugin.CellEditing', {
                    clicksToEdit: 1 //设置单击单元格编辑
                })
            ],
            buttons: [{
                text: '保存',
                listeners: {
                    click: function () {
                        var m = myStore.getModifiedRecords().slice(0);
                        var jsonArray = [];
                        Ext.each(m, function (item) {
              
                            //此处加上对应的判断
                            
                            jsonArray.push(item.data);
                        });
                        if (jsonArray.length <= 0) {
                            return confirmWin.close();
                        }

                        Ext.Ajax.request({
                            method: 'POST',
                            // 保存接口
                            url: '保存数据的url',
                            jsonData: {list: jsonArray},
                            headers: {'Content-Type': 'application/json', 'Authorization': token},
                            dataType: 'json',
                            //scope : this,
                            success: function (response) {
                                var res = Ext.JSON.decode(response.responseText);
                                Ext.Msg.alert("提示", res.message);
                                return confirmWin.close();
                            },
                            failure: function () {
                                Ext.Msg.alert("错误", "与后台联系的时候出了问题。");
                            },
                        });
                    }
                }
            }]
        });
        //创建窗口
        // window 需要修改 不要重复
        var confirmWin = Ext.create('Ext.window.Window', {
            title: '标题',
            width: 1161,
            height: 550,
            layout: 'fit',
            items: [grid]
        }).show();

    }

2.extJs弹出列表

效果

弹出的框框

上代码:

var GlobalPanel = ''
//这个美神
var myModel = Ext.define("InStore", {
    extend: 'Ext.data.Model',
    fields: ['字段一'，'字段二']
});
//接受后台返回数据

var myStore = Ext.create("Ext.data.JsonStore", {
    model: 'InStore'
});
//伪造的数据  可以替代testData模拟假数据看效果
var data = [{
    "rid": 22142,
    "packageCode": "3000000014",
    "orderNo": "tkoo21",
    "goodsNo": "smallWaybillNo",
    "waybillNo": "222342228",
    "logisCompanyCode": "2罐奶粉"
}]
//加载数据
myStore.load();

var grid = new Ext.grid.GridPanel({
    xtype: 'grid',
    border: true,
    columns: [
        {
            dataIndex: '包裹编号字段',
            text: '包裹编号'
        },
        {
            dataIndex: '拆后订单号字段',
            text: '拆后订单号'
        },
        {
            dataIndex: '子订单号字段',
            text: '子订单号'
        },
        {
            dataIndex: '父订单号字段',
            text: '父订单号'
        },
        {
            dataIndex: '物流企业编码字段',
            text: '物流企业编码'
        },
        {
            dataIndex: '是否拆包字段',
            text: '是否拆包'
        },
        {
            dataIndex: '是否发货字段',
            text: '是否发货'
        },
    ],
    store: myStore

});
var testData = [];

root.js.wmsmgr.ordermgr.ParcelDtlDetail = Ext.extend(system.javascript.extjs.plugin.tool.DetailPanel, {
    width: 600,
    height: 300,
    layout: {
        type: 'table',
        columns: 8
    },
    items: [grid],
    initValue: function () {


    },
    initAutoStatus: function () {
        var orderNo = this.grid.selection.data.order_no;
        Ext.Ajax.request( {
            timeout : 3000000,
            url : 'url',
            params : '字段=' + 字段 + '&token=' + token ,
            success : function(response, config) {
                var res=Ext.decode(response.responseText);
                if(res.success){
                    var json =response.responseText;
                    testData = JSON.parse(json).value;
                    myStore.loadData(testData, true);
                }
            },
            failure : function(form, action) {
            }
        });
        myStore.loadData(testData, true);//初始化
    },

})

Data = JSON.parse(json).value;
myStore.loadData(testData, true);
}
},
failure : function(form, action) {
}
}
myStore.loadData(testData, true);//初始化
},

})