Question

I have an strange problem with sencha touch. Changing the value in the select field stuck the screen. I have an application, where there are Select fields, And on change of select field value I am applying some rules. Rule is to remove all the screen elements and add it freshly.

Below is the code snapshot.

Now, It is working absolutely fine with the chrome, safari browser and the iPad device browser. But now it is giving strange problem in iPhone and Android device. The screen gets stuck. No events are allowed after changing the value in select field.

Steps Taken; Also, I have put alert as logger at each step of the source code to ensure the infinite loop. I have also put the exception handlers to ensure the error occurred. No errors, neither ant infinite loop running which might cause memory/run-time issue.

    App.views.MySampleScreen = Ext.extend(Ext.Panel, {
        initComponent : function() {
            var titlebar = {
                dock : 'top',
                xtype : 'toolbar',
                cls: 'x-panel-title',
                title : "Home Screen"       
            };

           var  buttonbar = {
                xtype : 'toolbar',
                dock : 'bottom',
                cls: 'x-panel-footer',
                items : [
                    {xtype : "spacer"}                
                ]
            };


            var myFieldSet = new Ext.form.FieldSet({
                xtype: 'fieldset',
                id : 'myFieldSet',
                name: 'myFieldSet'

            });

           var formBase = new Ext.form.FormPanel({
                ui: 'round',
                id: 'standardFormBase',
                items: [myFieldSet],
            });

            Ext.apply(this, {
                scroll: 'vertical',
                pinHeaders: true,
                dockedItems : [titlebar, buttonbar],
                items : [formBase],

                listeners: {
                    beforeactivate: function(panel) {
                        createAndInitScreen();
                    }
                   }
            });

            App.views.MySampleScreen.superclass.initComponent.call(this);
        }   

    });

    Ext.reg('App.views.MySampleScreen', App.views.MySampleScreen);

    function createAndInitScreen(){

        var myFieldSet = Ext.getCmp("myFieldSet");
        myFieldSet.removeAll(true);

         var stateList2 = new Ext.form.Select({
            label: 'State',
            name: 'state',
            id: 'stateLis2t',
            widht: '100%',
            autoLoad: true,
            labelWidth: '40%',
           options: [{
                            text: 'Test', value: 'Test'
                        }, {
                            text: 'Test2', value: 'Test2'
                        }, {
                            text: 'Test3', value: 'Test3'
                        }],
            listeners: {
                afterrender: function(ele) {

                },
                change: function(field, value) {
                    createAndInitScreen(); // Here is the problem
                        // if i remove this then this works, but my need 
                        //is to call CreateAndInitScreen after value change in select ()
                }            
            }
        });

        myFieldSet.items.add(stateList2);

        myFieldSet.show();
        myFieldSet.doLayout();     
}

Answer 1

I have fixed the issue with a work around. Instead of creating the control for each time, i am removing and adding the data from the screen elements. Thant works fine for my requirements. Anyways thank you all for your support.