Sizing and positioning related text boxes above an Item Selector

[laurelkhall@gmail.com]

My requirement is to add a text field which filters the data stores for the From and To selection boxes of an item selector with multiselect. The filter works perfectly, this is about knitting the text box to their related multiselects so that resizing appears seamless.

I have one container column layout for the two filter text fields. I took a guess at what the width should be - I just made the columnWidth: .477 but it obviously isn't lined up and resizing is even worse.

Is there any way to bind each filter text box to its related multiselect below? I want to bind them (position and width-wise) so that they'll appear like one component. I think it would help if I could get the width of one of the multiselects and use it for the filter text box. Is there a simple way to do this?

SnippetForForum.png

[mitchellsimoens]

Did you look at how the ItemSelector is created? It's basically a container using hbox layout with 3 items. The lists have flex 1 and the middle component that has the buttons uses vbox layout, margin of '0 4' and the width is from the actual buttons.

[laurelkhall@gmail.com]

mitchellsimoens: Thank you for pointing me in the right direction. After looking more closely at the ItemSelector, I added "flex 1" to my from and to filters (text fields) and made the layout an hbox with container between the two filters styled set properly and it is now sizing properly. I've added new code below in bold in case it helps somebody.

          
            this.filterFromTextField = Ext.create('Ext.form.Text', {
            hideLabel : true, 
            emptyText : this.langObj.field10EmptyText,
            enableKeyEvents : true,
            flex: 1,
            listeners : {
            keyup : {
                 scope : this,
                 fn : 
                     function( field, eventObj, eOpts) {
                            var val = field.getValue();
                            this.userFilterFromString = '';
                             filterEvent.fireEvent('clearFromFilter');
                            console.log('keyup: field content =  ' + val);
                               if (val.length > 0) {
                                   this.userFilterFromString = val.toUpperCase();  
                               filterEvent.fireEvent('refreshFrom');
                             }
                     }
            }
            }
          });
          
         this.filterToTextField = Ext.create('Ext.form.Text', {
         hideLabel : true,
         emptyText : this.langObj.field11EmptyText,
         enableKeyEvents : true,
         flex: 1,
         listeners : {
                keyup : {
                 scope : this,
                 fn : 
                     function(field, eventObj, eOpts) {
                                var val = field.getValue();
                                this.userFilterToString = '';
                                 filterEvent.fireEvent('clearToFilter');
                                   if (val.length > 0) {
                                       this.userFilterToString = val.toUpperCase();      
                                   filterEvent.fireEvent('refreshTo');
                                   }
                       }
            }
         }
     });
          
     this.subscriptionItemFilterColumnContainer = Ext.create('Ext.container.Container', {
            layout: 'hbox',
            items : [ this.filterFromTextField, 
                      {
                       xtype: 'container',
                       padding: '0 16'
                      },
                      this.filterToTextField ]
      });