StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POIssue while changing viewport in sencha
text
Body
copied!<p>i am a very beginner to Sencha touch frame work. I am trying work with the viewport, but i am stuck with a strange problem. it throws "Uncaught TypeError: Cannot read property 'isComponent' of undefined exception. I know this question might be little unusual but i need to resolve this somehow. </p> <p>I have a java script file where i have login screen. </p> <pre><code>var App = new Ext.Application({ name: 'MyApp', useLoadMask: true, launch: function () { MyApp.views.loginPanel = new Ext.form.FormPanel({ scroll: 'vertical', standardSubmit : false, items: [ { xtype: 'fieldset', instructions: 'Please enter the information above.', defaults: { required: true, labelAlign: 'left', labelWidth: '50%', labelHeight: '50%' }, items: [ { xtype: 'textfield', name : 'username', id: 'username', label: 'user Name', useClearIcon: true, autoCapitalize : false }, { xtype: 'passwordfield', name : 'password', id: 'password', label: 'Password', useClearIcon: false } ] } ], dockedItems: [{ xtype: 'toolbar', dock: 'top', title: 'Login Screen' }, { xtype: 'toolbar', dock: 'bottom', items: [{ text: 'Exit', ui: 'confirm', handler: function() { form.exit(); } }, {xtype: 'spacer'}, { text: 'Reset', handler: function() { form.reset(); } }, { text: 'Login', ui: 'action', handler: function() { //TODO: handle the event MyApp.views.viewport.setActiveItem('nextScreen', { type: 'slide', direction: 'right' }); } } ] } ] }); MyApp.views.viewport = new Ext.Panel({ fullscreen: true, layout: 'card', cardAnimation: 'slide', items: [MyApp.views.loginPanel, MyApp.views.nextScreen] }) } }); </code></pre> <p>Now i have the nextScreen.js file. I am loading the JS file in my login.html.</p> <p>My nextScreen.js looks like this: </p> <pre><code> var opt = [ {text: 'Alabama', value: 'AL'}, {text: 'Alaska', value: 'ALS'}, {text: 'Indiana', value: 'IN'} ]; var stateList = new Ext.form.Select({ label : 'State', width: '100%', name: 'selectField', layout:'auto', options: opt, autoLoad : true, autoDestroy : true }); MyApp.views.nextScreen = new Ext.Panel({ fullscreen: true, id:'nextScreen', layout: 'fit', style: 'background-color:white', scroll:'vertical', html:'sample screen', items: [stateList] }); Ext.reg('nextScreen', MyApp.views.nextScreen); </code></pre>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload