PDA

View Full Version : Form Panel Reusability in tab and multi column



Pat Emi
6 Sep 2012, 1:23 AM
Hi,
i want to create a form panel, that i can easily reuse on tabs, multi-columns and easily use for an external app.
Please how can i do this?

Thanks in advance.

tvanzoelen
6 Sep 2012, 5:10 AM
Define a new class that extends the Ext.form.Panel. And give it a column layout.

Something like below. When you need it create an instance from it



Ext.define('YOURS.panels.FormPanel', {
extend: 'Ext.form.Panel',
alias: 'my.formpanel',
frame: true,
defaultType: 'textfield',
fieldDefaults: { labelWidth: 75 },
layout: 'column',
hideBorders: true,
autoScroll: true,

initComponent: function(){

this.items = [{

xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}, {

xtype:'fieldset',
title: 'Show Panel', // title or checkboxToggle creates fieldset header
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true, // fieldset initially collapsed
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 52
}]
}];

this.callParent();

}



});

Pat Emi
7 Sep 2012, 1:01 AM
@tvanzoelen


Thanks, but whenever i define a class and extends it, my browser doesn't display my app. From my firebug everything seems ok. But cudn't display.
Secondly from your code ...... alias: 'my.formpanel', pls can u explain to me what it does?

tvanzoelen
7 Sep 2012, 5:39 AM
That an alias where what you can use to create the panel



Ext.create('my.formpanel')


you can use your own naming. But did you create in instance of your class and put it into the viewport or other component?

Pat Emi
10 Sep 2012, 1:17 AM
yes i created an instance of my class, but it's still not display, WHAT DO U THINK AM DOING WRONG?. And from your code sample u used fieldset to create the columns, is there any other way of creating multi-column without the use of fieldset?

evant
10 Sep 2012, 1:30 AM
You haven't posted any code at all, put up an example that demonstrates the issue, we can't enumerate all the possibilities.

Pat Emi
10 Sep 2012, 2:30 AM
It worked now, i did a little modification on the alias..

Ext.onReady(function() {

Ext.define('MyGridForm.com.check', {
extend: 'Ext.form.Panel',
alias: 'widget.comCheck',
frame: true,
defaultType: 'textfield',
fieldDefaults: { labelWidth: 75 },
layout: 'column',
hideBorders: true,
autoScroll: true,

initComponent: function(){

this.items = [{

xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
fieldLabel: 'Field 1',
name: 'field1'
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}, {

xtype:'fieldset',
title: 'Show Panel',
columnWidth: 0.5,
checkboxToggle: true,
collapsed: true,
layout:'anchor',
items :[{
xtype: 'panel',
anchor: '100%',
title: 'Panel inside a fieldset',
frame: true,
height: 52
}]
}];

this.callParent(arguments);

}



});

Ext.create('Ext.Panel', {

layout:'anchor',
renderTo: Ext.getBody(),
items:[{ xtype: 'comCheck'}]


});
});


Like i earlier asked, what if i don't want to use fieldset becos of the lines and i also i will like to add more textfield to the already created form and lastly i will like to have a form where i specify...lets say column 1 and it displays all textfieds in a single column and column 2 automatically dispalys textfields in two columns and column 3 displays in 3 columns and so on. Am i suppose to define them as a class separately, please How can i do this?

Thanks in advance.

Pat.

tvanzoelen
10 Sep 2012, 7:16 AM
Just look at the sample here. Form 3 is maybe something in your line

http://docs.sencha.com/ext-js/4-1/#!/example/form/dynamic.html

Pat Emi
11 Sep 2012, 7:57 AM
Thanks for the link, but what i was trying to say was that... it seems new items cannot be added to an extended class.this was what i was trying to do.....i guess i might be wrong.Ext.create('Ext.Panel', { layout:'anchor', renderTo: Ext.getBody(), items:[{ xtype: 'comCheck', items:[{ xtype:'container', columnWidth: 0.3, title: 'Personal Information', collapsible: true, defaultType: 'textfield', defaults: {anchor: '100%'}, layout: 'anchor', items :[{ fieldLabel: 'First Name', name: 'fname' }, { fieldLabel: 'Last Name', name: 'lname' }, { fieldLabel: 'Sex', name: 'sex' }, { fieldLabel: 'Marital Status', name: 'status' }] }]});