才学的Extjs 版本用的4.2.1的自己写了个demo该怎么改才可以进行编辑?代码如下:
var store = Ext.create('Ext.data.Store', {
fields : ['numberid', 'id', 'name', 'typename',
'unitname','sum','pl','rk'],
data : {
items : [
{ numberid : '1', id : 'WL-201608160001',
name : '联想笔记本', typename : '52a-55',
unitname:'台',sum:'12',sum:12
},
{ numberid : '2', id : 'WL-201608160002',
name : '戴尔笔记本', typename : '52s-55',
unitname:'台',sum:'12',sum:12
},
{ numberid : '3', id : 'WL-201608160003',
name : '苹果笔记本', typename : '52f-55',
unitname:'台',sum:'12',pl:"",rk:""
},
]
},
proxy : {
type : 'memory',
reader : {
type : 'json',
root : 'items'
}
}
});
var pageToolbar=new Ext.create('Ext.panel.Panel', {
height:28,
items:[{
xtype: 'textfield',
fieldLabel: '合计',
inputId:"moneycount",//文本框id
inputType:"Text",//input的类型
labelWidth :400,//lable宽度
inputWidth:70,//input宽度
style: {
marginTop:"2px",
marginLeft:"20px"
}
}]
});
var datagrid=Ext.create('Ext.grid.Panel', {
store : store,
height:155,
width:600,
columnLines:true,//是否显示列之间的线条分割
sortable:true,//可以排序
selModel:{ //设置可以选中多行
injectCheckbox:1,//复选框出现的列
mode:"SIMPLE",
checkOnly:false//是否只有复选按钮才能选中行
},
selType:"checkboxmodel",//设置复选按钮
autoScroll:true,//设置滚动条
viewConfig:{forceFit:false},//设置滚动条
columns : [
{ text : '(栏号)', dataIndex : 'numberid',width: 200 },
{ text : '物流编号', dataIndex : 'id', width: 200},
{ text : '(物料名称)', dataIndex : 'name' ,width: 300},
{ text : '规格型号', dataIndex : 'typename',width: 200 },
{ text : '单位', dataIndex : 'unitname',width: 80 },
{ text : '数量', dataIndex : 'sum',width: 80 },
{ text : '批号', dataIndex : 'pl',width: 80 },
{ text : '分录备注', dataIndex : 'rk',width: 80 }
],
listeners: {
/*click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ alert('click el'); }
},*/
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){
alert(Ext.getDom("text1").value);
/*alert(Ext.getDom("text2").value);
alert(Ext.getDom("text3").value);
alert(Ext.getDom("text4").value);*/
//获取选中行
var selArr=datagrid.getSelectionModel().getSelection();
if (selArr && selArr.length>0) {
for ( var int = 0; int < selArr.length; int++) {
alert(selArr[int].get("id")+"--"+selArr[int].get("name"));
}
}
//获取所有行
/*var selAll=datagrid.data.items;
for ( var int = 0; int < selAll.length; int++) {
alert(selAll[int].get("id")+"--"+selAll[int].get("name"));
}*/
}
}
},
/* bbar:[{ type: 'button', text: 'Button 1' }],*/
fbar: [
{ type: 'button', text: 'Button 1' }
]
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing',{
clicksToMoveEditor:2,
autoCancel:false,
listeners:{
beforeedit:function(){
//添加编辑前响应的事件
var rows = datagrid.getSelectionModel().getSelection();
//在编辑前获取选中的行
setTimeout(function(){
datagrid.getselectionModel().select(rows)
},0);
//延迟执行代码重新勾选编辑前选中的行
}
}
});
var tabpal=Ext.create('Ext.tab.Panel', {
width: 600,
height: 180,
renderTo: document.body,
style:{
marginTop:"80px"
},
items: [{
title: '内容',
items: [datagrid]
}, {
title: '备注',
}]
} );
Ext.onReady(function(){
Ext.create('Ext.window.Window', {
title: '调拨单',
maximizable:true,
minimizable:true,
height: 400,
width: 600,
layout: 'absolute',//布局样式--fit,table,
items:[{
xtype: 'textfield',
name: 'name12',
fieldLabel: '调出仓库',
allowBlank: false, // 是否不必输入值
blankText:"请输入",//提示信息
inputId:"text1",//文本框id
inputType:"Text",//input的类型
labelWidth :70,//lable宽度
inputWidth:200,//input宽度
style: {
marginLeft:'10px',
marginTop: '10px'
}
},{
xtype: 'datefield',
name: 'datatime',
fieldLabel: '单据日期',
allowBlank: false, // 是否不必输入值
blankText:"请输入",//提示信息
labelWidth :70,//lable宽度
inputId:"text2",//文本框id
inputWidth:200,//input宽度
format: 'Y-m-d',
style: {
marginLeft:'300px',
marginTop: '10px'
}
},{
xtype: 'textfield',
name: 'name13',
fieldLabel: '调入仓库',
allowBlank: false, // 是否不必输入值
blankText:"请输入",//提示信息
inputId:"text3",//文本框id
inputType:"Text",//input的类型
labelWidth :70,//lable宽度
inputWidth:200,//input宽度
style: {
marginLeft:'10px',
marginTop: '40px'
}
},{
xtype: 'textfield',
name: 'name124',
fieldLabel: '单据号码',
allowBlank: false, // 是否不必输入值
inputId:"text4",//文本框id
inputType:"Text",//input的类型
labelWidth :70,//lable宽度
inputWidth:200,//input宽度
style: {
marginLeft:'300px',
marginTop: '40px'
}
},tabpal]
}).show();
});
用CellEditing插件,具体可以看下载的ext压缩包里面的examples\grid\cell-editing.html这个示例