PDA

View Full Version : Advice needed on dynamic loading of components into a center region of a viewport



parky128
26 Aug 2010, 3:57 AM
Hi,

I am working on an extranet type application which just allows users to select actions from a left hand navigation tree and then perform inserts, edits, etc into a database using Form Panels rendered into a center region of a viewport.

I have my various form panels defined in separate js files, so that when a tree node is clicked the existing components in the center region are removed and replaced with new ones to be used by the end user. I am achieving this currently by processing the response object of an xhr call to a script file:




listeners: {
click: function(a,b,c) {
var myMask = new Ext.LoadMask(Ext.getBody(), {msg:"Please wait..."});
myMask.show();
Ext.Ajax.request({
// hard coded example of url being used
url: '../../Scripts/Customers/CustomerAdd.js',
params: {

},
// process the response object to add it to the center region container:
success: function(xhr) {
//Variable for storing current child component added to the center region component, if present
//destroy it and then add the new one
if(pageDisplayed) {
Ext.getCmp('centerRegion').remove(pageDisplayed);
pageDisplayed = null;
}

pageDisplayed = eval(xhr.responseText);
Ext.getCmp('centerRegion').add(pageDisplayed);
Ext.getCmp('centerRegion').doLayout();
myMask.hide();
},
failure: function() {
Ext.Msg.alert("Loading failed", "Page load failure");
}
});
}
}


The CustomerAdd.js file contains a few AJAX calls to service side handler methods for returning JSON encoded data to be used for the store configs of combo boxes on the form panel that gets returned in the response object:



(function() {

var siteStore = null;
var sites;

Ext.Ajax.request({
url: 'Shared/GetCustomers'
,method: 'GET'
,disableCaching: true
,success: function(responseObject) {
sites = Ext.util.JSON.decode(responseObject.responseText).data;
var SitesRowDefinition = Ext.data.Record.create([
{name: 'cstID'},
{name: 'cstName'}
]);
var rdr = new Ext.data.ArrayReader({}, SitesRowDefinition);

siteStore = new Ext.data.Store({
reader: rdr,
data: sites
});

if(Ext.getCmp('comboReferringCustomer'))
Ext.getCmp('comboReferringCustomer').store=siteStore;
}
,scope:this
,failure: function(e) {
alert(e);
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
params: {}
});

Ext.Ajax.request({
url: 'Shared/GetCountryList'
,method: 'GET'
,disableCaching: true
,success: function(responseObject) {
countries = responseObject.responseText;
var SitesRowDefinition = Ext.data.Record.create([
{name: 'cnyID'},
{name: 'countryName'}
]);
var rdr = new Ext.data.ArrayReader({}, SitesRowDefinition);

siteStore = new Ext.data.Store({
reader: rdr,
data: countries
});

Ext.getCmp('comboCountry').store=siteStore;
Ext.getCmp('comboCountry').setValue('236');

}
,scope:this
,failure: function(e) {
alert('Error occured loading Site list data');
},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
params: {}
});

var form = new Ext.form.FormPanel({
id: 'form1',
labelAlign: "side",
frame: true,
autoHeight: true,
autoWidth: true,

waitMsgTarget: true,
bodyStyle: "padding:5px 10px 0 10px;",
url: "Customer/CreateCustomer",
title: "Add a New Customer",
items: [{

layout: "column",
defaults:{
columnWidth:0.5
,layout:'form'
,border:false
,xtype:'panel'
,bodyStyle:'padding:0 18px 0 0'
},
items: [{
//defaults:{anchor:"100%"},
items: [{
xtype: "textfield",
name: "cstName",
fieldLabel: "Customer Name",
width: 300,
//allowBlank: false
},{
xtype:'combo',
fieldLabel:'Customer Status',
store:[['U','Unknown'], ['A','Active'], ['I','Inactive']],
triggerAction: 'all',
hiddenName: 'cstStatus',
value: 'A',
width: 100,
forceSelection: true,
//allowBlank: false
}, {
xtype: 'combo',
fieldLabel: 'Referring Customer',
//labelStyle: "font-size:11px; font-weight:bold;",
id: 'comboReferringCustomer',
width: 300,
mode: 'local',
triggerAction: 'all',
displayField: 'cstName',
valueField: 'cstID',
emptyText:'Select a Customer',
hiddenName: 'cstReferringCustomer',
forceSelection: true,
allowBlank: false
}]
},{
defaults:{width: 100},
items: [{
xtype:'combo',
fieldLabel:'Customer Type',
store:[['U','Unknown'], ['R','Reseller'], ['D','Distributor'], ['E','End User']],
triggerAction: 'all',
hiddenName: 'cstType',
value: 'E',
forceSelection: true,
//allowBlank: false
}, {
xtype:'combo',
fieldLabel:'Visible Months',
store:['-Please Select-', '1', '2', '3', '6', '12', '24'],
triggerAction: 'all',
hiddenName: 'cstVisibleMonths',
value: '12',
forceSelection: true,
//allowBlank: false
},{
xtype: "checkbox",
name: "CstCanLogin",
id: 'cstCanLogin',
fieldLabel: "Can Login?",
checked: true
}]
}]

},{
xtype: 'fieldset',
title: 'Contact Details',
layout: "column",
defaults:{
columnWidth:0.5
,layout:'form'
,border:false
,xtype:'panel'
,bodyStyle:'padding:0 18px 0 0'
},
items: [{
defaults:{width: 300},
items: [ {
xtype: "textfield",
name: "cstAddressLine1",
fieldLabel: "Address Line 1"
}, {
xtype: "textfield",
name: "cstCityTown",
fieldLabel: "City\Town"
}, {
xtype: 'combo',
fieldLabel: 'Country',
id: 'comboCountry',
width: 250,
//mode: 'local',
//triggerAction: 'all',
//displayField: 'countryName',
//valueField: 'cnyID',
emptyText:'Select a Country',
hiddenName: 'cstCountry',
forceSelection: true,
allowBlank: false
}, {
xtype: "textfield",
name: "cstContactName",
fieldLabel: "Contact Name",
//allowBlank: false
}, {
xtype: "textfield",
name: "cstFaxNumber",
fieldLabel: "Fax Number"
},{
xtype: "textfield",
name: "cstWebsiteAddress",
fieldLabel: "Website Address"
}]
},{
defaults:{width: 300},
items: [{
xtype: "textfield",
name: "cstAddressLine2",
fieldLabel: "Address Line 2"
}, {
xtype: "textfield",
name: "cstRegion",
fieldLabel: "Region",
}, {
xtype: "textfield",
name: "cstPostCode",
fieldLabel: "Post Code"
}, {
xtype: "textfield",
name: "cstPhoneNumber",
fieldLabel: "Phone Number"
}, {
xtype: "textfield",
name: "cstEmailAddress",
fieldLabel: "Email",
vtype: 'email',
vtypeText: 'Email address entered is not in the correct format.'
}, {
xtype: "checkbox",
name: "cstHasJobs",
fieldLabel: "Has Jobs?"
}]
}]
},{
xtype: "textarea",
name: "cstNotes",
fieldLabel: "Notes",
width: 400
}
,{
xtype: 'fieldset',
title: 'Allowed Applications',
id: 'fieldSetApps'
}],
buttons: [{
text: "Create",
handler: function(){
var f = form.getForm();
if (f.isValid()) {
f.submit({
waitMsg:'Creating...',
success: function(f,a){
Ext.Msg.alert('Success', a.result.message);
},
failure: function(f,a){
Ext.Msg.alert('Failure', a.result.message);
}
});
}
else {
Ext.Msg.alert('Validation Error', 'There are some problems with the details you have entered. Please check and try again.');
}
}
}]
});
return form; // return instantiated component
})();


Although this works for me I am unsure if this is really the best way to go and just need some pointers as to whether there are more friendly ways of doing what I am trying to achieve.

I have seen a couple of other similar posts related to this that say its probably better to concatenate all the component configs I will need in one js file and include in the main html file. But in my example above the xhr call is really calling an anonymous function* in the CustomerAdd.js file which in turn kicks off a few AJAX calls to get data I can bind to combo boxes on the form panel I want to return. I am going to end up with numerous form panels to be used in the application, each needing their own AJAX calls to get server side data for other fields. So if I ended up taking the contatenation approach, how do I get my AJAX calls to be made on an ad-hoc basis based on the specific form panel I require?

*I am using the anonymous function approach as I found this in some other posts in the forum and just happened to get it to work for my scenario sp stuck with it.

Thanks,
Rob