PDA

View Full Version : [FIXED] [4.2.0 Beta] Ext.grid.Panel.reconfigure() problems



dwsnyder
12 Dec 2012, 2:06 PM
REQUIRED INFORMATION


Ext version tested:

Ext 4.2.0.179


Browser versions tested against:


IE7
FF3.6 (firebug 1.7.3 installed)


DOCTYPE tested against:

html


Description:

Using Ext.grid.Panel.reconfigure(store), event handlers appear to no longer be attached to the grid rows. Subsequent calls to Ext.grid.Panel.reconfigure(store) do no refresh the grid view.


Steps to reproduce the problem:

using the sample code below, notice that after the page initially loads, cell editing works, as do the Indoor checkbox and the delete icon in the actioncolumn.
Now click the "Store2" button. The data from store 2 appears in the grid, but cell editing no longer works, nor does the delete icon in the actioncolumn, clicking the checkbox now throws an exception.
Now click the "Store1" button, and notice that grid still displays Store 2 data.




Test Case:

use this code in place of cell-editing.js in examples/grid/



Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');

Ext.require([
'Ext.selection.CellModel',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn'
]);

if (window.location.search.indexOf('scopecss') !== -1) {
// We are using ext-all-scoped.css, so all rendered ExtJS Components must have a
// reset wrapper round them to provide localized CSS resetting.
Ext.scopeResetCSS = true;
}

Ext.onReady(function(){
Ext.QuickTips.init();

function formatDate(value){
return value ? Ext.Date.dateFormat(value, 'M d, Y') : '';
}

Ext.define('Plant', {
extend: 'Ext.data.Model',
fields: [
// the 'name' below matches the tag name to read, except 'availDate'
// which is mapped to the tag 'availability'
{name: 'common', type: 'string'},
{name: 'botanical', type: 'string'},
{name: 'light'},
{name: 'price', type: 'float'},
// dates can be automatically converted by specifying dateFormat
{name: 'availDate', mapping: 'availability', type: 'date', dateFormat: 'm/d/Y'},
{name: 'indoor', type: 'bool'}
]
});


// create the Data Stores
var store1 = Ext.create('Ext.data.Store', {
autoDestroy: false,
model: 'Plant',
data: [
{common: 'Test1'},
{common: 'Test2' }

],
sorters: [{
property: 'common',
direction:'ASC'
}]
});

var store2 = Ext.create('Ext.data.Store', {
autoDestroy: false,
model: 'Plant',
data: [
{common: 'Test3'},
{common: 'Test4' }

],
sorters: [{
property: 'common',
direction:'ASC'
}]
});


var cellEditing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
});

// create the grid and specify what field you want
// to use for the editor at each header.
var grid = Ext.create('Ext.grid.Panel', {
store: store1,
columns: [{
id: 'common',
header: 'Common Name',
dataIndex: 'common',
flex: 1,
editor: {
allowBlank: false
}
}, {
header: 'Light',
dataIndex: 'light',
width: 130,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['Shade','Shade'],
['Mostly Shady','Mostly Shady'],
['Sun or Shade','Sun or Shade'],
['Mostly Sunny','Mostly Sunny'],
['Sunny','Sunny']
],
lazyRender: true,
listClass: 'x-combo-list-small'
})
}, {
header: 'Price',
dataIndex: 'price',
width: 70,
align: 'right',
renderer: 'usMoney',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 0,
maxValue: 100000
}
}, {
header: 'Available',
dataIndex: 'availDate',
width: 95,
renderer: formatDate,
editor: {
xtype: 'datefield',
format: 'm/d/y',
minValue: '01/01/06',
disabledDays: [0, 6],
disabledDaysText: 'Plants are not available on the weekends'
}
}, {
xtype: 'checkcolumn',
header: 'Indoor?',
dataIndex: 'indoor',
width: 55,
stopSelection: false
}, {
xtype: 'actioncolumn',
width:30,
sortable: false,
items: [{
icon: '../shared/icons/fam/delete.gif',
tooltip: 'Delete Plant',
handler: function(grid, rowIndex, colIndex) {
grid.getStore().removeAt(rowIndex);
}
}]
}],
selModel: {
selType: 'cellmodel'
},
renderTo: 'editor-grid',
width: 600,
height: 300,
title: 'Edit Plants?',
frame: true,
tbar: [{
text: 'Add Plant',
handler : function(){
// Create a model instance
var r = Ext.create('Plant', {
common: 'New Plant 1',
light: 'Mostly Shady',
price: 0,
availDate: Ext.Date.clearTime(new Date()),
indoor: false
});
grid.getStore().insert(0, r);
cellEditing.startEditByPosition({row: 0, column: 0});
}
},
{
text: 'Store1',
handler : function(){
if (cellEditing.editing) {
cellEditing.completeEdit();
}

grid.reconfigure(store1);
}
},
{
text: 'Store2',
handler : function(){
if (cellEditing.editing) {
cellEditing.completeEdit();
}
grid.reconfigure(store2);
}
}
],
plugins: [cellEditing]
});


});






Debugging already done:

none


Possible fix:

not provided


Additional CSS used:

see cell-editing.html example


Operating System:

WinXP Pro

mitchellsimoens
12 Dec 2012, 2:41 PM
Thanks for the report.

manishnp
2 Jun 2013, 11:11 PM
I am still facing the issue i am using Ext Js 4.2.1.


Thank You
Manish Pandit