PDA

View Full Version : form with forder layout Ext JS 4.0.7



feddgis
17 Apr 2012, 1:20 AM
hi,

i can't make the form with border layout in Ext JS 4.0.7

a little googling told me that there was a problem with it (http://www.sencha.com/forum/showthread.php?43687-FormPanel-with-Border-Layout-in-it&p=293815&viewfull=1#post293815), but it's also told that now we can have any layout in forms.

anyway i can't make it work, here's the code (the 'west' panel shows on the top):




Ext.define('myapp.view.DocumentFormNew', {
extend: 'Ext.form.Panel',
bodyPadding: 10,
initComponent: function() {
var me = this;


Ext.applyIf(me, {

autoScroll: true,
layout: 'border',

// i wrote this after trying 'form' and without specifying subpanels' layouts at all:
defaults: {
layout: 'anchor'
},


items: [
{
title: 'WEST!!',
region: 'west',
collapsiple: true,
items: [
{
xtype: 'button'
},{
xtype: 'button'
}
]

},
{
region: 'center',
collapsible: false,
items: [
{
xtype: 'fieldset',
title: 'General',
collapsible: false,
defaults: {
anchor: '100%'
},
items: [
{
xtype: 'textfield',
fieldLabel: 'Short Title',
name: 'title',
maxLength: 255,
....................

scottmartin
17 Apr 2012, 5:30 AM
If you are getting started, I would recommend that you use 4.1 instead of 4.07.
http://www.sencha.com/forum/showthread.php?194793-Ext-JS-4.1-RC3-Now-Available

As for the border layout, from the API docs:
http://docs.sencha.com/ext-js/4-0/#!/api/Ext.layout.container.Border



Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
split: true, // enable resizing
margins: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
collapsible: true, // make collapsible
id: 'west-region-container',
layout: 'fit'
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});


Regards,
Scott.

feddgis
17 Apr 2012, 6:25 AM
thanks!

I think that my problem is that I have a Form Panel, not just generic Panel Panel :(