PDA

View Full Version : Can I load content from a script file?



parky128
15 Jul 2010, 12:56 PM
Hi There, need some advice please!

I have a border layout with a tree panel in my west region and my main content area in the center region. I want to be able to click on a tree node to load up a new 'page' into my center region but all that page will be is a new Ext form declaration which at present I have contained in an aspx page.

I have this working by using a managed iframe component in the center region and setting the frame's content when i click on a node pulling in the node's href property to grab the associated aspx file I have created.

This seems a bit overkill to me as im not pulling in external web pages but it's the only wayIi can figure out to get this working so far.

At the time of clicking a node can I just pull in content from a javascript file, rather than my aspx pages I have? That way I dont have to keep using the Ext library includes across all my pages.

I see there is a load function on the Ext objects like Component, Panel, etc, so could this be what I need? Loading in the result of call to a js file to give the new content to be displayed in my center region when clicking a tree node item?

Thanks,
Rob

hendricd
15 Jul 2010, 1:31 PM
Are you looking to display the script contents or execute them ?

parky128
15 Jul 2010, 1:37 PM
OK, I stumbled across something else which I have now tried and gives me what I need (i think). It seems to make sense in that it will just add a new component as a result of a call to my js file containing my form panel declaration.


Ext.Ajax.request({
url: 'CustomerAdd.js',
// send additional parameters to instruct server script
params: {

},
// process the response object to add it to the TabPanel:
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) {
pageDisplayed.destroy();
pageDisplayed = null;
}

pageDisplayed = eval(xhr.responseText); // see discussion below
Ext.getCmp('centerRegion').add(pageDisplayed); // add the component to the TabPanel
Ext.getCmp('centerRegion').doLayout();
myMask.hide();
},
failure: function() {
Ext.Msg.alert("Loading failed", "Page load failure");
}
});One thing that does occur when loading the new content is that it will fill up the entire viewport area momentarily and then size correctly to fit the center region after calling doLayout on the center region. Is there a way I can stop this from happening as its a little ugly, even with a load mask displaying whilst its rendering!

Does this conform to the Ext way of doing things, or am I better off doing this differently?

Rob

parky128
15 Jul 2010, 1:39 PM
Are you looking to display the script contents or execute them ?

The script file looks like below:


(function() {

var siteStore = null;
var sites;

Ext.Ajax.request({
url: 'WebService.asmx/GetCustomers'
,method: 'GET'
,disableCaching: true
,success: function(responseObject) {
sites = Ext.util.JSON.decode(responseObject.responseText).d;
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: Ext.util.JSON.decode(sites)
});

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

Ext.Ajax.request({
url: 'WebService.asmx/GetCountryList'
,method: 'GET'
,disableCaching: true
,success: function(responseObject) {
sites = Ext.util.JSON.decode(responseObject.responseText).d;
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: Ext.util.JSON.decode(sites)
});

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 applications = null;
//var sites;

Ext.Ajax.request({
url: 'WebService.asmx/GetApplications'
,method: 'GET'
,disableCaching: true
,success: function(responseObject) {

applications = Ext.util.JSON.decode(Ext.util.JSON.decode(responseObject.responseText).d);
//applications = Ext.util.JSON.decode(responseObject.responseText).d;


var myCheckboxGroup = new Ext.form.CheckboxGroup({
id:'cstApplications',
xtype: 'checkboxgroup',
allowBlank: false,
//fieldLabel: 'Single Column',
//itemCls: 'x-check-group-alt',
// Put all controls in a single column with width 100%
columns: 3,
items: applications
});

Ext.getCmp('fieldSetApps').add(myCheckboxGroup);
Ext.getCmp('form1').doLayout();

//Ext.getCmp('applicationsCheckBoxGroup').items=Ext.util.JSON.decode(responseObject.responseText).d;

}
,scope:this
,failure: function() {

alert('Error occured loading Fibre Status data');

},
headers: {
'Content-Type': 'application/json; charset=utf-8'
},
params: {

}
});

var form = new Ext.form.FormPanel({
id: 'form1',
renderTo: Ext.getBody(),
labelAlign: "side",
frame: true,
autoHeight: false,
autoWidth: false,
waitMsgTarget: true,
bodyStyle: "padding:5px 10px 0 10px;",
url: "CustomerAdd.ashx",
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.');
}

}
}]
});
//store.load();
return form; // return instantiated component
})();

Would this be a little of both of what you are asking?

hendricd
15 Jul 2010, 1:51 PM
@Parky --

I'd have to say your missing some fundamentals (Container/child relationships and methods to manipulate them).

Follow this basic guide:


Container.remove(oldComp);

var newComp = Container.add( componentCfg);
if(Container.rendered) { Container.doLayout(); }



Forget about masking anything right now. Get the basic mechanics working first.

Think more about what your final layout is going to look like.

Is it really going to be a Viewport with all your components shoved into the center region one at a time? I think not.

Spend some running (and studying the code) the /examples folder that comes with the distribution. (tabs is a great place to start).

parky128
15 Jul 2010, 2:09 PM
Is it really going to be a Viewport with all your components shoved into the center region one at a time? I think not.

For me it will be a Viewport with a form panel in my center region which is defined in a separate js file. I will only ever have one component to add/remove at a time in my application, its just an admin tool for searching, editing and creating items in a database.