PDA

View Full Version : ux.multiselect does not resize correctly



loginfabio
26 Nov 2012, 12:39 AM
Hello,

I'm writing an application with a window and form.panel with some form elements like textfields and multiselect in a 'column' layout with percentual columnWidth values.
When I maximize the window I find that the form.panel size, after launching a doLayout(), grow to fit correctly to the window and so the textfields and the multiselects inside, but when I resize the windows to the original values, the panel and the textfields inside change their size,not for the multiselects, they continue to have the maximum size.
It put a control on the multiselect resize event, and it seems that it works when the size grow up but not the opposite.
I attach my code, and I apologize for my bad english

view.window file


Ext.define('MyApp.view.mymodule.MyModule' ,{
extend: 'Ext.window.Window',
requires: [
'MyApp.view.mymodule.MyModulePanel',
'MyApp.view.mymodule.MyModuleGrid'
],

alias : 'widget.myapp-mymodule',
title : 'MyAPP - MYMODULE',
width:960,height:584,
animCollapse:false,border:false,closable:true,constrainHeader:true,
minimizable:true,maximizable:true,shim:false,autoScroll:false,
items:[
{xtype:'widget.myapp-mymodulepanel'},
{xtype:'widget.myapp-mymodulegrid'}
],
initComponent: function() {
this.callParent(arguments);
}
});


view.formpanel file


Ext.define('MyApp.view.mymodule.MyModulePanel', {
extend: 'Ext.form.Panel',url: urlData,
alias: 'widget.myapp-mymodulepanel',
id:'mymodulepanel',
title:'MyPanel',height:204,collapsible:true,
layout: 'column',width:'100%',
defaults:{
margin: '2 3 2 3',labelWidth:100,
layout:'form',height:174,border:false,
defaults:{labelAlign:'top',labelStyle:stFont},
},
items: [
{columnWidth:.183,items:[
{xtype:'label',text:'Operatore',style:stFont},
{xtype:'multiselect',id:'msSupporter',name:'sup',anchor: '100%',height:68,store:'Supporters',
valueField:'COD',displayField:'DESC'}]},
{columnWidth:.177,items:[
{xtype:'label',text:'Priorità',style:stFont},
{xtype:'multiselect',id:'msPriorita',name:'pri',height:68,store:'Priorits',
valueField:'SV_ID',displayField:'SV_DESC'}]},
{columnWidth:.160,items:[
{xtype:'label',text:'Gruppo',style:stFont},
{xtype:'multiselect',id:'msGruppo',name:'gru',height:68,store:'Groups',
valueField:'GRP_ID',displayField:'GRP_NOME'}]},
{columnWidth:.180,items:[
{xtype:'textfield',name:'obj3',fieldLabel:'Req 3'}]},
{columnWidth:.178,items:[
{xtype:'textfield',name:'obj4',fieldLabel:'Req 4'}]},
{columnWidth:.122,items:[
{xtype:'textfield',name:'obj5',fieldLabel:'Req 5'}]}
]
});


controller.window file


Ext.define('MyApp.controller.mymodule.MyModule', {
extend: 'Ext.app.Controller',
views: ['mymodule.MyModule'],
requires: [
'MyApp.controller.mymodule.MyModulePanel',
'Smqs.controller.mymodule.MyModuleGrid'
],
init: function() {
this.control({
'myapp-mymodule' : {
resize : this.onWinResize
},
'smqs-tktsearchpanel' : {
collapse : this.onFPResize,
expand : this.onFPResize
},
'smqs-tktmaingrid' : {
render : this.onFPResize
}
});
this.application.getController('MyApp.controller.mymodule.MyModulePanel').init() ;
},
onWinResize : function(val) {
console.log('MyApp - resize') ;
var srcPa = Ext.getCmp('mymodulepanel') ;
srcPa.doLayout();
},
onTktSrcResize : function(val) {
Ext.getCmp('mymodulegrid').setHeight(
Ext.getCmp('mymodule').getHeight() - 52 -
Ext.getCmp('mymodulepanel').lastBox.height
);
}
});


controller.formpanel file


Ext.define('MyApp.controller.mymodule.MyModulePanel', {
extend: 'Ext.app.Controller',
models: ['Supporter','Priorit','Group'],
stores: ['Supporters','Priorits','Groups'],
views: ['mymodule.MyModulePanel'],
init: function() {
this.control({
'myapp-mymodulepanel' : {
resize : this.onResize
},
'myapp-mymodulepanel multiselect' : {
render : this.onMsRender
}
});
console.log('MyApp.controller.mymodule.MyModulePanel - init');
},
onMsRender : function(val) {
val.store.load();
},
onResize : function(val) {
console.log('MyApp.controller.mymodule.MyModulePanel - onResize') ;
}
});


Thanks in advance
Fabio

mitchellsimoens
27 Nov 2012, 12:41 PM
I see a multiselect has anchor : '100%', does the parent container use anchor layout? Hard to read your code as it's not formatted to be legible.

loginfabio
28 Nov 2012, 2:00 AM
I've changed layout property from 'form' to 'anchor' and I solved the problem.

Thanks