PDA

View Full Version : Screen gets stuck in sencha touch selct field change listener



Nilanchala
30 Jan 2012, 4:38 AM
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();
}

mitchellsimoens
30 Jan 2012, 9:38 AM
The picker is still showing when you remove it? That's the error?

Nilanchala
30 Jan 2012, 8:59 PM
functionality wise every thing is working but the screen gets stuck after change event in Select field.