PDA

View Full Version : Forms in Tabs



alexaung
2 Sep 2010, 2:17 AM
Hi All,

I have Page.aspx and Page.js. In this page, there is TabPanel and two tabs.Both Tab has it own Form. Let's say Tab1 and Form1 and then Tab2 and Form2.

It is working as expected. But form in each tab are complex.

So that I want to seperate out Form2 into another Page2.aspx and Page2.js.


I call Page2.aspx from Page.aspx's TabPanel.
e.g TabPanel.add({
title: "Page2",
iconCls: 'tabs',
autoLoad: { url: "Page.aspx"},
closable: false
});

When I load Page.aspx, I can see two tabs, Page1 and Page2. All the form control in Page1 is render as expected but not in Page2 tab.Is this because I use Ext.onReady(function () {} in both Page1.js and Page2.js?

If so, how should I dynamically render Page2 extjs control configure in Page2.js?


Thanks,

Alex

Here is my Page2.js code

Ext.onReady(function () {

Ext.QuickTips.init();

/************************************************************
* create FieldSet - Profile Master Panel
* Staff Information
************************************************************/
var profileInformationFieldSet = {
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Staff Information',
collapsible: false,
autoHeight: true,
margins: '5 5 5 5',
//width: '800',
labelWidth: 125,
bodyStyle: {
padding: '10px 20px'
},
layout: 'column',
items: [
{
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'Staff ID',
id: 'PIdString',
name: 'PIdString',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'First Name',
name: 'PFirstName',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Middle Name',
name: 'PMiddleName',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Last Name',
name: 'PLastName',
readOnly: true,
anchor: '80%'
}, {
xtype: 'textfield',
fieldLabel: 'Position',
name: 'Position',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Business Unit',
name: 'BusinessUnit',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Department',
name: 'Department',
anchor: '80%',
readOnly: true
}
]
}
]
};


/************************************************************
* create FieldSet - Profile Master Panel
* Account Information
************************************************************/
var accountFieldSet = {
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Account Status',
collapsible: false,
autoHeight: true,
margins: '5 5 5 5',
//width: '800',
labelWidth: 125,
bodyStyle: {
padding: '10px 20px'
},
layout: 'column',
items: [
{
columnWidth: .5,
layout: 'form',
border: false,
items: [{
xtype: 'textfield',
fieldLabel: 'State',
id: 'State',
name: 'State',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Password expired',
name: 'PasswordExpired',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Date of expiry, days left',
name: 'DateofExpiry',
anchor: '80%',
readOnly: true
}, {
xtype: 'textfield',
fieldLabel: 'Invalid login attempts',
name: 'InvalidLoginAttempts',
readOnly: true,
anchor: '80%'
}, {
xtype: 'textfield',
fieldLabel: 'Last logged in',
name: 'LastLoggedIn',
anchor: '80%',
readOnly: true
}
]
}
]
};


/************************************************************
* create FieldSet - Profile Master Panel
* User Role Information
************************************************************/
var userRolesStore = new Ext.data.JsonStore({
storeId: 'userRolesStore',
proxy: new Ext.data.HttpProxy({
method: 'POST',
disableCaching: false,
url: "../Proxy/ContextService.svc/GetUserRoles"
}),
autoLoad: true,
autoDestory: true, // disable this if binding this store to more than 1 element
root: 'result',
fields: ['RoleId', 'StaffId', 'RoleName', 'BusinessUnitId', 'BusinessUnitName'],
idProperty: 'RoleId'
});


var rolesStore = new Ext.data.JsonStore({
storeId: 'rolesStore',
proxy: new Ext.data.HttpProxy({
method: 'POST',
disableCaching: false,
url: "../Proxy/ContextService.svc/GetUserRoles"
}),
autoLoad: true,
autoDestory: false, // disable this if binding this store to more than 1 element
root: 'result',
fields: ['RoleId', 'StaffId', 'RoleName', 'BusinessUnitId', 'BusinessUnitName'],
idProperty: 'RoleId'
});

var businessUnitByRoleStore = new Ext.data.JsonStore({
storeId: 'businessUnitByRoleStore',
proxy: new Ext.data.HttpProxy({
method: 'POST',
disableCaching: false,
url: "../Proxy/ContextService.svc/GetUserRoles"
}),
autoLoad: true,
autoDestory: false, // disable this if binding this store to more than 1 element
root: 'result',
fields: ['RoleId', 'StaffId', 'RoleName', 'BusinessUnitId', 'BusinessUnitName'],
idProperty: 'RoleId'
});

var comboRole = new Ext.form.ComboBox({
id: 'Role',
name: 'Role',
store: rolesStore,
triggerAction: 'all',
typeAhead: true,
editAlternateField: 'RoleId',
valueField: 'RoleId',
displayField: 'RoleName',
allowBlank: false,
listeners: { select: { fn: function (combo, value) {
var roleBUCmp = Ext.getCmp('fieldComboRoleBusinessUnit');
roleBUCmp.setValue('');
roleBUCmp.setDisabled(false);
roleBUCmp.store.reload({
params: { departmentId: combo.getValue() }
});
}
}
}
});

var comboBusinessUnit = new Ext.form.ComboBox({
id: 'fieldComboRoleBusinessUnit',
name: 'BusinessUnit',
store: businessUnitByRoleStore,
triggerAction: 'all',
typeAhead: true,
editAlternateField: 'RoleId',
valueField: 'RoleId',
displayField: 'RoleName',
allowBlank: false
});

var roleColModel = new Ext.grid.ColumnModel({
columns: [
new Ext.grid.RowNumberer(),
{ id: 'RoleId', header: "RoleId", hidden: true, locked: true, dataIndex: 'RoleId' },
{ header: "Role", width: 245, sortable: true, dataIndex: 'RoleName', renderer: Ext.Orbis.renderer.Combo(comboRole), editor: comboRole },
{ header: "Business Unit", width: 245, sortable: true, dataIndex: 'BusinessUnitName', renderer: Ext.Orbis.renderer.Combo(comboBusinessUnit), editor: comboBusinessUnit }
]

});

var editor = new Ext.ux.grid.RowEditor({
saveText: 'Update'
//clicksToEdit: 1
});

// create the editor grid
var gridRole = new Ext.grid.GridPanel({
id: 'grdRole',
store: userRolesStore,
width: 550,
autoScroll: true,
height: 120,
//autoHeight: true,
view: new Ext.grid.GridView({ autoFill: true }),
plugins: [editor],
tbar: [{
text: 'Add Role',
iconCls: 'tNew',
handler: function () {
// access the Record constructor through the grid's store
var Role = gridRole.getStore().recordType;
//make a new empty Role and stop any current editing
var r = new Role({});
editor.stopEditing();

//add our new record as the first row, select it
userRolesStore.insert(0, r);
gridRole.getView().refresh();
gridRole.getSelectionModel().selectRow(0);

//start editing our new User
editor.startEditing(0);
}
}, tbSpacer, tbSeparator, tbSpacer, {
ref: '../removeBtn',
text: 'Remove Role',
iconCls: 'tDelete',
disabled: true,
handler: function () {
editor.stopEditing();
var s = gridRole.getSelectionModel().getSelections();
for (var i = 0, r; r = s[i]; i++) {
userRolesStore.remove(r);
}
}
}],
colModel: roleColModel

});

var rolesFieldSet =
{
xtype: 'fieldset',
columnWidth: 0.5,
title: 'Role',
collapsible: false,
//autoHeight: true,
margins: '5 5 5 5',
//width: '800',
//labelWidth: 125,
bodyStyle: {
padding: '10px 20px'
},
layout: 'column',
items: [gridRole]

};

var profileForm = new Ext.FormPanel({

title: 'Profile',
id: 'EmployeeProfileForm',
renderTo: "form-ct",
waitMsgTarget: true,
tbar: [actionBack, tbSpacer, tbSeparator, tbSpacer, actionSave, tbSpacer, tbSeparator, tbSpacer,
{ // <-- Add the action directly to a toolbar
text: 'Actions',
iconCls: 'tAction',
menu: [actionReset, actionUnlock] // <-- Add the action directly to a menu
}],
monitorValid: true,
//collapsible: false,
frame: false,
layout: 'fit', // arrange items in columns
bodyStyle: {
padding: '10px 20px'
},
items: [profileInformationFieldSet, rolesFieldSet, accountFieldSet]
});

//profileForm.render('form-ct');

gridRole.getSelectionModel().on('selectionchange', function (sm) {
gridRole.removeBtn.setDisabled(sm.getCount() < 1);
});

editor.on({
scope: this,
beforeedit: function (roweditor, rowIndex) {
var record = userRolesStore.getAt(rowIndex);
if (record.get('RoleName') == "EMP User") { // replace with your condition
Ext.MessageBox.alert('Message', "Can't not edit default user role");
return false;
}
},
afteredit: function (roweditor, changes, record, rowIndex) {
//your save logic here - might look something like this:
Ext.Ajax.request({
url: record.phantom ? '/users' : '/users/' + record.get('user_id'),
method: record.phantom ? 'POST' : 'PUT',
params: changes,
success: function () {
//post-processing here - this might include reloading the grid if there are calculated fields
}
});
}
});


//}); // End OnReady

Condor
2 Sep 2010, 2:34 AM
1. autoLoad is only meant to load HTML fragments (no HTML, HEAD, LINK or BODY tags). Scripts are only executed if you specify scripts:true in autoLoad (e.g. autoLoad:{url:'Page.aspx',scripts:true}).
2. If you do want to load a full HTML page you should use an IFRAME (e.g. bodyCfg:{tag:'iframe',src:'Page.aspx'}).
3. You can't use Ext.onReady in autoLoaded content, because the DOM is already loaded (so it won't fire).
4. You should not use autoLoad to load Ext components. Use the LiteRemoteComponent user extension for that.

alexaung
2 Sep 2010, 2:49 AM
Thanks Condor!!!