Results 1 to 2 of 2

Thread: ExtJS:based on combobox values hide and unhide the fields and pass it to springMVC

  1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    7

    Question ExtJS:based on combobox values hide and unhide the fields and pass it to springMVC

    I have two dropdowns in extjs,based on the first dropdwon,the second dropdown populates.This is working fine and i am able to pass the values to springMVC,but problem comes when i have to hide/unhide the textfields based on the second dropdown,hiding/unhiding works fine,but i am unable to pass the parametrs to SpringMVC. Here is my .js files. Could anybody tell where i have to correct,


    Code:
    Ext.Loader.setConfig({
    enabled: true
    });
    Ext.require(['*']);
    
    var country = Ext.create('Ext.data.Store', {
    fields: ['abbr', 'name'],
    data: [{
        "abbr": "USA",
        "name": "USA"
    }, {
        "abbr": "UK",
        "name": "UK"
    },
    
    
    ]
    });
    
    var states = Ext.create('Ext.data.Store', {
    fields: ['id', 'abbr', 'name'],
    data: [{
        "id": "New York",
        "abbr": "USA",
        "name": "New York"
    }, {
        "id": "New Jersey",
        "abbr": "USA",
        "name": "New Jersey"
    }, {
        "id": "London",
        "abbr": "UK",
        "name": "London"
    }, {
        "id": "Hampshire",
        "abbr": "UK",
        "name": "Hampshire"
    }]
    });
    Ext.define('App.view.countryPanel', {
    extend: 'Ext.form.Panel',
    alias: 'widget.CountryPanel',
    id: 'countrypanel',
    
    
    title: 'Country',
    frame: true,
    width: 400,
    fieldDefaults: {
        labelWidth: 200
    },
    bodyPadding: '15 16 10',
    
    height: 200,
    id: 'countrypanel',
    
    method: 'POST',
    
    
    
    
    items: [
    
    
    
    {
        xtype: 'combo',
        id: 'con',
        name: 'con',
        fieldLabel: 'Country',
        displayField: 'name',
    
        emptyText: 'Select a Country',
        valueField: 'abbr',
        store: country,
        listeners: {
            'select': {
                fn: function (combo, value) {
    
                    var comboState = Ext.getCmp('statelist');
                    comboState.bindStore(states);
                    comboState.clearValue();
                    comboState.store.filter('abbr', combo.getValue());
    
                    states = Ext.create('Ext.data.Store', {
                        fields: ['id', 'abbr', 'name'],
                        data: [{
                            "id": "New York",
                            "abbr": "USA",
                            "name": "New York"
                        }, {
                            "id": "New Jersey",
                            "abbr": "USA",
                            "name": "New Jersey"
                        }, {
                            "id": "London",
                            "abbr": "UK",
                            "name": "London"
                        }, {
                            "id": "Hampshire",
                            "abbr": "UK",
                            "name": "Hampshire"
                        }]
                    });
    
    
    
                }
            }
        }
    }, {
        xtype: 'combo',
        id: 'statelist',
        name: 'statelist',
        fieldLabel: 'Stated',
        displayField: 'name',
        emptyText: 'Select states',
        valueField: 'id',
        store: states,
        listeners: {
            'select': {
                fn: function (combo, value) {
                    var sample = combo.getValue();
    
    
    
    
                    if (sample == 'London') {
    
    
                        Ext.getCmp('Tower').getEl().show();
    
    
                    } else {
    
                        Ext.getCmp('Tower').getEl().hide();
                        Ext.getCmp('Liberty').getEl().show();
    
                    }
    
    
                    var comboState = Ext.getCmp('statelist');
                    comboState.bindStore(states);
                    comboState.clearValue();
                    comboState.store.filter('abbr', combo.getValue());
    
    
    
                }
            }
        }
    }, {
        xtype: 'textfield',
        id: 'Tower',
        name: 'Tower',
        fieldLabel: 'ClockTower',
        hidden: true,
    
        allowBlank: false
    
    }, {
        xtype: 'textfield',
        id: 'Liberty',
        name: 'Liberty',
        fieldLabel: 'Liberty',
        hidden: true,
        minWidth: 20,
        allowBlank: false
    
    }],
    buttonAlign: 'center',
    buttons: [
    
    {
        text: 'Submit',
        handler: function () {
    
            var sspanel = Ext.getCmp('countrypanel');
            var form = sspanel.getForm();
    
    
            form.submit({
    
    
                url: 'country.htm',
    
    
                success: function (form, action) {
    
    
                    Ext.Msg.alert('Success');
    
    
    
    
                },
    
                failure: function (form, action) {
    
                    Ext.Msg.alert('failure');
                }
    
    
    
            });
    
    
        }
    
    },
    
    {
    
        text: 'Reset',
        handler: function () {
            var sspanel = Ext.getCmp('countrypanel');
            var form = sspanel.getForm();
            form.reset();
        }
    }
    
    ]
    
    });

  2. #2
    Sencha User
    Join Date
    Jan 2012
    Posts
    1,376
    Answers
    347

    Default

    It's because you clear the value of the statelist combobox after it has been selected.
    Code:
                
               xtype: 'combo',            id: 'statelist',
                name: 'statelist',
                fieldLabel: 'Stated',
                displayField: 'name',
                emptyText: 'Select states',
                valueField: 'id',
                store: states,
                listeners: {
                    'select': {
                        fn: function (combo, value) {
                            var sample = combo.getValue();
                            if (sample == 'London') {
                                Ext.getCmp('Tower').getEl().show();
                            } else {
                                Ext.getCmp('Tower').getEl().hide();
                                Ext.getCmp('Liberty').getEl().show();
                            }
                            var comboState = Ext.getCmp('statelist');
                            comboState.bindStore(states);
                            comboState.clearValue(); // <- this clear the value of the statelist combobox
                            comboState.store.filter('abbr', combo.getValue());
                        }
                    }
                }
    Also, there are some extra in your code. See my fix below
    Code:
    var country = Ext.create('Ext.data.Store', {
        fields: ['abbr', 'name'],
        data: [{
            "abbr": "USA",
            "name": "USA"
        },{
            "abbr": "UK",
            "name": "UK"
        }]
    });
    
    
    var states = Ext.create('Ext.data.Store', {
        fields: ['id', 'abbr', 'name'],
        data: [{
            "id": "New York",
            "abbr": "USA",
            "name": "New York"
        }, {
            "id": "New Jersey",
            "abbr": "USA",
            "name": "New Jersey"
        }, {
            "id": "London",
            "abbr": "UK",
            "name": "London"
        }, {
            "id": "Hampshire",
            "abbr": "UK",
            "name": "Hampshire"
        }]
    });
    
    
    Ext.define('App.view.countryPanel', {
        extend: 'Ext.form.Panel',
        alias: 'widget.CountryPanel',
        id: 'countrypanel',
        title: 'Country',
        frame: true,
        width: 400,
        fieldDefaults: {
            labelWidth: 200
        },
        bodyPadding: '15 16 10',
        height: 200,
        id: 'countrypanel',
        method: 'POST',
        items: [{
            xtype: 'combo',
            id: 'con',
            name: 'con',
            fieldLabel: 'Country',
            displayField: 'name',
            emptyText: 'Select a Country',
            valueField: 'abbr',
            store: country,
            listeners: {
                'select': {
                    fn: function (combo, value) {
                        var comboState = Ext.getCmp('statelist');
    //                  comboState.bindStore(states);
                        comboState.clearValue();
                        comboState.store.clearFilter();
                        comboState.store.filter('abbr', combo.getValue());
    //                      states = Ext.create('Ext.data.Store', {
    //                          fields: ['id', 'abbr', 'name'],
    //                          data: [{
    //                              "id": "New York",
    //                              "abbr": "USA",
    //                              "name": "New York"
    //                          }, {
    //                              "id": "New Jersey",
    //                              "abbr": "USA",
    //                              "name": "New Jersey"
    //                          }, {
    //                              "id": "London",
    //                              "abbr": "UK",
    //                              "name": "London"
    //                          }, {
    //                              "id": "Hampshire",
    //                              "abbr": "UK",
    //                              "name": "Hampshire"
    //                          }]
    //                      });
                    }
                }
            }
        }, {
            xtype: 'combo',
            id: 'statelist',
            name: 'statelist',
            fieldLabel: 'Stated',
            displayField: 'name',
            emptyText: 'Select states',
            valueField: 'id',
            store: states,
            listeners: {
                'select': {
                    fn: function (combo, value) {
                        var sample = combo.getValue();
                        if (sample == 'London') {
                            Ext.getCmp('Tower').getEl().show();
                            Ext.getCmp('Liberty').getEl().hide();
                        } else {
                            Ext.getCmp('Tower').getEl().hide();
                            Ext.getCmp('Liberty').getEl().show();
                        }
    //                  var comboState = Ext.getCmp('statelist');
    //                  comboState.bindStore(states);
    //                  comboState.clearValue();
    //                  comboState.store.filter('abbr', combo.getValue());
                    }
                }
            }
        }, {
            xtype: 'textfield',
            id: 'Tower',
            name: 'Tower',
            fieldLabel: 'ClockTower',
            hidden: true,
            allowBlank: false
        }, {
            xtype: 'textfield',
            id: 'Liberty',
            name: 'Liberty',
            fieldLabel: 'Liberty',
            hidden: true,
            minWidth: 20,
            allowBlank: false
        }],
        buttonAlign: 'center',
        buttons: [{
            text: 'Submit',
            handler: function () {
                var sspanel = Ext.getCmp('countrypanel');
                var form = sspanel.getForm();
                form.submit({
                    url: 'country.htm',
                    success: function (form, action) {
                        Ext.Msg.alert('Success');
                    },
                    failure: function (form, action) {
                        Ext.Msg.alert('failure');
                    }
                });
            }
        },{
            text: 'Reset',
            handler: function () {
                var sspanel = Ext.getCmp('countrypanel');
                var form = sspanel.getForm();
                form.reset();
            }
        }]
    });

Tags for this Thread

Posting Permissions

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