PDA

View Full Version : Dynamically create a panel inside a controller



bagusflyer
29 Dec 2011, 7:24 AM
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
29 Dec 2011, 8:56 AM
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
29 Dec 2011, 2:21 PM
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
29 Dec 2011, 4:21 PM
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
30 Dec 2011, 7:51 AM
Can anybody help? Actually my question is how can I get the viewport instance generated by
autoCreateViewport?

Thanks

mitchellsimoens
30 Dec 2011, 7:56 AM
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
30 Dec 2011, 6:20 PM
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.