对GridPanel静态数据添加，删除，编辑
1.代码块
View Code
var smCompetetor = new Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn }); var cmCompetetor = new Ext.grid.ColumnModel([ smCompetetor, { header: jsonDataDictionary.labJZDSMC, dataIndex: 'CompetetorName', sortable: true }, //竞争对手名称 {header: jsonDataDictionary.labJZDSQK, dataIndex: 'Description', sortable: true, width: 200} //竞争对手情况 ]); var storeCompetetor = new Ext.data.ArrayStore({ fields: [ { name: 'CompetetorName' }, { name: 'Description' } ] }); var Record = Ext.data.Record.create([ { name: 'CompetetorName', type: 'string' }, { name: 'Description', type: 'string' } ]); //添加按钮 var tbCompetetorAdd = new Ext.Button({ text: jsonDataDictionary.btnAdd, iconCls: 'icon_add', handler: ShowCompetetor }); //删除按钮 var tbCompetetorDelete = new Ext.Button({ text: jsonDataDictionary.btnDelete, iconCls: 'icon_delete', handler: function() { var row = null; row = Ext.getCmp("gridArrayCompetetor").getSelectionModel().getSelections(); if (row.length < 1) { Ext.Msg.alert(" 提示消息", "至少选择一条数据！"); } else { for (var i = 0; i < row.length; i++) { storeCompetetor.remove(row[i]); } } } }); //编辑按钮 var tbCompetetorEdit = new Ext.Button({ text: jsonDataDictionary.btnEdit, iconCls: 'editgif', handler: function(btn, pressed) { var row = null; row = Ext.getCmp("gridArrayCompetetor").getSelectionModel().getSelections(); if (row.length < 1) { Ext.Msg.alert(" 提示消息", "请选择一行数据！"); } if (row.length > 1) { Ext.Msg.alert(" 提示消息", "每次只能选择一行数据进行编辑！"); } if (row.length == 1) { var record = null; for (var i = 0; i < row.length; i++) { record = row[i]; } //竞争对手信息编辑 //竞争对手名称 var txtEditCompetetorName = new Ext.form.TextField({ fieldLabel: jsonDataDictionary.labJZDSMC, name: 'txtEditCompetetorName', width: '59%', maxLength: 100, value: record.get("CompetetorName"), allowBlank: false }); txtEditCompetetorName.on('render', AddRedStar); txtEditCompetetorName.originalValue = record.get("CompetetorName"); //竞争对手情况 var txtEditCompetetorDescribe = new Ext.form.TextArea({ xtype: 'textarea', name: 'txtEditCompetetorDescribe', fieldLabel: jsonDataDictionary.labJZDSQK, maxLength: 500, value: record.get("Description"), width: 350, height: 80 }) txtEditCompetetorDescribe.originalValue = record.get("Description"); //提交按钮 var btnShowSubmit = new Ext.Button({ text: jsonDataDictionary.btnSubmit, iconCls: 'icon_submit', handler: function() { if (!Showform.getForm().isValid()) { Ext.Msg.alert("提示", "表单输入验证失败，请正确填写完整！"); return; } var linenum = gridArrayCompetetor.getSelectionModel().lastActive; gridArrayCompetetor.getStore().getAt(linenum).set("CompetetorName", txtEditCompetetorName.getValue()); gridArrayCompetetor.getStore().getAt(linenum).set("Description", txtEditCompetetorDescribe.getValue()); win.close(); } }); //重置按钮 var btnShowReset = new Ext.Button({ text: jsonDataDictionary.btnReset, iconCls: 'icon_reset', handler: function() { txtEditCompetetorName.setValue(txtEditCompetetorName.originalValue); txtEditCompetetorDescribe.setValue(txtEditCompetetorDescribe.originalValue); } }); //表单工具栏 var tbShowForm = new Ext.Toolbar({ items: [ { xtype: "tbspacer" }, { xtype: "tbspacer" }, { xtype: "tbspacer" }, { xtype: "tbspacer" }, btnShowReset, { xtype: "tbseparator" }, btnShowSubmit, { xtype: "tbseparator" } ] }); //竞争对手编辑 var Showform = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 80, buttonAlign: 'center', frame: false, width: 450, height: 200, autoWidth: true, autoHeight: true, border: false, items: [ { layout: 'column', border: false, items: [ { columnWidth: 1, border: false, layout: 'column', style: 'margin-left: 20;margin-top:5', items: [ { columnWidth: .9, border: false, layout: 'form', items: [txtEditCompetetorName, { border: false, layout: "form", style: "margin-top:10;", items: [ txtEditCompetetorDescribe ] } ] } ] } ] } ], bbar: tbShowForm }); //竞争对手编辑 var win = new Ext.Window({ closeAction: 'hide', modal: true, resizable: false, maximizable: false, title: jsonDataDictionary.btnEdit, closable: true, closeAction: 'hide', autoScroll: true, width: 520, height: 225, autoHeight: true, items: [Showform] }); win.show(); } } }); //竞争对手增加 function ShowCompetetor() { //竞争对手名称 var txtAddCompetetorName = new Ext.form.TextField({ fieldLabel: jsonDataDictionary.labJZDSMC, name: 'txtAddCompetetorName', maxLength: 100, width: '59%', allowBlank: false }); txtAddCompetetorName.on('render', AddRedStar); //竞争对手情况 var txtAddCompetetorDescribe = new Ext.form.TextArea({ xtype: 'txtAddCompetetorDescribe', fieldLabel: jsonDataDictionary.labJZDSQK, maxLength: 500, width: 350, height: 80 }) //提交按钮 var btnShowSubmit = new Ext.Button({ text: jsonDataDictionary.btnSubmit, iconCls: 'icon_submit', handler: function() { var Comrs = gridArrayCompetetor.getStore().getRange(); for (var i = 0; i < Comrs.length; i++) { if (Comrs[i].get("CompetetorName") == txtAddCompetetorName.getValue()) { Ext.Msg.alert("提示", "竞争对手已存在！"); return; } } if (!Showform.getForm().isValid()) { Ext.Msg.alert("提示", "表单输入验证失败，请正确填写完整！"); return; } storeCompetetor.add(new Ext.data.Record( { CompetetorName: txtAddCompetetorName.getValue(), Description: txtAddCompetetorDescribe.getValue() } )); win.close(); } }); //重置按钮 var btnShowReset = new Ext.Button({ text: jsonDataDictionary.btnReset, iconCls: 'icon_reset', handler: function() { Showform.form.reset(); } }); //表单工具栏 var tbShowForm = new Ext.Toolbar({ items: [ { xtype: "tbspacer" }, { xtype: "tbspacer" }, { xtype: "tbspacer" }, { xtype: "tbspacer" }, btnShowReset, { xtype: "tbseparator" }, btnShowSubmit, { xtype: "tbseparator" } ] }); //竞争对手增加 var Showform = new Ext.form.FormPanel({ labelAlign: 'right', labelWidth: 80, buttonAlign: 'center', frame: false, height: 200, autoHeight: true, border: false, items: [ { layout: 'column', border: false, items: [ { columnWidth: 1, border: false, layout: 'column', style: 'margin-left: 20;margin-top: 5;', items: [ { columnWidth: .9, border: false, layout: 'form', items: [txtAddCompetetorName, { border: false, layout: "form", style: "margin-top:10;", items: [ txtAddCompetetorDescribe ] } ] } ] } ] } ], bbar: tbShowForm }); //竞争对手增加 var win = new Ext.Window({ closeAction: 'hide', modal: true, resizable: false, maximizable: false, title: jsonDataDictionary.btnAdd, closable: true, closeAction: 'hide', width: 520, height: 225, plain: false, autoScroll: true, autoWidth: false, autoHeight: true, items: [Showform] }); win.show(); } var gridArrayCompetetor = new Ext.grid.GridPanel({ cm: cmCompetetor, sm: smCompetetor, defaults: { autoWidth: true }, store: storeCompetetor, title: jsonDataDictionary.labJZDSXX, //竞争对手信息, id: "gridArrayCompetetor", bbar: [{ xtype: "tbseparator" }, { xtype: "tbseparator" }, tbCompetetorAdd, '-', tbCompetetorDelete, '-', tbCompetetorEdit], viewConfig: { forceFit: true, columnsText: '显示的列', scrollOffset: 20, sortAscText: '升序', sortDescText: '降序' } });
2.添加代码
storeCompetetor.add(new Ext.data.Record( { CompetetorName: txtAddCompetetorName.getValue(), Description: txtAddCompetetorDescribe.getValue() } ));
3.删除代码
var row = null; row = Ext.getCmp("gridArrayCompetetor").getSelectionModel().getSelections(); if (row.length < 1) { Ext.Msg.alert(" 提示消息", "至少选择一条数据！"); } else { for (var i = 0; i < row.length; i++) { storeCompetetor.remove(row[i]); } }
4.编辑代码
如需保留初始值可用如下代码
txtEditCompetetorName.setValue(txtEditCompetetorName.originalValue);
编辑值
var linenum = gridArrayCompetetor.getSelectionModel().lastActive; gridArrayCompetetor.getStore().getAt(linenum).set("CompetetorName", txtEditCompetetorName.getValue()); gridArrayCompetetor.getStore().getAt(linenum).set("Description", txtEditCompetetorDescribe.getValue());