PDA

View Full Version : Components loaded in a popup window is not accessible using Ext.getCmp()



nil5286
6 Jul 2012, 4:01 AM
I want to show a popup window for which i am using window.loader i.e Ext.ComponentLoader, to load an extjs page with the pagename parameter as"TestForm"

function popupPage(pagename, title) {
Ext.widget('window', {
title: title,
id: 'popUpWindow',
modal: true,
draggable: false,

loader: {
url: pagename,
method: 'get',
params: {
emplId: 1
},
renderer: function (loader, response, active) {
var text = response.responseText;
loader.getTarget().update(text, true);
return true;
},
scripts: true,
autoLoad: true
},
resizable: false,
height: 300,
width: 600
}).show()
}

TestForm defination code;

Ext.define('testPopUpForm', {
extend: 'Ext.form.Panel',
alias: 'widget.testPopUpForm',
bodyPadding: 5, // Don't want content to crunch against the borders
header: false,
height: 200,
width: 300,
title: 'Filters',
items: [{
xtype: 'datefield',
fieldLabel: 'Start date',
id: 'startDate',
format: 'Y-m-d'
}, {
xtype: 'datefield',
fieldLabel: 'End date',
id: 'endDate',
format: 'Y-m-d'
}, {
xtype: 'textfield',
fieldLabel: 'Employee Id',
id: 'employeeId'
}]
});

TestForm Creation Code:

Ext.onReady(function () {

var loadForm = function () {
Ext.getCmp('TestForm').getForm().setValues({ startDate: '12/12/2009', endDate: '12/12/2009', employeeId: '111' });
}
var testPopUpForm = Ext.create('testPopUpForm', {
id: 'TestForm',
renderTo: 'alone-panel', // required to be shown in a pop-up cannot be set as Ext.getBody()
listeners: {
afterrender: function (formCmp, eOpts) {
loadForm();
}, //eo afterrender
render: function (formCmp, eOpts) {
Ext.getCmp('employeeId').on('blur', function () {
Ext.Ajax.request({
url: "/Services/ExecRule/employeeId/" + Ext.getCmp('employeeId').getRawValue(),
success: function (response, options) {
var data = Ext.decode(response.responseText);
}

});
});
} //eo render
}
});
});

The popup shows but when i try to access the fields of popup page with Ext.getCmp('employeeId') to attach some events, below is the error that it shows in firebug.

Ext.getCmp(fieldId) is undefined
url: "/Services/ExecRule/" + fieldId + "/" + Ext.getCmp(fieldId).getRawValue(),

any kind of help is appreciated.

sword-it
6 Jul 2012, 5:24 AM
Hi nil5286,


It's weird Ext.getCmp() didn't work, my side its work perfect. You can also find form element by getComponent('ID') method .





render: function (formCmp, eOpts) {
var emp_field = formCmp.getComponent('employeeId');
emp_field .on('blur', function () {
Ext.Ajax.request({
url: "/Services/ExecRule/employeeId/" + emp_field.getRawValue(),
success: function (response, options) {
var data = Ext.decode(response.responseText);
}
});
});


For more information see http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Panel-method-getComponent

nil5286
6 Jul 2012, 10:11 AM
The form.getComponent also doesn't work. "TestForm Creation Code" when run individually it work fine and the blur event for the textfield also gets fired but when i try to show the form in the popup window it doesn't allow me to access the field. As you said it works with you are you also showing the page in a popup and tried to execute something on the field event of popup page. Have you used the same approach of ComponentLoader to load the page in popup Window? or is there any other way to load the page in popup Window.