PDA

View Full Version : [4.0.2a] Grid RowEditor close when entering new record with default value



cubernatic
23 Jul 2011, 3:45 AM
Hello
I'm writing an MVC application with Grid component and RowEditor as plugin using ExtJS 4.0.2a.

REQUIRED INFORMATION
Ext version tested:

Ext 4.0.2a


Browser versions tested against:

FF5
Chrome 12
Opera 11
Safari 5
IE9


Description:
When creating a new record in connected datastore to a grid, I activate the RowEditor for the new created record. This work well, when the new record has no default values defines in data model and no values was assign on creating the record.
When values was predefined as default values or values was assigned through creating the record the RowEditor will be entered for a second and then closed.

Steps to reproduce the problem:

Attaching my source code so you can replicate the issue.


The result that was expected:

Grid RowEditor gets displayed correctly


Test Case:

Please see attached source.


HELPFUL INFORMATION
Screenshot or Video:
Bug HD (http://www.youtube.com/watch?v=BqbDoocma0I)
Bug lowres (http://www.youtube.com/watch?v=GejVc-w6rkc)

Additional CSS used:

only default ext-all.css


Operating System:

Mac OSX 10.6.8
Ubuntu 10.04


Source
Controller:

Ext.define('XTM.controller.Tax', {
extend: 'Ext.app.Controller',

views: [
'tax.class.Grid',
'tax.rates.Grid'
],

stores: [
'Taxclass',
'Taxrates',
'Systemstatus'
],

models: [
'Taxclass',
'Taxrates',
'Systemstatus'
],

refs: [{
ref: 'classlist',
selector: 'taxclassgrid'
},{
ref: 'rateslist',
selector: 'taxratesgrid'
}],

init: function() {
var me = this;

this.control({
'taxclassgrid': {
selectionchange: me.enableTaxclassDelete
},
'taxclassgrid button[action=add]': {
click: me.createTaxclass
},
'taxclassgrid button[action=delete]': {
click: me.deleteTaxclass
},
'taxratesgrid': {
selectionchange: me.enableTaxratesDelete
},
'taxratesgrid button[action=add]': {
click: me.createTaxrates
},
'taxratesgrid button[action=delete]': {
click: me.deleteTaxrates
}
});
},

onLaunch: function(app) {
this.getSystemstatusStore().load();
},

enableTaxclassDelete: function(view, selection, options) {
this.getClasslist().down('button[action=delete]').setDisabled(selection.length === 0);

if (selection.length > 0) {
this.getTaxratesStore().load({
params: {
tax_class_id: selection[0].getId()
}
});
} else {
this.getTaxratesStore().removeAll();
}
},



createTaxclass: function(button) {
var record = this.getTaxclassModel();

this.getClasslist().editing.cancelEdit();
this.getTaxclassStore().insert(0,new record());
this.getClasslist().editing.startEdit(0, 0);
},

deleteTaxclass: function(button) {
var sm = this.getClasslist().getSelectionModel();
this.getClasslist().editing.cancelEdit();
this.getTaxclassStore().remove(sm.getSelection());
},

enableTaxratesDelete: function(view, selections, options) {
this.getRateslist().down('button[action=delete]').setDisabled(selections.length === 0);
},

createTaxrates: function(button) {
var recordModel = this.getTaxratesModel(),
classSM = this.getClasslist().getSelectionModel().getSelection()[0],
record = new recordModel({tax_class_id: classSM.get('tax_class_id'),
tax_rate: 0,
tax_zone_id: 6});

this.getRateslist().editing.cancelEdit();
this.getTaxratesStore().insert(0, record);
this.getRateslist().editing.startEdit(0, 1);
},

deleteTaxrates: function(button) {
var sm = this.getRateslist().getSelectionModel();
this.getRateslist().editing.cancelEdit();
this.getTaxratesStore().remove(sm.getSelection());
}
});

Model:

Ext.define('XTM.model.Taxclass', {
extend: 'Ext.data.Model',

fields: [{
name: 'tax_class_id',
type: 'int'
},{
name: 'tax_class_title',
type: 'string',
defaultValue: 'this is a new tax class'
},{
name: 'last_modified',
type: 'date'
},{
name: 'date_added',
type: 'date'
}],

idProperty: 'tax_class_id',

validations: [{
type: 'length',
field: 'tax_class_title',
min: 1
}],

hasMany: {model: 'XTM.model.Taxrates', name: 'taxrates'}
});

Grid:

Ext.define('XTM.view.tax.class.Grid' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.taxclassgrid',

store : 'Taxclass',
border: false,

columns: [{
header: 'Steuerklasse',
dataIndex: 'tax_class_title',
flex: 1,
sortable: true,
hidden: false,
field: {
type: 'textfield'
}
}],

dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Add',
iconCls: 'icon-add',
disabled: false,
action: 'add'
}, {
text: 'Delete',
iconCls: 'icon-delete',
disabled: true,
itemId: 'delete',
action: 'delete'
}]
}],

initComponent: function() {
this.editing = Ext.create('Ext.grid.plugin.RowEditing');

Ext.apply(this, {
plugins: [this.editing]

});


this.callParent(arguments);
}

});