PDA

View Full Version : extjs 3.4 problem with extending editorgrid



Mr.Solomon
12 Nov 2013, 12:25 AM
Hi,buddies
I met strange problem when I extend an editorgrid , and I registered it for a xtype , but when I use this xtype somewhere,everything works well but a little bit problem ,which is if I click the add button ,the grid will add a new line ,but the first cell lost the mouse focus , in normal status ,the cell would be focused like the sencha example,I was also checked out the source code , I found the editorgrid can not get the editor(I am sure that I have defined the editor config ) ,it is very strange ,who can help me ,thanks in advance,and the code listed below ;


Ext.ns("Kingnet", "Kingnet.Yunwei");
/**
*
*/
Kingnet.Yunwei.itCommodGrid = Ext.extend(Ext.grid.EditorGridPanel,{
viewConfig : { forceFit : true },
url : '/assetmgent/index.php?mod=itcomponent&action=indexmod',
clicksToEdit: 2,
frame:true,
initComponent:function(){
this.store=this.buildStore();
this.colModel = this.buildColumns();
this.tbar = this.buildTbars();
this.bbar = this.buildPagingbar();
Kingnet.Yunwei.itCommodGrid.superclass.initComponent.call(this);
this.on('beforerender',function(){
this.getBottomToolbar().bindStore(this.store);
},this);
this.store.load();
},


buildStore:function(){
var proxy = new Ext.data.HttpProxy({
url : this.url,
});
var recordType = new Ext.data.Record.create([
{
name : "f_id",
mapping : "f_id",
type : "int"
}, {
name : "f_tk",
mapping : "f_tk",
type : "string"
}, {
name : "f_desc",
mapping : "f_desc",
type : "string"
}, {
name : "f_compentDESC",
mapping : "f_compentDESC",
type : "string"
}]);

var reader = new Ext.data.JsonReader({
totalProperty : "result",
root : "rows", //
id : "id"
},recordType);


return {
xtype : 'store',
autoLoad : false,
proxy : proxy,
reader : reader,

};
},


buildColumns:function(){
var colModel = new Ext.grid.ColumnModel({
columns:[{
id:'id',
header:'??ID',
dataIndex: 'f_id',
width:80,
hidden:true
},{
header:'??',
dataIndex: 'f_tk',
width:100,
sortable: true,
editor:new Ext.form.TextField({
allowBlank: false,
})
},{
header:'????',
dataIndex: 'f_desc',
width:100,
sortable: true,
editor:new Ext.form.TextArea({
allowBlank: false,
grow:true,
}),
renderer:function(val){
var str="";
var ips = val.split(",");
for(var i=0;i<ips.length;i++){
var str = str+ "<span style='color:orange'>"+ips[i]+"</span></br>";
}
return str;
}
},{
header:'????',
dataIndex: 'f_compentDESC',
width:100,
sortable:true,
editor:{
xtype:'compcombo',
allowBlank: false,
displayField: 'f_compentDESC',
valueField: 'f_compentId',
}
},{
xtype:'actioncolumn',
width:'50',
header:'??',
items:[
{
icon:'../images/edit.gif',
tooltip:'??',
scope:this,
handler: function(grid, rowIndex, colIndex) {
var selected = this.store.getAt(rowIndex);
}
},
'-',
{
icon:'../images/delete.png',
tooltip:'??',
scope:this,
handler: function(grid, rowIndex, colIndex) {
var rec = this.store.getAt(rowIndex);
Ext.MessageBox.show({
title:'??',
msg:String.format('?????<b style="color:red">'+rec.get('f_tk')+'</b>??????'),
buttons: Ext.MessageBox.YESNO,
icon : Ext.MessageBox.WARNING,
scope:this,
fn:function(btn){
if(btn == 'yes'){
console.log('sasdada');
}
}
})
}
}]
}],
isCellEditable:function(col,row){
/*var record = this.store.getAt(row);
if (record.get('readonly')) { // replace with your condition
return false;
}
return Ext.grid.ColumnModel.prototype.isCellEditable.call(this, col, row);*/
return true;
}
});
return colModel;
},


buildTbars:function(){
return [
{
text : 'add',
iconCls : 'icon-disk',
scope : this,
handler : this.onAddMod
},
'-',
{
text : 'del',
iconCls : 'icon-arrow_undo', //
scope : this,
handler : this.onDeleMod
},


];
},


buildPagingbar:function(){
return {
xtype:'paging',
pageSize:24,
displayInfo: true,
displayMsg: '??? {0} ?? {1} ?????? {2} ?',
emptyMsg: "????",
plugins : new Ext.ux.plugin.PagingToolbarResizer({
options : [ 5, 10, 20, 50, 100, 500],
prependCombo: true
})
}
},


onAddMod:function(){
var Obj = this.store.recordType;
var p = new Obj({
f_desc: '',
f_tk: '',
f_compentDESC: '',
//f_id:'',
});
//console.log(this.colModel.getCellEditor(0,0))
this.stopEditing();
this.store.insert(0, p);
this.startEditing(0, 0);
},




onDeleMod:function(){
var selectRec = this.getSelected();
var Ids = this.IdsFromRecords(selectRec);
if(Ids.length > 0){
Ext.Msg.confirm("????",String.format('??????<b style="color:red">{0}</b>?????',Ids.length),function(btn){
if(btn == "yes"){
this.doDeleteReq(Ids);
}
},this)
}else{
Ext.MessageBox.show({
title:'??',
msg:'???????????????',
icon:Ext.MessageBox.INFO
});
}


},


getSelected : function() {
return this.selModel.getSelections();
},


IdsFromRecords : function(records) {
var Ids = [];
Ext.each(records, function(record) {
if(record.get('f_id') == undefined){
this.store.remove(record);// ????grid???????????????????????
}else{
Ids.push(record.get('f_id'));
}
},this);


return Ids;
},


doDeleteReq:function(ids){
Ext.getBody().mask('????...', 'x-mask-loading');
Ext.Ajax.request({
url: '/assetmgent/index.php?mod=itcomponent&action=deletmod',
scope : this,
record: this.getSelected()[0],
callback : this.deleModCallBack,
params:{
id : Ext.encode(ids)
}
});
},


deleModCallBack:function(opt,success,resp){
if(success){
var o = Ext.decode(resp.responseText);
if(o.success){
Ext.MessageBox.show({
title:'??',
msg:'????',
icon:Ext.MessageBox.INFO
});
this.store.remove(opt.record);
//opt.record.commit()
}
else{
Ext.MessageBox.show({
title:'??',
msg:o.data.info,
icon:Ext.MessageBox.ERROR
});


}
}
else{
Ext.MessageBox.show({
title:'??',
msg:'????',
icon:Ext.MessageBox.ERROR
});
}
Ext.getBody().unmask();


},



});
Ext.reg('compmodgrid', Kingnet.Yunwei.itCommodGrid);

4680046801

slemmon
20 Nov 2013, 10:42 AM
I'm having a little trouble creating a testcase using the Kingnet.Yunwei.itCommodGrid class. Can you post a test case using that class to show the issue you're seeing?

You can create and share the test case at https://fiddle.sencha.com if that helps.