PDA

View Full Version : WIndow size with a form



toxkillfraex
10 May 2012, 11:37 PM
I have a window that has a filedset in it that can duplicate. There are two ways this window can be creating by asking for an edit or asking to create a new one.

both of these cases work fine on first call and the window snugly fits around the content and adding fieldset makes the window resize just fine. When it's closed I destroy it.

however when I first call the new case and then an edit case with multiple instances of the fieldset the window doesn't fit around it's content anymore and some of it is hidden. In the reverse order the window remains too large.

any idea are welcome

jay@moduscreate.com
13 May 2012, 4:46 AM
Can you reproduce this problem in a sandbox? If so, can you post your code?

toxkillfraex
14 May 2012, 5:31 AM
Can you reproduce this problem in a sandbox? If so, can you post your code?

it's quite a mass of code, but I tried to reduce the problem cutting out stores and data

the window with the size problem

Ext.define('EPA.view.window.CreateFolder',
{
extend: 'Ext.window.Window',
requires: ['Ext.window.Window'],

id: 'createFolderWindow',
alias: 'widget.createFolder',

layout: 'fit',

modal: true,

parameterStore: null,

parameterSet: null,

folderLabel: null,

dynamicFolder: null,

closeAction: 'destroy',

initComponent: function()
{

var me = this;

me.invertComboBox = Ext.create('Ext.form.field.ComboBox',
{
name: 'invert',

store : new Ext.data.SimpleStore(
{
fields:
[
'value',
'label'
],

data:
[
['false', locale['does']],
['true', locale['doesNot']]
]
}),

valueField:'value',
value: me.dynamicFolder? (me.dynamicFolder.filterStore.getAt(0).data.invert?'true':'false') : 'false',

displayField:'label',

allowBlank: false,
editable : false

});

me.modeComboBox = Ext.create('Ext.form.field.ComboBox',
{
name: 'mode',

store : new Ext.data.SimpleStore(
{
fields:
[
'value',
'label'
],

data:
[
[0, locale['contains']],
[1, locale['beginWith']],
[2, locale['endWith']]
]
}),

valueField:'value',
value: me.dynamicFolder? me.dynamicFolder.filterStore.getAt(0).data.mode : 0,

displayField:'label',

allowBlank: false,
editable : false
});


me.parameterSet = Ext.create('Ext.form.FieldSet',
{
xtype: 'fieldset',

dynamic : true,

title: locale['parameter'],

layout: 'hbox',

items:
[
me.modeComboBox,

me.invertComboBox,

{
xtype: 'textfield',

flex: 1,

value: me.dynamicFolder? me.dynamicFolder.filterStore.getAt(0).data.input: '',

allowBlank: false
}
]

});

var filterPanel = Ext.create('Ext.panel.Panel',
{
id: 'filterPanel',

bodyCls: 'panelBody',

items: [me.parameterSet]

});

var addButton = Ext.create('Ext.button.Button',
{
xtype: 'button',

iconCls: 'add-btn',

id:'addFilterBtn'

});


var buttonContainer = Ext.create('Ext.container.Container',
{
xtype: 'container',

layout:
{
type: 'hbox',
pack: 'end',
align: 'stretch'
},

height: 25,
flex:1,

items:
[
{
id: 'okFolder',
xtype: 'button',

width: 80,

text: locale['okFolder'],

formBind: true
},
{
id: 'cancelFolder',
xtype: 'button',

width: 80,

text: locale['cancelFolder'],

handler: function()
{
me.close()
}
}
]
});

me.folderLabel = Ext.create('Ext.form.field.Text',
{
xtype: 'textfield',

id: 'folderTitle',

fieldLabel: locale['folderTitle'],
labelWidth: 120,

anchor: '100%',

allowBlank: false,

value: me.dynamicFolder? me.dynamicFolder.data.label : ''

});

me.folderForm = Ext.create('Ext.form.Panel',
{
xtype: 'panel',

bodyCls: 'createFolderBody',

width: 700,

layout: 'anchor',

items:
[
me.folderLabel,

{
id: 'folderParamterTitle',

xtype: 'label',

text: locale['folderParamterTitle']
},
filterPanel, addButton, buttonContainer]
});

Ext.apply(me,
{
items: [me.folderForm]
});

me.callParent(arguments);

return me;
},
addFilter: function(filter, window)
{
var me = window;

me.parameterSet.up().add(me.parameterSet.cloneConfig(
{
items:
[
me.modeComboBox.cloneConfig({value: filter? filter.data.mode : null}),
me.invertComboBox.cloneConfig({value: filter? (filter.data.invert?'true':'false') : ''}),
{
xtype: 'textfield',

flex: 1,

value: filter? filter.data.input : ''
},

{//only on extra parameters can be removed
xtype: 'button',

text: locale['remove'],

handler: function(button)
{
me.folderForm.remove(button.up());

me.parameterSet.up().remove(button.up());
}
}

]
}));
}

});

the controller methods that make the window simplified to show the issue


showEdit: function(grid, rowIndex, colIndex)
{
var controller = me.getController('Settings');

var folder = grid.store.getAt(rowIndex)

Ext.create('EPA.view.window.CreateFolder',
{
title: locale['createFolderWindow']

//parameterStore: controller.loadParameters(),
//dynamicFolder: grid.store.getAt(rowIndex)

});

controller.getAddWindow().show();

controller.getAddWindow().addFilter(null, controller.getAddWindow());
controller.getAddWindow().addFilter(null, controller.getAddWindow());

controller.getAddWindow().forceComponentLayout();

},
showAdd: function()
{
var me = this;

Ext.create('EPA.view.window.CreateFolder',
{
title: locale['createFolderWindow']

//parameterStore: me.loadParameters()
});

me.getAddWindow().show();
me.getAddWindow().doLayout();

console.log(me.getAddWindow().folderForm.getSize());
}


the window that calls those methods


Ext.define('EPA.view.window.Settings',
{
extend: 'Ext.window.Window',
requires: ['Ext.window.Window'],

id: 'settingsWindow',
alias: 'widget.settings',

iconCls: 'settingsIcon',
layout:'auto',
closeAction: 'destroy',

height: 400,
width: 400,

title: locale['settingsWindow'],

//local variables for data
languageStore: null,
currentLanguage: null,

folderStore: null,

controller: null,

//initialize container and it's components
initComponent: function()
{
var me = this;

//panel for changing language contains a language combobox



//dynamic folders grid
var grid = Ext.create('Ext.grid.GridPanel',
{
id: 'dynamicFoldersGrid',

cls: 'foldersGrid',

height: 190,
flex: 1,
store: [{label:'test',filter:'test'}],
columns:
[
{ text: locale['folderLabel'], width: 100, dataIndex: 'label' },
{ text: locale['folderFilter'], flex: 1, dataIndex: 'filter'

},
{
xtype: 'actioncolumn',
width: 50,
items:
[{
icon : 'resources/images/cancel.png',
tooltip: 'remove',
handler: me.controller.remove
},
{
icon : 'resources/images/pencil.png',
tooltip: 'edit',
handler: me.controller.showEdit

}]
}
],

viewConfig:
{
forceFit: true
},

autoScroll: true,
columnLines: true
});

//dynamic folders panel
var dynamicFoldersPanel = Ext.create('Ext.panel.Panel',
{


bodyCls: 'settingsPanel',
layout: 'anchor',

anchor: '98%',
height: '76%',

items:
[
{
id: 'settingsFolderTitle',

xtype: 'label',

cls: 'settingsTitle',

text: 'Dynamic folders'
},
grid,
{
xtype: 'button',

id: 'addFolder',

iconCls: 'add-btn',

width: 23

}
]

});




Ext.apply(me,
{
items: [dynamicFoldersPanel]

});

me.callParent(arguments);

return me;
}

});


the initialisation of that window that's done in the controller containing those creation methods


var settingsWindow = Ext.create('EPA.view.window.Settings',
{
controller: me
});


I'm guessing that's enough to get an idea of what's going on or what I might have missed.

jay@moduscreate.com
14 May 2012, 7:56 AM
Your first problem is that you're defining a class with a static id. Huge no-no.

Delete this: id: 'settingsWindow',

jay@moduscreate.com
14 May 2012, 7:57 AM
The second issue is that you're passing a controller reference to the view. why? The controller should respond to published events. Views should know nothing of their controllers.

jay@moduscreate.com
14 May 2012, 7:58 AM
The last thing i see: you're using " layout:'auto'," this is bad. Why? Ext JS is not good (due to browser inconsistencies) at resizing window instances based on their child contents. The window should be statically sized and the appropriate layout utilized.