1. #1
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    laurelkhall@gmail.com is on a distinguished road

      0  

    Default Answered: Sizing and positioning related text boxes above an Item Selector

    Answered: Sizing and positioning related text boxes above an Item Selector


    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

  2. 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.

  3. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,408
    Answers
    3549
    Vote Rating
    851
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    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.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  4. #3
    Sencha User
    Join Date
    Jan 2012
    Posts
    2
    Vote Rating
    0
    laurelkhall@gmail.com is on a distinguished road

      0  

    Default


    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.

    Code:
              
                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 ]
          });

Thread Participants: 1

Tags for this Thread