1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default Answered: WIndow size with a form

    Answered: WIndow size with a form


    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

  2. Your first problem is that you're defining a class with a static id. Huge no-no.

    Delete this: id: 'settingsWindow',

  3. #2
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Can you reproduce this problem in a sandbox? If so, can you post your code?

  4. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    85
    Answers
    6
    Vote Rating
    0
    toxkillfraex is on a distinguished road

      0  

    Default


    Quote Originally Posted by jay@moduscreate.com View Post
    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
    Code:
    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
    Code:
      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
    Code:
    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
    Code:
    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.

  5. #4
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    Your first problem is that you're defining a class with a static id. Huge no-no.

    Delete this: id: 'settingsWindow',

  6. #5
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

  7. #6
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Answers
    102
    Vote Rating
    77
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    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.

Thread Participants: 1

Tags for this Thread