1. #1
    Ext User ozTemplar's Avatar
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    4
    Vote Rating
    0
    ozTemplar is on a distinguished road

      0  

    Default Store and select box

    Store and select box


    First of all, great work guys! Love the demos and now trying to create some simple apps.

    In Extjs, I've been able to define a store to use for select boxes (ComboBox UI) like so:

    Code:
        comboStore = new Ext.data.SimpleStore({
            fields: ['category_id', 'category', 'default_flag'],
            data : categories
        });
        
        combo = new Ext.form.ComboBox({
            store: comboStore,
            displayField:'category',
            transform: 'category',
            typeAhead: true,
            mode: 'local',
            triggerAction: 'all',
            emptyText:'Select a category...',
       ...

    When I try something similar for the Select UI in Sencha Touch:

    Code:
    		var sitesModel = Ext.regModel( 'Sites', { 
    			fields: [
    			         {name: 'category_id'},
    			         {name: 'category'}
    			]
    		});
    		var categories = [ [0,'-'],
    		                   [5,'NACA'],
    		                   [59,'Food'],
    		                   [11,'Programs'],
    		                   [58,'Sports']
    			               ];
    //	
            var comboStore = new Ext.data.Store({
                reader: new Ext.data.ArrayReader (
                		{
                    		idProperty: 'category_id'
                		}
                ),
                model: 'Sites'
                //,data : categories
            });
    
            //comboStore.loadData(categories);
            combo = new Ext.form.Select({
                store: comboStore,
                displayField:'category',
                transform: 'category',
                typeAhead: true,
                mode: 'local',
                triggerAction: 'all',
                emptyText:'Select a category...',
                selectOnFocus:true,
                valueField: 'category_id',
                value: currCategoryId
            });
    it always bring up an error "this.model is udefined". I've just followed what was in the documentation. Am I missing something?

  2. #2
    Ext User ozTemplar's Avatar
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    4
    Vote Rating
    0
    ozTemplar is on a distinguished road

      0  

    Default


    no-one has answered this yet . so, just a quick question then: is it even possible for the Select component to get data from a store? i need it so to dynamically assign options to the select box(es).

  3. #3
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Sorry for the delay. The Select component is not a one on one copy from the Combobox. You pass it an options array containing objects with value and text properties at instantiation time. You could load a store and pass the store.data object to the options of the Select as soon as the store is loaded. You can change the valueField and displayField properties on the Select to use custom fields in your model.

    Having said that, it seems like the error you are getting is related to your store definition. Could you try to remove your reader definition and see if you still get the error?

    I think since you are using an ArrayReader and you have your data defined in code, you should skip the step of creating a store altogether and it would be easier to just do something like

    Code:
    new Ext.form.Select({
        options: [{
            key: 0,
            value: '-',
        }, {....}
    });

  4. #4
    Ext User ozTemplar's Avatar
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    4
    Vote Rating
    0
    ozTemplar is on a distinguished road

      0  

    Default


    Thanks tommy!

    I'll try your suggestion. The real reason behind the Store-way of doing things is that the backend code already provides the store's data in JSON format. If there's no other way around it, the backend can spit out differently, I suppose.

    But the main objective is to create linked select boxes. When the parent select box changes value (onSelect), the secondary one changes options as well. I then need to have a way to dynamically change the child options. Before, I was able to attach a listener to the 'select' event of the parent ComboBox and somewhere i do 'secondaryCombo.store.filter()'.

    Are there any example in the wiki or anywhere of linked select boxes? I've searched to no avail.

  5. #5
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    There is no example for this yet. We are aiming to improve the way you deal with forms drastically in the 1.0 release and will definitely look at this thread to see how we can make what you are trying to do easier.

  6. #6
    Ext User ozTemplar's Avatar
    Join Date
    Jun 2010
    Location
    Sydney, Australia
    Posts
    4
    Vote Rating
    0
    ozTemplar is on a distinguished road

      0  

    Default


    I've followed your suggestion to load a Store and pass the store.data object to the options of the Select. After much twidling, this is what I've got so far:

    Code:
       Ext.regModel('sourceVideo', { 
            fields: [ 
              {name:"video_id", type: 'int'}, 
              {name:"video_title", type:'string'}
            ] 
          }); 
        var myStore = new Ext.data.JsonStore({ 
            id: 'video-store', 
            model:Ext.ModelMgr.types['sourceVideo'] 
          }); 
        
        Ext.util.JSONP.request({
            url: '/mobile/json-video',
            callbackKey: 'callback',
            callback: function(data) {
    			videos = data.results;
    			myStore.loadData(videos);
    			vcombo.options = myStore.data;
            }
        });
    
        var vcombo = new Ext.form.Select({
            name: 'myCombo',
            label: 'Videos',
            typeAhead: true,
            emptyText:'Select a Video',
            selectOnFocus:true,
            id:'selectVideo',
            displayField:'video_title',
            valueField:'video_id',
            //store: myStore,
    		options: myStore.data  
        });
        
        var formBase = {
    		scroll: 'vertical',
    		
    		items: [
    			{
    				xtype: 'fieldset',
    				title: 'Test Forms',
    				instructions: 'Please select above',
    				defaults: {
    					required: true,
    					labelAlign: 'left'
    				},
    				items: [
    				 vcombo, 
    				{
    					xtype: 'select',
    					// blah 
    				}
    				]
    			}
    		]
    		// ...  blah
    I've chosen to use JSONP.request as I've tried AjaxProxy and it didn't load the data. Also, I can't seem to check the proxy's onsuccess event.

    Anyways, the above code still seems to fail. The select box isn't populating, even though I could trace that the JSON objects have been loaded into the Store. How do you exactly pass the data into the options of the select? How does one 'refresh' that data to make the select box render with the latest information from the JSON request? Been wracking my brains over this... again, there were ways from Extjs, but hasn't seem to have been ported to Sencha Touch.

  7. #7
    Ext User tobinharris's Avatar
    Join Date
    Apr 2008
    Location
    Leeds, UK
    Posts
    34
    Vote Rating
    1
    tobinharris is on a distinguished road

      0  

    Default


    Bump on this one.

    I'm wondering if it would be easier to break away from the Component model and just use regular jQuery-style DOM mashing?

    T
    tobinharris.com
    Leeds, UK
    Co-author of NHibernate in Action
    Likes iPhone, iPad, HTML5, .NET and Ruby on Rails

    Developer and Founder at engineroomapps.com

  8. #8
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    You could do that. Our select box basically is a very simple wrapper around an HTML select element. We just need to add support for dynamically updating the options, and maybe binding a store to it to load the options. Both are very simple to implement and shouldn't add too much complexity to the component.

  9. #9
    Ext User tobinharris's Avatar
    Join Date
    Apr 2008
    Location
    Leeds, UK
    Posts
    34
    Vote Rating
    1
    tobinharris is on a distinguished road

      0  

    Default


    Thanks. You're right, it was pretty straight forward.

    PHP Code:
    //a select box that can be updated really easily
    //  E.g
    //  var s = Ext.getCmp('my-select-box')
    //  s.updateOptions([{text: '1', value: 'one'}])
    Ext.form.DataBoundSelect Ext.extend(Ext.form.Select, {    
        
    //updates the options
        //only tested in Safari web browser and iPhone/iPad emulator
        
    updateOptions: function(newData){
            var 
    select Ext.getCmp(this.id);
            
            
    //clear out old ones
            
    all select.getEl().select('option');
            
    all.remove();                                      
            
    //add in the new        
            
    for(var 0i<newData.length;i++){
                
    console.log(select.el.child('select'))
                
    select.el.child('select').createChild({tag'option'valuenewData[i].valuehtmlnewData[i].text});                            
            }
        }  
    });                 
    //let us use ths as an xtype in other place
    Ext.reg('databound-select'Ext.form.DataBoundSelect); 
    tobinharris.com
    Leeds, UK
    Co-author of NHibernate in Action
    Likes iPhone, iPad, HTML5, .NET and Ruby on Rails

    Developer and Founder at engineroomapps.com

  10. #10
    Sencha User
    Join Date
    Mar 2007
    Location
    Haarlem, Netherlands
    Posts
    1,243
    Vote Rating
    10
    TommyMaintz will become famous soon enough TommyMaintz will become famous soon enough

      0  

    Default


    Nice solution. Our implementation will be similar except that it will also be able to be bound to a store. It could listen for the datachanged event and call a function similar to your updateOptions.

Similar Threads

  1. reload store and display grid on OnChange event in select box
    By dpn in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 18 Dec 2009, 6:46 AM
  2. what are my options for a select box
    By nmaves in forum Community Discussion
    Replies: 4
    Last Post: 22 Apr 2008, 11:45 AM
  3. combo/select box?
    By Capi666 in forum Ext 2.x: Help & Discussion
    Replies: 0
    Last Post: 2 Apr 2008, 11:25 PM
  4. Replies: 0
    Last Post: 3 Jul 2007, 10:15 PM
  5. Getting selected value from select box
    By KRavEN in forum Ext 1.x: Help & Discussion
    Replies: 2
    Last Post: 15 Mar 2007, 4:33 AM

Thread Participants: 6

Tags for this Thread

Turkiyenin en sevilen filmlerinin yer aldigi xnxx internet sitemiz olan ve porn sex tarzi bir site olan mobil porno izle sitemiz gercekten dillere destan bir durumda herkesin sevdigi bir site olarak tarihe gececege benziyor. Sitenin en belirgin ozelliklerinden birisi de Turkiyede gercekten kaliteli ve muntazam, duzenli porno izle siteleri olmamasidir. Bu yuzden iste. Ayrica en net goruntu kalitesine sahip adresinde yayinlanmaktadir. Mesela diğer sitelerimizden bahsedecek olursak, en iyi hd porno video arşivine sahip bir siteyiz. "The Best anal porn videos and slut anus, big asses movies set..." hd porno faketaxi