PDA

View Full Version : Gridpanel : Strange behavior in IE vs good behavior with Firefox



Jayeff_land
25 Sep 2009, 10:54 AM
I am having a strange problem with a Gridpanel in Internet Explorer (IE). I do not know where my problem is exactly but I have some doubts about the way that the variables reacted with different browsers. Here is what it is all about: A user preselected list of element (Gridpanel) is built with user specific selections. When a selection is made, the user can click on a save button, at this moment the old list get destroyed and a new list (Gridpanel) appears with a list of results associated with the previous selection.

All the GridPanels are using a datastore in combinaison with an ashx page. The functions in the ashx file make a link to an application layer which save, delete or insert in a SQL database or return information to the ext client side. Everything is working in the ashx…I can track the value.

The Gridpanel does not get filled inside of IE6 to IE8, but it does in Firefox! When I am testing it in Visual Studio with IE6 to IE8 with localserver, it is working…Anybody have an idea.
Here is the code:


gridList = new Ext.grid.GridPanel({
id:'button-grid',
store: metric,
plugins: [editor],
cm: new Ext.grid.ColumnModel([
{id:'appointments',header: "Appointments", hidden: true, sortable: true, dataIndex: 'appointments'},
{header: "dispatch", hidden: true, dataIndex: 'dispatch'},
{header: "handoffs", hidden: true, dataIndex: 'handoffs'},
{header: "measures", hidden: true, sdataIndex: 'measures'},
{header: "states", hidden: true, dataIndex: 'states'},
{header: "metrics", hidden: true, dataIndex: 'metrics'},
{header: "brands", hidden: true, dataIndex: 'brands'},
{header: "metric", width :200, sortable: true, dataIndex: 'metric_description'},
{header: "brand", width :150, dataIndex: 'brand_description'},
{header: "appointment", width :200, sortable: true, dataIndex: 'appointment_description'},
{header: "dispatch type", width :200, sortable: true, dataIndex: 'dispatch_type_description'},
{header: "handoff", width :200, sortable: true, dataIndex: 'handoff_description'},
{header: "measure", width :200, sortable: true, dataIndex: 'measure_description'},
{header: "state", width :200, sortable: true, dataIndex: 'state_description'}
]),
autoHeight: true,
fitContainer : true,
viewConfig: {
forceFit:true
},
columnLines: true,

// inline buttons
buttons: [{text:'Save',
id: 'btnSave',
handler :
function(b, pressed)
{
Ext.Msg.prompt('Name', 'Please enter your new tab name:', function(btn, text){
if (btn == 'ok')
{
var apply = Ext.Ajax.request
({
url: '../AjaxRequest/FiltersHandler.ashx?op=6',
params: {
Template:text
},
waitMsg:'Saving...',
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
gridMetric.destroy();
gridList.destroy();
formPanel.destroy();
displayPanel.destroy();
CreateMetricList(metric);
tab1.setTitle(text);
ShowTemplateResult(tab1.id, renderTag, cboYear, cboPeriod, obj);
}
})
}
});
}
},
{text:'Cancel'}],
// inline toolbars
tbar:[{
text:'Remove',
tooltip:'Remove the selected item',
iconCls:'remove-icon',
handler: function()
{
editor.stopEditing();
var s = gridList.getSelectionModel().getSelections();
for(var i = 0, r; r = s[i]; i++)
{
metric.remove(r);
}
},

// Place a reference in the GridPanel
ref: '../removeButton',
disabled: false
}],

width:1270,
frame:true,
title:'List of metrics selected',
iconCls:'icon-grid',
renderTo: frameDiv
});

function CreateMetricList(metric)
{
jsonData = "[";
for(i=0;i<metric.getCount();i++)
{
record = metric.getAt(i);
jsonData += Ext.util.JSON.encode(record.data) + ",";
}
jsonData = jsonData.substring(0,jsonData.length-1) + "]";
var apply = Ext.Ajax.request
({
method: 'POST',
url: '../AjaxRequest/FiltersHandler.ashx?op=5',
params:{data:jsonData},
waitMsg:'Saving...',
failure:function(form, action)
{
Ext.MessageBox.alert('ODIN', 'Error, Filters not applied! Please try again.');
},
success:function(form, action)
{
Ext.MessageBox.alert('ODIN', 'Your information has been saved successfully.');

}
})
};


function ShowTemplateResult(tabTemplate, renderTag, cboYear, cboPeriod, idTemplate)
{
var ID_metric_select;
var ID_brand_select;
var name_metric;
var ID_region_select;
var ID_category_select = 1;
var tab = Ext.getCmp(tabTemplate);

Ext.DomHelper.append(tab.body,{tag: 'div', id:renderTag});

//Create record structure to pass to the store.
var myRecord = Ext.data.Record.create
([
{name: 'acr', mapping: 'id_metric'},
{name: 'Metrics list', mapping: 'name_english'}
]);

//Create store from Ashx to fill the grid.
var GroupStore = new Ext.data.GroupingStore({
proxy: new Ext.data.HttpProxy({ url: "Handler.ashx?op=6&year=" + cboYear.getValue(0) + "&period=" + cboPeriod.getValue(0) + "&ID_Template=" + idTemplate, method: 'GET' }),
sortInfo:{field: 'description_english', direction: "ASC"},
groupField:'name_english',
remoteGroup : true,
reader: new Ext.data.JsonReader({ root: 'rows' },myRecord)
});
GroupStore.load();

var gridTemplate = new Ext.ux.AutoGridPanel
({
id: tabTemplate,
store: GroupStore,
loadMask: {msg: 'Loading data, please wait...'} ,
columns: [
{header: 'id_metric'},
{header: 'Metrics list'}
],
viewConfig: {
forceFit: true
},
title: 'Metrics to select and insert into the shopping cart',
height: 500,
width:8000,
// layout:'fit',
loadMask: true,
autoScroll : true,
// stripeRows : false,
// collapsible:false,
// titleCollapse:true,
margins:'0 1 0 15',
// frame: true,
sm: new Ext.grid.RowSelectionModel
({
singleSelect: true,
listeners: {
rowselect: function(sm, row, rec) {
ID_metric_select = rec.data.ID_metric;
ID_brand_select = rec.data.ID_Brand;
name_metric = rec.data.name_english;
ID_region_select = rec.data.ID_Region;
ID_category_select = rec.data.ID_Category;
}
}
}),
view: new Ext.grid.GroupingView({
//forceFit:true,
startCollapsed:true,
showGroupName:false,
groupTextTpl: '{group}'
}),
tbar: [
new Ext.Action({
text: 'View graphics',
handler: function(){
if(gridTemplate.getSelectionModel().getCount() > 0)
{
var ID_state = gridTemplate.store.getAt(0).data.ID_State;
var ID_measure = gridTemplate.store.getAt(0).data.ID_Measure;
var ID_dispatch_type = gridTemplate.store.getAt(0).data.ID_Dispatch_Type;
var ID_appointment = gridTemplate.store.getAt(0).data.ID_Appointment;
var ID_handoff = gridTemplate.store.getAt(0).data.ID_Handoff;
var ID_brand = gridTemplate.store.getAt(0).data.ID_Brand;
CreateGraph(name, name_metric, "window_" + gridTemplate.id /*+ "_" + ID_metric_select*/,ID_metric_select, ID_brand,1,cboYear.getValue(),cboPeriod.getValue(),ID_state,ID_measure,ID_dispatch_type,ID_appointment,ID_handoff);
//Ext.ODIN.msg('Grid Click', 'You clicked the Metric #{0} of {1}. Name is {2}', ID_metric_select, ID_brand_select, ID_period);
}
else
{
Ext.MessageBox.alert('Information', 'You have to select a metrics.');
}
},
iconCls: 'graphic'

}),'->',
new Ext.Action({
text: 'Export results',
handler: function(){

var ID_state = gridTemplate.store.getAt(0).data.ID_State;
var ID_measure = gridTemplate.store.getAt(0).data.ID_Measure;
var ID_dispatch_type = gridTemplate.store.getAt(0).data.ID_Dispatch_Type;
var ID_appointment = gridTemplate.store.getAt(0).data.ID_Appointment;
var ID_handoff = gridTemplate.store.getAt(0).data.ID_Handoff;
var ID_brand = gridTemplate.store.getAt(0).data.ID_Brand;
url = "DataExport.aspx?op=1&year=" + cboYear.getValue() + "&period=" + cboPeriod.getValue() + "&ID_brand=" + ID_brand + "&ID_category=1&ID_state=" + ID_state + "&ID_measure=" + ID_measure + "&ID_dispatch_type=" + ID_dispatch_type + "&ID_appointment=" + ID_appointment + "&ID_handoff=" + ID_handoff;
window.open(url);
},
iconCls: 'excel'

}),'-',
new Ext.Action({
text: 'Export Tickets',
handler: function(){
//Ext.MessageBox.alert('Information', 'Available soon.');
if(gridTemplate.getSelectionModel().getCount() > 0)
{
var ID_state = gridTemplate.store.getAt(0).data.ID_State;
var ID_measure = gridTemplate.store.getAt(0).data.ID_Measure;
var ID_dispatch_type = gridTemplate.store.getAt(0).data.ID_Dispatch_Type;
var ID_appointment = gridTemplate.store.getAt(0).data.ID_appointment;
var ID_handoff = gridTemplate.store.getAt(0).data.ID_Handoff;
var ID_brand = gridTemplate.store.getAt(0).data.ID_Brand;
CreateWindowSelDate(cboPeriod.getValue(), cboYear.getValue(), ID_metric_select, ID_brand, ID_region_select,ID_state,ID_measure, ID_dispatch_type, ID_appointment, ID_handoff,ID_category);
}
else
{
Ext.MessageBox.alert('Information', 'You have to select a metrics.');
}
},
iconCls: 'excel'


})
],
monitorResize: true,
doLayout: function()
{
var w = Ext.get(tabTemplate).getSize(true).width - 1000;
this.setWidth(w);
Ext.grid.GridPanel.prototype.doLayout.call(this);
},
renderTo: renderTag
});

};

13 Oct 2009, 5:31 AM
does not get filled? Does your JSON have an exra comma?