Problem creating custom panel by inheriting panel

[naveedanjum]

Hi,

I am getting problem while creating my own custom panel class. This approch was working in Ext JS 3. But i dont know how to do this in Ext JS 4.



Ext.require([
'Ext.form.*',
'Ext.layout.container.Column',
'Ext.tab.Panel'
]);

Ext.ns('sample.ui');
var sampleStores = new sample.ui.stores.sampleStores();

Ext.define('sample.ui.UserProfilePanel', {
extend:'Ext.panel.Panel',
alias:'widget.userprofilepanel',

config: {
layout:'column',
width: '100%',
frame: false,
autoScroll: 'true',
items:[
this.createUserProfileFormPanel
],
title: 'Manage Data'
},

constructor:function(config) {
return this.callParent(arguments);
},


initComponent:function() {

return this.callParent(arguments);
},

createUserProfileFormPanel:function(){

this.userProfilePanel = Ext.create('Ext.panel.Panel', {
renderTo: Ext.Element.get('fullForm'),
ref: 'userProfilePanel',
title: 'User Profile',
bodyStyle:'padding:5px',
width: 930,
layout: {
type: 'table',
columns: 3
},

items:
[
{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'middleName',
fieldLabel: 'Middle Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'Father\'s Name',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'NIC Number',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{

xtype: 'combo',
fieldLabel: 'Gender',
name: 'cmbGender',
ref: 'cmbGender',
store: sampleStores.createGenderStore(),
displayField :'name',
valueField :'id',
queryMode :'local',
emptyText :'Select Gender',
selectOnFocus :true,
blankText:"You didn't select Gender",
allowBlank: false,
scope: this,
labelAlign:'right',
enableKeyEvents : true,
resizable: false
},
{
xtype: 'datefield',
name: 'dateOfBirth',
fieldLabel: 'Date of Birth',
format:'d/M/Y',
labelAlign:'right',
maxValue: new Date(),
allowBlank: true
},
{
xtype: 'textfield',
name: 'residentialPhone',
fieldLabel: 'Phone',
labelAlign:'right',
allowBlank: true
},
{
xtype: 'textfield',
name: 'mobile',
fieldLabel: 'Mobile',
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{
xtype: 'textarea',
name: 'streetAddress',
fieldLabel: 'Street Address',
width: 770,
colspan: 3,
labelAlign:'right',
allowBlank: true
}

],
buttons:
[
{
text: 'Save'
},
{
text: 'Cancel'
}
]
});

return this.userProfilePanel;
}
});

Ext.onReady(function(){

Ext.QuickTips.init();
var userProfilePanel = new sample.ui.UserProfilePanel();
});

[tvanzoelen]

What if you remove this?


renderTo: Ext.Element.get('fullForm'),

The element is rendered as child of UserProfilePanel.

[skirtle]

This section has all sorts of issues:


config: {
layout:'column',
width: '100%',
frame: false,
autoScroll: 'true',
items:[
this.createUserProfileFormPanel
],
title: 'Manage Data'
},


Most, if not all, of those options should be specified directly in the Ext.define config, not in the config property.
Width must be a number in pixels, the string '100%' is not valid. There are other ways to achieve a similar thing, e.g. flex.
autoScroll: 'true' should be autoScroll: true.
this.createUserProfileFormPanel cannot possibly work. The line is run before Ext.define is called as it forms one of the arguments. At that point, this will be the global window object. You need to move the creation of items into initComponent. It also seems strange that you pass in a function rather than invoking it.

[naveedanjum]

Hi,
I changed the code but its still not working, tell me where i am wrong. I am getting this error in firebug

a.getItemId is not a function

chrome://firebug/content/blank.gif(function(){var e=this,a=Object.protot...ate("Ext.XTemplate",j,g)}return j}}); (http://www.sencha.com/forum/"{href}")





Ext.require([
'Ext.form.*',
'Ext.panel.*',
'Ext.layout.container.Column',
'Ext.tab.Panel'
]);

Ext.ns('sample.ui');
var sampleStores = new sample.ui.stores.sampleStores();

Ext.define('sample.ui.UserProfilePanel', {
extend:'Ext.panel.Panel',
alias:'widget.userprofilepanel',

constructor:function(config) {
return this.callParent(arguments);
},

initComponent:function() {
sample.ui.UserProfilePanel.superclass.initComponent.call(this);
var config =
{
layout:'column',
width: '600',
frame: false,
autoScroll:true,
items:this.createUserProfileFormPanel(),
title: 'Manage Data'
};
Ext.apply( this, Ext.apply(this.initialConfig, config) );
sample.ui.UserProfilePanel.superclass.initComponent.apply( this, arguments );

return this.callParent(arguments);
},

onRender:function()
{
sample.ui.UserProfilePanel.superclass.onRender.apply( this, arguments );
},

createUserProfileFormPanel:function(){
this.userProfilePanel = Ext.create('Ext.panel.Panel', {
ref: 'userProfilePanel',
title: 'User Profile',
bodyStyle:'padding:5px',
width: 930,
layout: {
type: 'table',
columns: 3
},

items:
[
{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'middleName',
fieldLabel: 'Middle Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'Father\'s Name',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'NIC Number',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{

xtype: 'combo',
fieldLabel: 'Gender',
name: 'cmbGender',
ref: 'cmbGender',
store: sampleStores.createGenderStore(),
displayField :'name',
valueField :'id',
queryMode :'local',
emptyText :'Select Gender',
selectOnFocus :true,
blankText:"You didn't select Gender",
allowBlank: false,
scope: this,
labelAlign:'right',
enableKeyEvents : true,
resizable: false
},
{
xtype: 'datefield',
name: 'dateOfBirth',
fieldLabel: 'Date of Birth',
format:'d/M/Y',
labelAlign:'right',
maxValue: new Date(),
allowBlank: true
},
{
xtype: 'textfield',
name: 'residentialPhone',
fieldLabel: 'Phone',
labelAlign:'right',
allowBlank: true
},
{
xtype: 'textfield',
name: 'mobile',
fieldLabel: 'Mobile',
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{
xtype: 'textarea',
name: 'streetAddress',
fieldLabel: 'Street Address',
width: 770,
colspan: 3,
labelAlign:'right',
allowBlank: true
}
],

buttons:
[
{
text: 'Save'
},
{
text: 'Cancel'
}
]
});

return this.userProfilePanel;
}
});

/*sample.ui.UserProfilePanel = ;*/

Ext.onReady(function(){

Ext.QuickTips.init();
var userProfilePanel = new sample.ui.UserProfilePanel({
renderTo: Ext.Element.get('lform'),
});
});

[naveedanjum]

After reading from http://www.sencha.com/blog/countdown-to-ext-js-4-dynamic-loading-and-new-class-system
I have managed to resolve the problem. Here is solution code



Ext.require([
'Ext.form.*',
'Ext.panel.*',
'Ext.layout.container.Column',
'Ext.tab.Panel'
]);

Ext.ns('sample.ui');
var sampleStores = new sample.ui.stores.sampleStores();

Ext.define('sample.ui.UserProfilePanel', {
extend:'Ext.panel.Panel',
alias:'widget.userprofilepanel',

constructor:function(config) {
return this.callParent(arguments);
},

initComponent:function() {

Ext.apply(this, {
items:
[
this.createUserProfileFormPanel()
]
});

sample.ui.UserProfilePanel.superclass.initComponent.apply( this, arguments );
},

onRender:function()
{
sample.ui.UserProfilePanel.superclass.onRender.apply( this, arguments );
},

createUserProfileFormPanel:function(){
this.userProfilePanel = Ext.create('Ext.panel.Panel', {
ref: 'userProfilePanel',
title: 'User Profile',
bodyStyle:'padding:5px',
width: 930,
layout: {
type: 'table',
columns: 3
},

items:
[
{
xtype: 'textfield',
name: 'firstName',
fieldLabel: 'First Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'middleName',
fieldLabel: 'Middle Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'lastName',
fieldLabel: 'Last Name',
labelAlign:'right',
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'Father\'s Name',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: false
},
{
xtype: 'textfield',
name: 'fatherName',
fieldLabel: 'NIC Number',
width: 400,
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{

xtype: 'combo',
fieldLabel: 'Gender',
name: 'cmbGender',
ref: 'cmbGender',
store: sampleStores.createGenderStore(),
displayField :'name',
valueField :'id',
queryMode :'local',
emptyText :'Select Gender',
selectOnFocus :true,
blankText:"You didn't select Gender",
allowBlank: false,
scope: this,
labelAlign:'right',
enableKeyEvents : true,
resizable: false
},
{
xtype: 'datefield',
name: 'dateOfBirth',
fieldLabel: 'Date of Birth',
format:'d/M/Y',
labelAlign:'right',
maxValue: new Date(),
allowBlank: true
},
{
xtype: 'textfield',
name: 'residentialPhone',
fieldLabel: 'Phone',
labelAlign:'right',
allowBlank: true
},
{
xtype: 'textfield',
name: 'mobile',
fieldLabel: 'Mobile',
labelAlign:'right',
colspan: 3,
allowBlank: true
},
{
xtype: 'textarea',
name: 'streetAddress',
fieldLabel: 'Street Address',
width: 770,
colspan: 3,
labelAlign:'right',
allowBlank: true
}

],


buttons:
[
{
text: 'Save'
},
{
text: 'Cancel'
}
]
});

return this.userProfilePanel;
}
});

/*sample.ui.UserProfilePanel = ;*/

Ext.onReady(function(){

Ext.QuickTips.init();
var userProfilePanel = new sample.ui.UserProfilePanel({
renderTo: Ext.Element.get('fullForm'),
});
});