PDA

View Full Version : Creation and use of custom xtype



rojalin@ceptes.com
3 May 2012, 10:37 PM
Hi,
I am facing some problem while creating a custom xtype and using it.If somebody has the solution kindly share it

Here is my custom formPanel with an alias sampleFormpanel


Ext.define("TouchApp.view.secondForm", {
extend: "Ext.form.Panel",
requires: "Ext.form.FieldSet",
alias: "widget.sampleFormpanel",
items:[
{ xtype: "fieldset",
items:[
{ xtype: 'textfield',
name: 'Name',
label: 'Name'
},
{
xtype: 'textareafield',
name: 'Age',
label: 'Age'
}
]
}
]
});


My main panel is



Ext.define("TouchApp.view.sampleForm", {
alias: "widget.Samplepanel",
extend: "Ext.Panel",
config: {
scrollable: 'vertical'
},
initialize: function () {
this.callParent(arguments);
var navButton = {
xtype: "button",
text: 'Nav',
ui: 'action'

};
var topToolbar = {
xtype: "toolbar",
title: 'SampleForm',
docked: "top",
items: [
{ xtype: 'spacer' },
navButton
]
};
var formPanel = { xtype: 'sampleFormpanel' }; //Here I am trying to use the custom formpanel
this.add([
topToolbar,
formPanel

]);
}
});

This is the app.js (viewport contains)


Ext.application({
name: "TouchApp",
views: ["secondForm","sampleForm"],
launch: function () {
var formPanelSample = {xtype:'Samplepanel'};
Ext.Viewport.add([formPanelSample]);
}
});


By running this example
I am getting the toolbar only not the form panel

Really confused regarding how to reuse the xtype .Please somebody help me to solve this


Thank you

scottmartin
4 May 2012, 8:34 AM
Perhaps if you add



requires: [ 'TouchApp.view.secondForm' ], // to TouchApp.view.sampleForm


Are yous seeing any errors in the console?

Regards,
Scott.