1. #1
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    wrongt is on a distinguished road

      0  

    Question Answered: Fill combo box with items

    Answered: Fill combo box with items


    Hi,
    can anybody help me when in a combo box is selected an item, in select event to add a variable who will fetch data from a link, and this data will be stored in other combo box. for example:

    Code:
    var sellected_item=null;
    var store_data;
    var second_combo = new Ext.form.field.ComboBox({
                    store: store_data
                    ,displayField : 'name'
                    ,mode:'remote'
                    ,name: 'combo2',
                    editable :false,
                    allowBlank:false,
                    fieldLabel : 'chose2',
                    mode:'remote',
                    });
    var firs_combo = new Ext.form.field.ComboBox({
                    store: [1,2]
                    ,mode:'local'
                    ,name: 'combo1',
                    editable :false,
                    allowBlank:false,
                    fieldLabel : 'chose',
                    listeners : {
                            select:function(combo, record, index){                            
                                sellected_item = this.getValue();                            
                                storetar=new Ext.data.JsonStore({
                                        storeId: 'myStore',
                                        isAutoLoad: true,
                                        proxy: {
                                            type: 'ajax',
                                            url: 'test.pl'
                                            reader: {
                                                type: 'json',
                                                root: 'images',
                                                idProperty: 'name'
                                            }
                                        },
                                        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
                                    }); 
                                
                                }
                                }
                    
                    });
    
    var login = new Ext.FormPanel({     
                ...
                items:[first_combo ,second_combo]
                ...
                    });
    when i select an item from firs_combo, the second_combo will store data from the varaible store_data who will be filed on the first_combo select event.
    Unfortunately this example don't work, when the item is selected i don't see that selected method to invoke a GET method who will fetch data from specified URL. Can anybody sugest me a right way how can i implemented this think ?

  2. In the select listener do something like:

    Code:
    select: function(combo) {
        second_combo.getStore().load({
            params: {
                myParam: combo.getValue()
            }
        });
    }
    Make sure you also fully specify the store for second_combo. You might want to set it initially disabled and enable it in the select listener.

  3. #2
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    In the select listener do something like:

    Code:
    select: function(combo) {
        second_combo.getStore().load({
            params: {
                myParam: combo.getValue()
            }
        });
    }
    Make sure you also fully specify the store for second_combo. You might want to set it initially disabled and enable it in the select listener.

  4. #3
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    wrongt is on a distinguished road

      0  

    Default


    Thanks for the replay.
    I do what you suggest, now my code look something like that:

    Code:
    //Store for combo2 
    var storetar=new Ext.data.Store({
                        proxy: {
                            type: 'ajax',
                            url: '/cgi-bin/test.pl',
                            reader: {
                                type: 'json',
                                root: 'images',
                                idProperty: 'name'
                                    }
                        },
                        fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}],
                        storeId: 'myStore'
                    });
    
    //declaration of combo2
    var second_combo = new Ext.form.field.ComboBox({
                    store: 'myStore'
                    ,valueField:'name'
                    ,displayField : 'name'                
                    ,name: 'combo2',
                    editable :false,
                    allowBlank:false,
                    fieldLabel : 'Text',
                    mode:'local',
                    disabled:true
    });
    
    //Declaration of combo 1
    var first_combo = new Ext.form.field.ComboBox({
                    store: new Ext.data.SimpleStore({    
                        id:0
                        ,fields: [ 'myText' ]
                        ,data:storedName
                        })
                    ,valueField:'myText'
                    ,displayField:'myText'
                    ,mode:'local'
                    ,name: 'combo1',
                    editable :false,
                    allowBlank:false,
                    fieldLabel : 'Name'    ,
                    listeners : {select:function(combo, record, index){
                                if(second_combo.isDisabled()){
                                second_combo.enable();}
                                second_combo.getStore().removeAll();
                                second_combo.getStore().load({                                
                                    params: {
                                        sellected_item: combo.getValue()
                                        }
                                });                            
                    }
    }
    });
    Now i front with a next problems:
    1. When i select items from first_combo, yes it is fetch data from url : test.pl, but whe i focus to second_combo it also fetch data from the store source , but without params sellected_item.
    2. When i select other item from first_combo, and after that i want to select item from second combo it show that items is loading , but this loading is never end.

    It is possible to make second_combo not to reload store after it is set by first_combo ?

  5. #4
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    The check for isDisabled() seems unnecessary, as does the removeAll().

    You've got the setting mode: 'local' on both of your comboboxes. This won't do anything in ExtJS 4. It should be queryMode: 'local'. I think that would explain your first problem.

    For your second problem, see this thread discussing a bug which may be what you're seeing:

    http://www.sencha.com/forum/showthread.php?152324

  6. #5
    Sencha User
    Join Date
    Oct 2011
    Posts
    6
    Vote Rating
    0
    wrongt is on a distinguished road

      0  

    Default


    Thanks for help skirtle now it seams work great.

  7. #6
    Ext JS Premium Member Spenna's Avatar
    Join Date
    Apr 2008
    Posts
    56
    Answers
    2
    Vote Rating
    0
    Spenna is on a distinguished road

      0  

    Default


    Is there any way of achieving this by using queryMode:'remote'?
    The following example sets filter on the second combos store, but items aren't loaded until combo is expanded, and i need to set default value to the first item loaded from the store.
    Code:
    {
                xtype: 'fieldset',
                title : 'Hvilket gassflaske er brukt?',
                defaults: {
                    valueField: 'id',
                    displayField: 'name',
                    xtype: 'combo',
                    msgTarget : 'side',
                    editable: false,
                    anchor: '100%',
                    allowBlank : false,
                    queryMode: 'remote'
                },
                items: [{
                    name: 'storage_id',
                    fieldLabel : 'Velg lagerplass',
                    store: 'Warehouses',
                    listeners:{
                         scope: this,
                         'select': function (combo, records) {
                             
                            combo.up('fieldset').down('combo[name=tank_id]').getStore().clearFilter();
                            combo.up('fieldset').down('combo[name=tank_id]').getStore().filter('facility_id', records[0].get('id'));
                            // combo.up('fieldset').down('combo[name=tank_id]').getStore().load();
                            delete combo.up('fieldset').down('combo[name=tank_id]').lastQuery;
                            combo.up('fieldset').down('combo[name=tank_id]').clearValue();
                            combo.up('fieldset').down('combo[name=tank_id]').clearInvalid();
                            // combo.up('fieldset').down('combo[name=tank_id]').setValue('301');
                        }
                    }
                },{
                    name: 'tank_id',
                    fieldLabel : 'Velg tank',
                    emptyText: 'Velg lager først',
                    displayField: 'code',
                    store: 'Tanks'
                }]
                
            }

  8. #7
    Sencha User skirtle's Avatar
    Join Date
    Oct 2010
    Location
    UK
    Posts
    3,338
    Answers
    498
    Vote Rating
    248
    skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of skirtle has much to be proud of

      0  

    Default


    Wouldn't you just need to put a load event listener on the second store to pick the first value?

  9. #8
    Ext JS Premium Member Spenna's Avatar
    Join Date
    Apr 2008
    Posts
    56
    Answers
    2
    Vote Rating
    0
    Spenna is on a distinguished road

      0  

    Default


    @skirtle: Thanks, using local queryMode and explicit loading of store works (when i apply loadmask-fix from referenced thread).

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar