PDA

View Full Version : Ajax Event In Extended Component



boylesw
24 Feb 2009, 7:24 AM
Hi all I have a quick (hopefully) question... I have extended the Window object to create 'AccountDetailsWindow'.

Now what I would like to do is depending on if or not the user is in a specific role, certain fields will be enabled or disabled. I have the form layed out in the window etc with the fields rendered and disabled by default.

What I am having trouble with is when / where to put the call to the web service to query the user role. I have tried the initComponent and onRender but the window is displayed before the Ajax request is returned. I am probably not making any sense so here is the code (go easy on me this is day 2 of learning this...)




Paperless.Components.AccountDetailsWindow = Ext.extend(Ext.Window, {
// Public Properties

title: 'My Account Details',
width: 400,
height: 300,

// Initialize Component

initComponent: function() {
Ext.apply(this, {

// Private Properties
id: 'accountDetailsWindow',
modal: true,
plain: true,
layout: 'fit',
border: false,

// The items
items: [
new Ext.FormPanel({

frame: false,
labelWidth: 150,
bodyStyle: 'padding: 10px',

items: [
{
xtype: 'fieldset',
title: 'Company Details',
defaultType: 'textfield',
autoHeight: true,

items: [
{
id: 'clientNumber',
fieldLabel: 'Client Number',
name: 'clientNumber',
allowBlank: false,
width: 100,
disabled: true
},
{
id: 'employeeNumber',
fieldLabel: 'Employee Number',
name: 'employeeNumber',
allowBlank: false,
width: 100,
disabled: true
}
]
},
{
xtype: 'fieldset',
title: 'Personal Details',
defaultType: 'textfield',
autoHeight: true,

items: [
{
fieldLabel: 'First Name',
name: 'firstName',
allowBlank: true,
width: 184
},
{
fieldLabel: 'Second Name',
name: 'secondName',
allowBlank: true,
width: 184
}
]
}]
})
],

// The default buttons
buttons: [
{
text: 'Save Changes',
handler: this.onSaveChanges
},
{
text: 'Cancel',
handler: function() {
scope: this;
Ext.WindowMgr.get('accountDetailsWindow').close();
}
}
]
});

Paperless.Components.AccountDetailsWindow.superclass.initComponent.apply(this, arguments);
},

// Render

onRender: function() {
Paperless.Components.AccountDetailsWindow.superclass.onRender.apply(this, arguments);

// ***************** THIS IS THE REQUEST I AM USING JUST
// NOT SURE WHERE TO PUT IT

Ext.Ajax.request({
scope: this,
method: 'POST',
url: 'Services/SecurityService.svc/IsAdministrator',

success: function(result) {
obj = Ext.util.JSON.decode(result.responseText);

var clientNumber = Ext.getCmp('clientNumber');
var employNumber = Ext.getCmp('employeeNumber');

if (obj.messages.isadmin == 'Yes')
{
clientNumber.disabled = false;
employNumber.disabled = false;
}
else
{
clientNumber.disabled = true;
employNumber.disabled = true;
}
},

failure: function(result) {
obj = Ext.util.JSON.decode(result.responseText);
Ext.MessageBox.alert('Error', 'There was an unexpected error during server communications.<br />' + obj.errors.reason);
}
});
},

// Fired when the user clicks the save changes button

onSaveChanges: function() {

}
});
Ext.reg('accountdetailswindow', Paperless.Components.AccountDetailsWindow);


Any help will be greatly appreciated. If these tests go well then hopefully I will be able to take it to my bosses and purchase a license and start using Ext for our internal applications.

Thanks again.