Results 1 to 8 of 8

Thread: Sencha Touch Form Select Question

  1. #1

    Default Sencha Touch Form Select Question

    Hi there. I have a Sencha Touch application with a form that has several select fields backed by a store. The default behavior seems to select the first item in the store automatically - how can I change this behavior? I would like nothing selected by default and have the user select one of the dropdown items if they choose.

    This sounds like a simple configuration thing and I've read the API docs several times and I must just be missing it. Thanks in advance.

    --Vinny

  2. #2
    Sencha User
    Join Date
    Dec 2007
    Posts
    43

    Default bump

    self-serving bump. apologies.

  3. #3

    Default

    Hopefully someone responds or confirms this as a bug/feature.

  4. #4
    Sencha User
    Join Date
    Jun 2011
    Posts
    1

    Default

    I don't know how to do it,sorry.

  5. #5
    Sencha User kneth's Avatar
    Join Date
    Apr 2009
    Posts
    34

    Default

    Quote Originally Posted by [email protected] View Post
    Hi there. I have a Sencha Touch application with a form that has several select fields backed by a store. The default behavior seems to select the first item in the store automatically - how can I change this behavior? I would like nothing selected by default and have the user select one of the dropdown items if they choose.

    This sounds like a simple configuration thing and I've read the API docs several times and I must just be missing it. Thanks in advance.

    --Vinny

    Hi! I also have the same requirement. I suppose it is a feature. Sencha touch automatically selects the first row of the selectfield's list by default, you can refer this to the methods setValue and showComponent of Ext.form.Select.

    I don't know if you already found a workaround on this and but I just want to share mine. What I did is I create my own class which extends the Ext.form.Select. Then, I define a flag to determine whether to automatically select the first row of the list and then override those methods I mentioned above.

    Code:
    CustomSelectField = Ext.extend(Ext.form.Select, {
         /**
         * @cfg {Boolean} selectFirstRow the flag to initially select the first row of the list.  This flag will be disregarded if you set a valid/ existing {@link #value}
         */
         autoSelectDefault: false,
         
         /**
          * Overrides {@link #Ext.form.Select}' showComponent method.
          */
         showComponent: function() {
              if (Ext.is.Phone) {
                  this.getPicker().show();
              }
              else {
                  var listPanel = this.getListPanel(),
                      index = this.store.findExact(this.valueField, this.value);
      
                  listPanel.showBy(this.el, 'fade', false);
                  
                  //Check if we need to auto select the first row
                  if (index == -1 && !this.autoSelectDefault) {
                      return;
                  }
                  
                  listPanel.down('#list').getSelectionModel().select(index != -1 ? index: 0, false, true);
              }
         },
         
         /**
          * Overrides {@link #Ext.form.Select}' setValue method.
          */
         setValue: function(value) {
              var idx = this.autoSelectDefault? 0 : -1,  //Check if we need to auto select the first row
                  hiddenField = this.hiddenField,
                  record;
      
              if (value) {
                  idx = this.store.findExact(this.valueField, value)
              }
              record = this.store.getAt(idx);
      
              if (record && this.rendered) {
                  this.fieldEl.dom.value = record.get(this.displayField);
                  this.value = record.get(this.valueField);
                  if (hiddenField) {
                      hiddenField.dom.value = this.value;
                  }
              } else {
                  if (this.rendered) {
                      this.fieldEl.dom.value = value;
                  }
                  this.value = value;
              }
      
              
              if (this.picker) {
                  var pickerValue = {};
                  pickerValue[this.name] = this.value;
                  this.picker.setValue(pickerValue);
              }
              
              return this;
         }
    });
    
    Ext.reg('comboboxfield', CustomSelectField); 
    
    
    
    // Render Form Panel
    var form = new Ext.form.FormPanel({
            scroll: 'vertical',
            standardSubmit : false,
    	fullscreen: true,
            modal: true,
            autoShow: true,
            items: [{
                xtype: 'comboboxfield',
                name: 'someFieldName',
                label: 'Some Field Label',
                displayField: 'some_display_field',
                valueField: 'some_value_field',
                store: someStore
    	}]
        });
    Btw, I'm using sencha-touch-1.1.0 open source version.

  6. #6

    Default

    Hi kneth and thank you very much. Very nice and elegant solution - I will try your approach. Thanks again.

    --Vinny

  7. #7
    Touch Premium Member
    Join Date
    Mar 2011
    Location
    New Jersey, USA
    Posts
    130

    Default

    If kneth's solution failed (I don't see why it shouldn't) look at this:

    EDIT: I may be looking at this wrong but,

    When you create a selectField, you can add a config option called value: ' ', and set that value in the single quotes to be blank when it is created.

    Hope it helps if need be!

  8. #8

    Default

    Hi jjerome. Interesting idea - I just tried it and it does not seem to have an effect. The selectField still defaults to the first item in the list/store. Good thought.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •