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);//初始化
},
})