读书人

Ext可编者grid

发布时间: 2012-09-14 11:53:44 作者: rapoo

Ext可编辑grid

?

//创建recode结构     var recode =Ext.data.Record.create([     {name:"productProjectId",mapping:0},     {name:"productName",mapping:1},     {name:"searchBtn",mapping:2},     {name:"productNum",mapping:3},     {name:"accountMoney",mapping:4},     {name:"costMoney",mapping:5}     ]);     //创建data     var data =[];     //创建reader     var reader =new Ext.data.ArrayReader({},recode);     //创建一个store返回规范的recode对象     var store =new Ext.data.Store(              {                proxy:new Ext.data.MemoryProxy(data),              reader:reader,                pruneModifiedRecords :true              });     //加载数据     store.load();//定义表格编号var rowNumber = new Ext.grid.RowNumberer({sortable: true})//创建列var cm = new Ext.grid.ColumnModel([//rowNumber,{header: 'productProjectId',dataIndex: 'productProjectId',hidden: true,sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true}))},{header:"商品/项目",dataIndex:"productName",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.TextField({allowBlank:true,readOnly:true}))},{header:"操作",dataIndex: 'searchBtn',align: 'center',renderer:function(){return '<img src=\"'+ ctxPath +'/resource/image/systemIcon/47.png\" style=\"cursor:pointer;\" onclick=\"javascript:settleBtnExp();\" />';}},{header:"数量",dataIndex:"productNum",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,maxLength:3}))},{header:"应收金额",dataIndex:"accountMoney",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true,readOnly:true}))},{header:"实收金额",dataIndex:"costMoney",sortable:true,editor:new Ext.grid.GridEditor(new Ext.form.NumberField({allowBlank:true}))}]);        var tbar = new Ext.Toolbar({     items:[{       text: "添加一行",       iconCls:"blist",       handler:function(){      //定义一个recode对象    var initValue={productProjectId:"",productName:"",searchBtn:"",productNum:"",accountMoney:"",costMoney:""};    var p =new recode(initValue); //根据上面创建的recode 创建一个默认值grid.stopEditing();store.insert(0,p);//在第一个位置插入grid.startEditing(0,1);//指定的行/列,进行单元格内容的编辑p.dirty=true;p.modified=initValue;if(store.modified.indexOf(p)==-1){         store.modified.push(p);       }       } },"-",{       text:"删除",       iconCls:"delCls",       handler:function(){ var sm = grid.getSelectionModel(); var cell = sm.getSelectedCell();if (Ext.isEmpty(cell)) {Ext.Msg.alert('提示', '你没有选中行');return ;}var record = store.getAt(cell[0]);Ext.MessageBox.confirm('确认', '你确认要删除'+record.get('productName')+'这行吗?', function(btn){              if(btn=='yes'){  store.remove(record);}            });              /* 此种方法用于带单选按钮的gridCheckboxSelectionModel              var ds = grid.getStore();var selectedRow = grid.getSelectionModel().getSelected();if(selectedRow){Ext.MessageBox.confirm('确认', '你确认要删除这行吗?', function(btn){              if(btn=='yes'){  ds.remove(selectedRow);}            });            }else{            Ext.Msg.alert("提示", "请选择一条需要删除的记录!");            }*/       }     }]    });        // 定义分页条    var bbar = getBarPaging(store, 'dtlBbarExt', false, function (){    //var keyId = Ext.getCmp("settleId").getValue();   store.reload({params : {start : 0,limit : bbar.pageSize//'memberSettleAccount.settleId': keyId}});        });        var grid = new Ext.grid.EditorGridPanel({columnWidth : 1,height: 200,store: store,cm: cm,id: 'listGridDtlExp',clicksToEdit : 1, // 单击、双击进入编辑状态autoScroll : true,stripeRows: true, // 斑马线loadMask: true,loadMask: {msg:'正在加载数据.....'},tbar: tbar,//bbar: bbar,frame: true})
// 检查新增行的可编辑单元格数据合法性
var m = gridstore.modified.slice(0);for (var i = 0; i < m.length; i++) {var record = m[i];var rowIndex = store.indexOfId(record.id);var value = record.get(colName);if (Ext.isEmpty(value)) {// Ext.Msg.alert('提示', '数据校验不合法');return false;}var colIndex = cm.findColumnIndex(colName);var editor = cm.getCellEditor(colIndex).field;if (!editor.validateValue(value)) {// Ext.Msg.alert('提示', '数据校验不合法');return false;}}
?

读书人网 >Web前端

热点推荐