Extjs grid双击一行时将第2列变为可编辑的文本框

Question

才学的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();

});

Answer 1

用CellEditing插件，具体可以看下载的ext压缩包里面的examples\grid\cell-editing.html这个示例