PDA

View Full Version : Problem displaying Gridpanel in a dev



Jayeff_land
9 Sep 2009, 5:23 AM
Hello, I have a problem viewing a Gridpanel (renderTo) in a div with a tab after the destruction of a Gridpanel in that same tab. Here is the explanation: I have made a web page containing a series of tabs. Each tab are named tab1, tab2, tab3…and each one contain a 3 GridPanel attached to record store. The Gridpanels allow certain manipulations such as modifying, deleting and adding information. When the manipulations are done, the user must press a save button. This will lead to a popup windows asking to rename the tabname and will do refresh of the page with a new GridPanel displaying a list of results.

My problem seems to reside at the “renderto” stage of new Gridpanel. Here is part of the code.

The application is developped with Visual Studio 2005 using C#, json and ExtJs 2.2.

Here is the part that is working perfectly.


function Create(renderTag, tabID, name)
{
try
{
var ID_region = 0;
numberOfGrid++;

var tab1 = Ext.getCmp(tabID);
Ext.DomHelper.insertFirst(tab1.body,{tag: 'div', id:renderTag + numberOfGrid});

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

//Create store from Ashx to fill the grid.
var myStore = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({ url: 'Handler.ashx?op=5', method: 'GET' }),
reader: new Ext.data.JsonReader({ root: 'rows' },myRecord)
});

myStore.load();

//Create Metric Grid.
var grid1 = new Ext.ux.AutoGridPanel
({
ddGroup : 'gridDDGroup',
enableDragDrop:true,
id: tabID + '.grid' + numberOfGrid.toString(),
store: myStore,
columns: [
{header: 'id_metric'},
{header: 'Metrics list'}
],
viewConfig: {
forceFit: true
},
title: 'Metrics to select and insert into the shopping cart',
height: 275,
layout:'fit',
loadMask: true,
autoScroll : true,
stripeRows : true,
margins:'0 1 0 15',
frame: true,
sm: new Ext.grid.RowSelectionModel
({
singleSelect: true
}),
monitorResize: true,
doLayout: function()
{
var w = Ext.get('mainTab').getSize(true).width - 1000;
this.setWidth(w);
Ext.grid.GridPanel.prototype.doLayout.call(this);
},
renderTo: renderTag + numberOfGrid
});

// Create store to pass data to object.
var storeBrands = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Brands
});

var storeAppointments = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Strata_Appointments
});

var storeDispatch = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Strata_Dispatch_Types
});

var storeHandoff = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Strata_Handoff
});

var storeMeasures = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Strata_Measures
});

var storeStates = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Strata_States
});

var storeRights = new Ext.data.SimpleStore({
fields: ['id', 'name'],
data : Ext.OdinData.Rights
});

var textMetric = new Ext.form.TextField({
fieldLabel : 'Metric name',
name : 'name_english',
width: 500
});

var textIDMetric = new Ext.form.TextField({
fieldLabel : 'ID',
name : 'ID_metric',
width: 40
});

var cboBrands = new Ext.form.ComboBox({
store: storeBrands,
fieldLabel: 'Brands',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});

// Combobox on the selection panel.
var cboAppointments = new Ext.form.ComboBox({
store: storeAppointments,
fieldLabel: 'Appointments',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});
var cboDispatch = new Ext.form.ComboBox({
store: storeDispatch,
fieldLabel: 'Dispatch',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});

var cboHandoff = new Ext.form.ComboBox({
store: storeHandoff,
fieldLabel: 'Handoff',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});

var cboMeasures = new Ext.form.ComboBox({
store: storeMeasures,
fieldLabel: 'Measures',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});

var cboStates = new Ext.form.ComboBox({
store: storeStates,
fieldLabel: 'States',
displayField:'name',
valueField: 'id',
mode: 'local',
triggerAction: 'all',
forceSelection:true,
width:350
});

// Setup the form panel
var formPanel = new Ext.form.FormPanel({
region : 'center',
title : 'Customization of the cart',
bodyStyle : 'padding: 10px; background-color: #DFE8F6',
labelWidth : 100,
width : 750,
height: 275,
items : [
textMetric,
textIDMetric,
cboBrands,
cboAppointments,
cboDispatch,
cboHandoff,
cboMeasures,
cboStates
]
});

//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 1265,
height : 300,
layout:'column',
items: [{
columnWidth: .25
},{
columnWidth: .75
}],
renderTo : renderTag + numberOfGrid,
items : [
grid1,
formPanel
],
bbar : [
'->', // Fill
{
text : 'Add',
id: 'btnAdd',
handler : function()
{
var apply = Ext.Ajax.request
({
method: 'POST',
url: '../AjaxRequest/FiltersHandler.ashx?op=4',
params:
{
Appointments:cboAppointments.getValue(),
Dispatch:cboDispatch.getValue(),
Handoffs:cboHandoff.getValue(),
Measures:cboMeasures.getValue(),
States:cboStates.getValue(),
Metrics:textIDMetric.getValue(),
Brands:cboBrands.getValue(),
Metric_Description:textMetric.getValue(),
Brand_Description:cboBrands.lastSelectionText,
Appointment_Description:cboAppointments.lastSelectionText,
Dispatch_Type_Description:cboDispatch.lastSelectionText,
Handoff_Description:cboHandoff.lastSelectionText,
Measure_Description:cboMeasures.lastSelectionText,
State_Description:cboStates.lastSelectionText
},
waitMsg:'Saving...',
failure:function(form, action)
{
Ext.MessageBox.alert('ODIN', 'Error, Filters not applied! Please try again.');
},
success:function(form, action)
{
var TabDiv = renderTag + numberOfGrid;
var arr = new Array();
LoadMetricInSelectedList(form.options.params, TabDiv, grid1, formPanel, tab1, displayPanel, renderTag);
}

})
}
},
'->', // Fill
{
text : 'Cancel',
handler : function()
{
//refresh source grid
myStore.loadData();
formPanel.getForm().reset();
}
}
]

});


Here I am passing and saving the information with a json in a ASHX page. And I am destroying the gridpanel. The ShowTemplateResult is the last stage of that program. It is supposed to show the new Gridpanel with the result.


function CreateTemplate(metric, grid1, grid4, formPanel, tab1, displayPanel, renderTag)
{
var txtTemplate = new Ext.form.TextField({fieldLabel: 'Template name',
name: 'template',
width:150,
allowBlank:false
});

var frmTemplate = new Ext.form.FormPanel({
labelAlign: 'top',
items:[txtTemplate],
contentEl:'frmTemplate',
buttonAlign:'right',
frame:true
});
//Function handler
var btnCancelHandler = function(button, event) {
win.hide();
};

var btnApplyHandler = function(button, event) {
var apply = Ext.Ajax.request({
method: 'POST',
url: '../AjaxRequest/FiltersHandler.ashx?op=6',
params: {
Template:txtTemplate.getValue()
},
waitMsg:'Saving...',

failure:function(form, action) {
Ext.MessageBox.alert('ODIN', 'Error, Filters not applied! Please try again.');
},
success:function(form, action) {
CreateMetricList(metric);
grid1.destroy();
grid4.destroy();
formPanel.destroy();
displayPanel.destroy();
var TabName = txtTemplate.getValue();
Ext.getCmp(tab1.id).setTitle(TabName);
win.hide();
ShowTemplateResult(tab1.id, renderTag);
}
})

};



Here is the part that does not show and giving me an error. It seems to be a problem with the renderTo options in the gridTemplate in the ShowTemplateResult function. This Options is passing the same Div (rendertag) as in the previous Gridpanel. The script stopped in ext-all-debug.js at this line in the onrender function :

this.el = ct.createChild({
id: this.id,
cls: this.baseCls
}, position);




function ShowTemplateResult(tabTemplate, renderTag)
{
// Ext.DomHelper.insertFirst(tabTemplate.body,{tag: 'div', id:renderTag});
var gridTemplate = new Ext.ux.AutoGridPanel({
title:name,
id: tabTemplate,
height: 300,
layout:'fit',
loadMask: true,
autoScroll : true,
stripeRows : true,
collapsible:true,
titleCollapse:true,
margins:'0 5 0 15',
store : new Ext.data.GroupingStore({ //t1.ID_state, ID_measure, ID_dispatch_type, ID_appointment, ID_handoff
proxy: new Ext.data.HttpProxy({
url: 'Handler.ashx?op=6&ID_Template=2'
}),
sortInfo:{field: 'description_english', direction: "ASC"},
groupField:'name_english',
remoteGroup : true,
reader: new Ext.data.JsonReader(

)
}),
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;
CreateGraph(name, name_metric, "window_" + gridTemplate.id,ID_metric_select, ID_brand_select,ID_category_select,cboYear.getValue(),cboPeriod.getValue(),ID_state,ID_measure,ID_dispatch_type,ID_appointment,ID_handoff);
}
else
{
Ext.MessageBox.alert('Information', 'You have to select a metrics.');
}
},
iconCls: 'graphic'}),
'->',
{
tooltip:'Collapse / Expand All Members',
iconCls: 'EXPAND',
enableToggle: true,
toggleHandler : function(b, pressed){
if(pressed == true)
gridTemplate.view.expandAllGroups();
else
gridTemplate.view.collapseAllGroups();
}
}
],
monitorResize: true,
doLayout: function() {
var w = Ext.get(this.getEl().dom.parentNode).getSize(true).width - 10;
if(w < 0){w = Ext.get('mainTab').getSize(true).width - 10;}
this.setWidth(w);
Ext.grid.GridPanel.prototype.doLayout.call(this);
},
renderTo: renderTag
});

// gridTemplate.store.on('load', function(store , records, options){
// var s = store.reader.meta;
// gridTemplate.setTitle(name + ' - ' + s.successProperty);
// var cpt = store.reader.jsonData.metaData.totalProperty;
// });



Anybody knows where I should look at? Thanks Jayeff

Jayeff_land
9 Sep 2009, 5:56 AM
Ok, I just found my mistake. Sorry for the inconvenience. :D