PDA

View Full Version : Ext Window taking long time to open



sidd
17 Sep 2009, 9:30 PM
Hi,

In my application i am having a window and it contains a form with near about 50 fields. The window opens by a click on a column of a grid .... and get filled by the grid row values.

for the column i am using a small plugin .... The issue is that ..... the form is taking too much time to open in Firefox .... and its not getting opened in IE.

#Update Column Plugin


function disableFields(comp){
comp.getComponent('project_no').disable();
comp.getComponent('project_name').disable();
comp.getComponent('description').disable();
comp.getComponent('lob').disable();
comp.getComponent('domain').disable();
comp.getComponent('aop_line_item').disable();
comp.getComponent('aop_year').disable();
}


CompleteColumn = function(){
var grid;

function getRecord(t){
var index = grid.getView().findRowIndex(t);
return grid.store.getAt(index);
}
function onClick(e, t){

grid.getEl().mask();
//create user.Form instance (@see UserForm.js)
var userForm = new App.user.Form({
listeners: {
update : function(fpanel, record) {

}
}
});
userForm.buttons[1].disable();
disableFields(userForm.getComponent('pj_details'));

var win = new Ext.Window({
title: 'Update Project',
frame: true,
closable:true,
width:700,
height:500,
layout:'fit',
plain:true,
listeners: {
beforeclose : function(P){
grid.getEl().unmask();
}
},
items: [userForm]
});

win.show(this);
userForm.loadRecord(getRecord(t));

}

Ext.apply(this, {
width: 26,
header: '<div class="update-col-hd"></div>',
menuDisabled:true,
fixed: true,
id: 'task-col',
renderer: function(){
return '<div class="update-col"></div>';
},
init : function(xg){
grid = xg;
grid.on('render', function(){
var view = grid.getView();
view.mainBody.on('click', onClick, this, {delegate: '.update-col'});
});
}
});
};


#My Form



Ext.ns('App', 'App.user');
/**
* @class App.user.FormPanel
* A typical FormPanel extension
*/
App.user.Form = Ext.extend(Ext.form.FormPanel, {
labelWidth: 250,
bodyStyle:'padding:5px 5px 5px 5px',
frame: true,
autoScroll: true,
defaultType: 'textfield',
defaults: {
anchor: '95%'
},

// private A pointer to the currently loaded record
record : null,

/**
* initComponent
* @protected
*/
initComponent : function() {
// build the form-fields. Always a good idea to defer form-building to a method so that this class can
// be over-ridden to provide different form-fields
this.items = this.buildForm();

// build form-buttons
this.buttons = this.buildUI();

// add a create event for convenience in our application-code.
this.addEvents({
/**
* @event create
* Fires when user clicks [create] button
* @param {FormPanel} this
* @param {Object} values, the Form's values object
*/
create : true,
update : true
});

// super
App.user.Form.superclass.initComponent.call(this);
},

/**
* buildform
* @private
*/
buildForm : function() {
return [

{
xtype:'fieldset',
itemId: 'pj_details',
title: 'Project Details',
//collapsible: true,
autoHeight:true,
defaults: {anchor: '100%'},
defaultType: 'textfield',
items :[
## My Fields
]
},

{
xtype:'fieldset',
title: 'Risk',
autoHeight:true,
defaults: {anchor: '100%'},
defaultType: 'textfield',
items :[
## My Fields
]
},

{
xtype:'fieldset',
title: 'Toll Gate',
autoHeight:true,
defaults: {anchor: '100%'},
defaultType: 'textfield',
items :[
## My Fields
]
},

{
xtype:'fieldset',
title: 'Budget',
autoHeight:true,
defaults: {anchor: '100%'},
defaultType: 'textfield',
items :[
## My Fields
]
},
{
xtype:'fieldset',
title: 'Benefits',
autoHeight:true,
defaults: {anchor: '100%'},
defaultType: 'textfield',
items :[
## My Fields
]
},


];
},

/**
* buildUI
* @private
*/
buildUI: function(){
return [{
text: 'Save',
iconCls: 'icon-save',
handler: this.onUpdate,
scope: this
}, {
text: 'Create',
iconCls: 'silk-user-add',
handler: this.onCreate,
scope: this
}];
},

/**
* loadRecord
* @param {Record} rec
*/
loadRecord : function(rec) {
this.record = rec;
this.getForm().loadRecord(rec);
},

/**
* onUpdate
*/
onUpdate : function(btn, ev) {
if (this.record == null) {
return;
}
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid.");
return false;
}
this.fireEvent('update', this, this.record);
this.getForm().updateRecord(this.record);
},

/**
*onCreate
*/
onCreate : function(btn, ev) {
if (!this.getForm().isValid()) {
App.setAlert(false, "Form is invalid");
return false;
}
this.fireEvent('create', this, this.getForm().getValues());
this.getForm().reset();
}
});


Any idea regarding this issue ?


Thanks,
Sidd