ux.multiselect does not resize correctly

[loginfabio]

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]

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]

I've changed layout property from 'form' to 'anchor' and I solved the problem.

Thanks