PDA

View Full Version : combobox as editor in grid not loading for 2nd time



sukant.sahoo
3 Oct 2012, 3:12 AM
Hi

I have grid having combobox as editor in one column.
To update a record in grid , I want to select data from combobox editor.
First time the data in combo box loading.
It means
After data loaded in the grid after page loaded(grid object newly created ) then if I click on the combo box editor it is loading data proper.
If I reload the grid after selecting value for combobox editor then I click the combobox editor , it is not loading the data.

To reload the grid I used reconfigure API.

I have attached screen shot for reference. Please help ASAP.

scottmartin
3 Oct 2012, 7:51 PM
Please check the following. I was not able to duplicate what you described.



Ext.onReady(function(){
// sample static data for the store
var myData = [
['3m Co', 71.72, 0.02, 0.03, '9/1 12:00am'],
['Alcoa Inc', 29.01, 0.42, 1.47, '9/1 12:00am'],
['Altria Group Inc', 83.81, 0.28, 0.34, '9/1 12:00am'],
['American Express Company', 52.55, 0.01, 0.02, '9/1 12:00am'],
['American International Group, Inc.', 64.13, 0.31, 0.49, '9/1 12:00am'],
['Verizon Communications', 35.57, 0.39, 1.11, '9/1 12:00am'],
['Wal-Mart Stores, Inc.', 45.45, 0.73, 1.63, '9/1 12:00am']
];

// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});

// manually load local data
store.loadData(myData);

var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'displayText'
],
data: [['Company One'], ['Company Two']]
}),
valueField: 'displayText',
displayField: 'displayText'
});

// create the Grid
var grid = new Ext.grid.EditorGridPanel({
store: store,
columns: [
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: combo
},
{
header : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'Change',
width : 75,
sortable : true,
dataIndex: 'change',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
],

tbar: [{
text: 'Reload Store',
handler: function(){
store.load();
}
}],

stripeRows: true,
autoExpandColumn: 'company',
height: 350,
width: 600,
title: 'Array Grid',
renderTo: Ext.getBody()
});

});


Scott

sukant.sahoo
3 Oct 2012, 8:42 PM
hi Scott,

Thanks for ur quick reply.
I am not seeing the code to refresh the gird data.
Could please provide the refresh the grid data?
After first time loading of grid, click on combobox editor then refresh the grid data then click on combobox editor again.

sukant.sahoo
3 Oct 2012, 9:01 PM
This code will refresh the grid u load the js file in browser.
And every time it will create new object of grid. then this problem will not occur.
Instead of creating new grid object every time use reconfigure api of ext-js to reload the grid second time.
Please let me know if u r not getting me.

scottmartin
4 Oct 2012, 6:24 AM
To make sure I understand .. I load the store and combo. I then click on the button in the toolbar and it loads the grid data again. At this time when I edit the grid, the combo still has it's data.

Is this correct?

Scott.

sukant.sahoo
4 Oct 2012, 6:39 AM
before loading(refresh) the second time edit it. and then click on combobox editor.<br>If possible while loading grid second time reconfigure the column model because in my code I am reconfigure column model.<br>I am suspecting because of reconfigure it is not working.<br>

sukant.sahoo
5 Oct 2012, 3:46 AM
Hi Scott,

Use the following code to reconfigure the grid.
var refGrid = Ext.getCmp('refKeyGrid');
refGrid.reconfigure(refGrid.getStore(), new Ext.grid.ColumnModel(myCM));

In my scenario, runtime I am updating column heading. So instead creating grid again I am reconfiguring the grid with update column model. I am using the above code to reconfiguring grid.

Please try my scenario and it is reproducible. If there is other way to update column heading at run time please let me know.

Thanks
Sukant

sukant.sahoo
5 Oct 2012, 7:00 PM
combo box editor firing ajax request and in store data is available but not showing in the dropdown.
please help me

scottmartin
5 Oct 2012, 7:57 PM
Do you think you have a timing issue? Since you making an ajax call? I am left guessing as I am not sure what you are doing. Can you modify the example? You can use a static JSON file to simulate the return data.

Scott.

sukant.sahoo
6 Oct 2012, 2:15 AM
Hi Scott,

There is no timing issue. I tried with static data and 'mode:local' in combo box editor.Still it is same issue.
When page load freshly at that time the combo box editor is working fine. After reconfigure grid it is not working. I think there is no issue in reconfiguring grid. Because I tried the same approach in different screen it is working. Only difference is, here I am forming column model in java(dynamically).
Is there any difference in 'xtype:combo' and 'new Ext.form.ComboBox'
I am attaching two screen shot. 2nd screen shot is after reconfiguring grid.
If you need particular code please let me know.

sukant

sukant.sahoo
7 Oct 2012, 11:19 PM
Hi Scott,

In ur example use xtype:combo instead of new Ext.form.ComboBox'.
and do reconfigure grid with modified column model(just change the header name). In reload button add code for reconfigure and load the data again.
After modifying ur code follow the given below steps to reproduce
1. After page load freshly click on reload button. so that it reconfigure the grid with updated header name.
2. click on combox editor. It will show data in drop down
3. click on reload button again and then click on combo box editor.

This is happening because of xype:combo.
Please help me how to solve this issue.

sukant.sahoo
8 Oct 2012, 1:00 AM
the following code is for reconfigure grid

updatecm = new Ext.grid.ColumnModel({
columns:[
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: {
xtype:'combo',
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'displayText'
],
data: [['Company One'], ['Company Two']]
}),
valueField: 'displayText',
displayField: 'displayText',
id:'mycombo'
}
},
{
header : 'MyPrice',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'MyChange',
width : 75,
sortable : true,
dataIndex: 'change',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
]
});
var refGrid = Ext.getCmp('refKeyGrid');
refGrid.reconfigure(refGrid.getStore(), updatecm);

please follow the steps which is given in previous post.

sukant.sahoo
8 Oct 2012, 10:41 PM
Hi Scott,

I resolved the issue in the following way
1. created a combo box
2. while reconfiguring grid assigning that combo in the editor.
3. to get the combo component I used Ext.getCmp('mycombo').

Please let me know whether my approach is correct or not.
Is there any other way can be fixed this issue?
var combo = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
lazyRender:true,
mode: 'local',
store: new Ext.data.ArrayStore({
id: 0,
fields: [
'displayText'
],
data: [['Company One'], ['Company Two']]
}),
valueField: 'displayText',
displayField: 'displayText',
id:'mycombo'
});


updatecm = new Ext.grid.ColumnModel({
columns:[
{
id :'company',
header : 'Company',
width : 160,
sortable : true,
dataIndex: 'company',
editor: Ext.getCmp('mycombo')
},
{
header : 'MyPrice',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : 'MyChange',
width : 75,
sortable : true,
dataIndex: 'change',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header : '% Change',
width : 75,
sortable : true,
dataIndex: 'pctChange'
},
{
header : 'Last Updated',
width : 85,
sortable : true,
renderer : Ext.util.Format.dateRenderer('m/d/Y'),
dataIndex: 'lastChange'
}
]
});
var refGrid = Ext.getCmp('refKeyGrid');
refGrid.reconfigure(refGrid.getStore(), updatecm);

Sukant