PDA

View Full Version : Editor Grid with Combo Box not working HELP please



apsencha
17 Mar 2011, 6:20 AM
Hi everyone,

sorry to bother but i need some help since i am stuck with this part and i haven't been able to find any useful information.
Currently i have a grid that is been displayed without a problem in one of the project i am working on. Now i am trying to change that grid into and editing grid. In the process of doing so i have been unable to populate the combo box with values retrieved from a db.

So what i am trying to achieve is the following:

have a grid that displays data, in some fields such as HW status i would like to display an icon that would represent the status. this element should be editable by selecting an option from a drop down combo box. The fields used in the combo box should be displayed as text and not as an image and also should be retrieved from the DB by the controller.

What am i seeing:

the grid display the data correctly and replaces the HW status with the image correctly . When i double click a cell to edit the image changes to Available and it display a quick loading sign. the combo box never gets populated but i can see that the store that i created for it, is retrieving the values from the DB correctly using a proxy.

can someone help me fix this ?

25211


Controller:

[ActionName("getHWStatus")]
public JsonResult getHWStatus()
{
//var listOfHWStatus = bbseDB.StatusHardwares.Distinct();

var test = from hw in bbseDB.StatusHardwares orderby hw.StatusHardware1 select new { hw.StatusHardwareID, hw.StatusHardware1 };

return Json(new { data = test }, JsonRequestBehavior.AllowGet);
}
Data returned from Action

{"data":[{"StatusTAID":2,"StatusTA1":"Accepted"},{"StatusTAID":3,"StatusTA1":"Conditional"},{"StatusTAID":1,"StatusTA1":"Pending"},{"StatusTAID":4,"StatusTA1":"Rejected"}]}

JS script

var HWstatusRederer = function (status) {
if (status == "Available") {
return "<img src=\"../../Content/resources/images/default/dd/drop-yes.gif\">";
}
else if (status == "Not Shipped") {

return "<img src=\"../../Content/Icons/error.gif\">";
}
else if (status == "In Transit") {
return "<img src=\"../../Content/Icons/intransit.gif\">";
}
else if (status == "Delayed / Issues") {
return "<img src=\"../../Content/Icons/warning.gif\">";
}
}
var HWStore = new Ext.data.ArrayStore({
proxy: new Ext.data.HttpProxy({
url: '/Editor/getHWStatus',
dataType: 'json',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'data'

},
Ext.data.Record.create([
{ name: 'StatusHardwareID', mapping: 'StatusHardwareID' },
{ name: 'StatusHardware1', mapping: 'StatusHardware1' }
])),
autoLoad: true,
listeners: {
load: function () {
console.log(arguments);
}
}

});

var columns = new Ext.grid.ColumnModel({
defaults: { sortable: true },

columns: [
{
dataIndex: 'taStatus',
header: 'TA Status',
width: 70,
editor: TAStatusComboBox
},
{
dataIndex: 'hardwareStatus',
header: 'HW',
width: 30,
renderer: HWstatusRederer,
editor: HWStatusComboBox
}
]
});

var mygrid = new Ext.grid.EditorGridPanel({
id: 'mygrid',
store: store,
colModel: columns,
layout: 'fit',
columnLines: true,
stripeRows: true,
viewConfig: {},
clicksToEdit: 2,

renderTo: 'displayTATableResults',

listeners: {
afterrender: function () {
Ext.getCmp("mygrid").setHeight(200),
Ext.getCmp("mygrid").setWidth(890)

}
}
})

mygrid.render()

hpet
17 Mar 2011, 6:43 AM
What is your HWStatusComboBox configuration?

apsencha
17 Mar 2011, 6:46 AM
var HWStatusComboBox = new Ext.form.ComboBox({
allowBlank: false,
store: HWStore,
typeAhead: true,
lazyRenderer: true
});




var HWStore = new Ext.data.ArrayStore({
proxy: new Ext.data.HttpProxy({
url: '/Editor/getHWStatus',
dataType: 'json',
method: 'POST'
}),
reader: new Ext.data.JsonReader({
root: 'data'

},
Ext.data.Record.create([
{ name: 'StatusHardwareID', mapping: 'StatusHardwareID' },
{ name: 'StatusHardware1', mapping: 'StatusHardware1' }
])),
autoLoad: true,
listeners: {
load: function () {
console.log(arguments);
}
}

});

amitchorge
21 Jul 2011, 3:35 AM
I am using ExtJs 3.X and currently using a editor (combo) in side a grid

ExtJs automatically creates a div tag with following style properties -
[position: absolute; z-index: 12005; visibility: visible; left: 171px; top: 507px; width: 346px; height: 295px; font-size: 11px; ]
When user finishes with selecting a required value from dropdown the style properties changes automatically to
[position: absolute; z-index: 12005; visibility: hidden; left: -10000px; top: -10000px; width: 346px; height: 295px; font-size: 11px; ]
But again if i go to the same page even if the store brings the data for the combo... the combo is not visible

The cause for this is the style in this case remains
[ position: absolute; z-index: 12005; visibility: hidden; left: -10000px; top: -10000px; width: 346px; height: 295px; font-size: 11px; ]