Dynamically create a panel inside a controller

[bagusflyer]

I encountered another problem: the panel I created in my controller doesn't show up. Here is my code:

app.js



Ext.Loader.setConfig({
enabled : true,
paths : {
Override : 'overrides'
}
});
Ext.application({
name: 'App',
autoCreateViewport: true,
models: ['User'],
stores: ['MyProfile'],
controllers: ['Root'],
init: function () {
console.log('app initialize');
},
launch: function() {
console.log('app launch');
}
});


Root.js (controller)




Ext.define('App.controller.Root', {
extend: 'Ext.app.Controller',

stores: ['MyProfile'],

init: function() {
console.log('init root controller');
},

onLaunch: function() {
console.log('onLaunch root controller');


var store = App.store.myProfile;
if ( store )
{
// store.load();
if ( store.first() )
{
// do something
return;
}
}

this.showProfile();
},

showProfile: function() {
console.log('Show user profile');

var panel = Ext.create('Ext.Panel', {
html: 'This is my panel'
});
Ext.Viewport.add(panel);
},
}

});



Viewport.js




Ext.define('App.view.Viewport', {
extend : 'Ext.Panel',
xtype : 'app-viewport',
config : {
fullscreen : true,
layout : 'card',


items:
[{
xtype : 'toolbar',
docked : 'top',
title : APPNAME,
items :
[{
ui : 'action',
itemId : LEFTBTN,
},{xtype:'spacer'},
{
ui : 'action',
itemId : RIGHTBTN,
}]
}]
}
});


The showProfile function is called but the new panel is never show up.Can anybody help? What's wrong with my code? Thanks.

I found the most difficult part of Sencha touch is the relationship of different element. It's too flexible. For example, you create a panel, you can use Ext.create, or something like define then config: {} etc. I've spent 1 week at 1.1 and now at 2.0 and I got totally no clue at all.

[mitchellsimoens]

Ext.Viewport is basically a container using card layout. Since you have autoCreateViewport set to true, it will automatically create the App.view.Viewport class and since it has fullscreen to true is should be added to Ext.Viewport as the first card. Now when you create your Ext.Panel in showProfile and use Ext.Viewport.add to add it, it is probably added as the 2nd card. Inspect the DOM to make sure that's what is going on. You will need to switch to the new card you added.

[bagusflyer]

Actually my intension was to add the panel to my own viewport. Can I use use App.view.Viewport to add new panel? Thanks

[bagusflyer]

I got the following error message if I use App.view.Viewport.add(panel):

'Undefined' is not a function(Evaluating 'App.view.Viewport.add(panel)')

[bagusflyer]

Can anybody help? Actually my question is how can I get the viewport instance generated by
autoCreateViewport?

Thanks

[mitchellsimoens]

App.view.Viewport is the class not the instance. In your controller you could setup a ref:


refs : [
{
ref : 'viewport',
selector : 'app-viewport'
}
]

The in your controller, you should be able to execute this.getViewport() and it should (hopefully) return the viewport instance for you.

[bagusflyer]

Great. It works. Thank you.

I found Sencha Touch is quite difficult because it's like like normal OO language which has a strict class definition so that we can find properties, methods easily. I'll still need more time to be used to it.