I'm experimenting with Sencha Touch 2 and ran into a problem with the NavigationView, because it won't work... Everytime I try to push a view I get the error Uncaught TypeError: Cannot call method 'apply' of undefined and I don't know why...
If I initialize the first view inside the config-part of the navigation view it works fine, but if I try to push the exact same view into the NavigationView I get the error...
Here's some code of my views and controller:
The Controller:
Ext.define('svmobile.controller.MyController', {
extend: 'Ext.app.Controller',
alias: 'widget.mycontroller',
config: {
refs: {
mainView: 'main',
}
},
launch: function() {
this.callParent(arguments);
Ext.Viewport.add(Ext.create('svmobile.view.Main'));
this.getMainView().getNavigationBar().add(
{
xtype: 'navbutton',
align: 'right'
}
);
this.getMainView().push( //This is not working
{
xtype: 'hostspie'
}
);
},
...
The NavigationView:
Ext.define('svmobile.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'main',
alias: 'widget.main',
config: {
items: { //This way it works
xtype: 'hostspie'
}
}
});
The view to push:
Ext.define('modules.nagios.view.HostsPie', {
extend: 'Ext.Panel',
alias: 'widget.hostspie',
requires: [
...
],
config: {
layout: 'fit',
title: 'Dashboard',
items: [
{
xtype: 'polar',
...
}
]
}
});
Any ideas why it is not working as it should?
Did you try to define
Ext.define('modules.nagios.view.HostsPie', {
extend: 'Ext.Panel',
alias: 'widget.hostspie',
xtype: 'hostspie',
?
thanks for the suggestions. Finally i got it. It was the implementation of a button, that caused the problem. Now it works, thanks!
Related
I have a list:
Ext.define('my.view.ProgramList', {
extend: 'Ext.dataview.List',
xtype: 'programlist',
...
}
I would like this list to be the starting point for two navigation views:
Ext.define("my.view.ProgramNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'programnavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Ext.define("my.view.FacebookNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'facebooknavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Question: How do I handle tap events in the controller and deal with the two separately? In my controller I have:
refs: {
programlist: 'programlist',
facebooknavigationview: 'facebooknavigationview',
programnavigationview: 'programnavigationview', ...
},
I have tried this:
control: {
programlist: {
initialize: 'initProgramData'
},
facebooknavigationview: {
itemtap: 'showFacebookGroup'
},
programnavigationview: {
itemtap: 'showProgramData'
},
hoping the itemtap would bubble up and I can deal with differently in the facebooknavigationview vs. the programnavigationview, but it doesn't. I can put the itemtap in the programlist and it fires, but then I can't tell the difference between the two navigation views; I don't know if I can search the hierarchy, but that seems sort of... ugly. What am I missing?
You can add ref that use the parent to help differentiate where the taps are coming from for example if you have the following views:
Ext.define("my.view.ProgramNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'programnavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
Ext.define("my.view.FacebookNavigationView", {
extend: 'Ext.navigation.View',
xtype: 'facebooknavigationview',
...
items: [{
xtype: 'programlist',
itemId: 'programlist'
}]
}
you could use the following refs:
refs: {
programlist: 'programlist',
facebooknavigationview: 'facebooknavigationview programlist',
programnavigationview: 'programnavigationview programlist', ...
},
control: {
programlist: {
initialize: 'initProgramData'
},
facebooknavigationview: {
itemtap: 'showFacebookGroup'
},
programnavigationview: {
itemtap: 'showProgramData'
},
Now the item taps are listening when they are displayed inside of the parent views.
Is it possible to link to a tab.Panel view and have the second or third (not the first) tabItem be selected?
Currently i have a view that's linking to a tab.Panel that looks like this:
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
}
});
As of now when i load in the view, 'xtype-of-view-1' is set as the active tab.
But is it possible to load in the tab.Panel view but having one of the other tabs active and pressed?
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
},
initialize: function() {
var items = this.getItems(),
itemIdx,
Ext.each(items, function(item, idx) {
if (item.xtype == 'xtype-of-view-2') {
itemIdx = idx;
return false;
}
});
this.setActiveItem(itemIdx);
}
});
you could also watch the awesome video guide http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars
You have to add a controller to you app. in controller add a reference
refs: {
myview: 'myview',
list: 'anotherview list'
},
control : {
list: {
itemtap: 'onListItemTap'
}
},
onListItemTap: function (ct) {
var myview = this.getMyview();
myview.setActiveItem(1)
}
Please get read the sencha tutorial if you have no clue about MVC in sencha touch. Eg. http://docs.sencha.com/touch/2-0/#!/guide/controllers
you cand add bello config in to tab.panel
activeItem :2
for active third item insted of first
I have a controller and a TabPanel in Sencha Touch 2, I want to call a function when an element is tapped on the TabPanel:
TabPanel.js
Ext.define('app.view.principalTabPanel', {
extend: 'Ext.tab.Panel',
alias: 'widget.ptabpanel',
config: {
ui: 'light',
items: [
{
xtype: 'container',
itemId: 'idContnr',
title: 'tap Me!',
iconCls: 'bookmarks'
}
],
tabBar: {
docked: 'bottom',
ui: 'light'
}
}
});
controller.js
Ext.define('app.controller.mainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"ptabpanel #idContnr": {
tap: 'takePhoto'
}
}
},
takePhoto: function() {
console.log('toma foto!'); // Not Working :(
}
});
Instead of listening to 'tap' events on the tabs, you should listen to 'activeitemchange' on the tabpanel itself.
See http://docs.sencha.com/touch/2-0/#!/api/Ext.tab.Panel-event-activeitemchange
It works when listening/Query for the html-id generated by Sencha "ext-tab-2".
for Instance:
config: {
control: {
"ptabpanel #ext-tab-2": {
tap: 'onButtonTap'
}
}
},
But now the problem is how to change the "ext-tab-2" name generated by Sencha Touch 2
#Borck: thanks!.
You can assign IDs to the tab bar buttons by adding this configuration to the tab panel:
tabBar: {
id: 'myTabBar',
items:[
{
id: 'myFirstTab'
},
{
id: 'mySecondTab'
},
...
]
}
I started to use the Sencha Touch 2 MVC, but I can't overcome the problem below.
I have an Ext.application code:
Ext.application({
name: 'ProjectName',
appFolder: APP_URL + "app",
enableQuickTips: true,
extend: 'Ext.app.Controller',
phoneStartupScreen: 'LOGO.png',
controllers: ['Site'],
views: ['Viewport_login', 'Viewport_reg'],
layout: 'vbox',
launch: function() {
//bootstrap
Ext.create("Ext.Container", {
requires: [
],
items: [
Ext.create("ProjectName.view.Viewport_login", {}),
Ext.create("ProjectName.view.Viewport_reg", {})
]
});
return true;
}
});
view 'Viewport_login' code:
Ext.define('ProjectName.view.Viewport_login', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Login',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_login");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.login")
]
});
this.callParent();
}
});
View 'Viewpoer_reg' code:
Ext.define('ProjectName.view.Viewport_reg', {
extend: 'Ext.Panel',
requires: [
'ProjectName.view.Reg',
'ProjectName.view.Header'
],
fullscreen: true,
initialize: function() {
console.log("init viewpor_reg");
Ext.create("Ext.Container", {
//fullscreen: true,
style: 'background-color: white;',
layout: 'vbox',
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'Bheader'
},
Ext.create("widget.reg")
]
});
this.callParent();
}
});
view 'Header' code:
Ext.define('ProjectName.view.Header', {
extend: 'Ext.Panel',
alias: 'Bheader',
xtype: 'Bheader',
requires: [
'Ext.Img'
],
initialize: function() {
console.log("header inited");
},
config: {
cls: 'bg-holder',
items: [
Ext.create("Ext.Img", {
src: BASE_URL + 'assets/images/header3.png',
height: 35,
width: "100%",
style: "background-position: center 0px; "
})
]
}
});
And finally the 'Site' controller's code:
Ext.define('ProjectName.controller.Site', {
extend: 'Ext.app.Controller',
config: {
views: ['Viewport_login', 'Viewport_reg']
},
init: function() {
console.log('Init site controller');
// Start listening for events on views
this.control({
// example of listening to *all* button taps
'#login_button': {
tap: function () {
// HOW CAN I SWITCH TO 'VIEWPORT_REG' VIEW?
}
}
});
},
renderRegFOrm: function() {
},
onLaunch: function() {
console.log('onLaunch site controller');
},
});
First, I have a problem right now: The 'Header' does'nt appear if I load both views ('Viewport_login', 'Viewport_reg') in Container which created in Ext.application launch function. Can anyone help me, why?
Second, in the Controller code you can see the this.control(... section. How can I switch to other view in here?
From looking at your code, it appears that you only want one of login and register to appear at one time. I would recommend looking at the setActiveItem method for containers and switching views in this way.
I didn't understand your first question. Also, didn't understand why you have widget.login and widget.reg classes when you already have views called login and reg (can't you just use those?)
I've tried the simple MVC example like this How to properly activate an MVC View in Sencha Touch V2 .
It's ok, but let's say i want to add a button in the panel using a view.
I've tried to do following..
app.js :
Ext.Loader.setConfig({enabled: true});
Ext.application({
name: 'rpc',
appFolder: 'app',
controllers: ['Home'],
launch: function () {
Ext.create('Ext.tab.Panel',{
fullscreen: true,
tabBarPosition: 'bottom',
items:[{
title: 'Home',
iconCls: 'home',
html: '<img src="http://staging.sencha.com/img/sencha.png" />'
},{
title: 'Compose',
iconCls: 'compose',
xtype: 'mybutton'
}]
});
}
});
control
Ext.define('rpc.controller.Home', {
extend: 'Ext.app.Controller',
views: ['home.Button'],
init: function() {
console.log('Home controller init method...');
}
});
view
Ext.define('rpc.view.home.Button', {
extend: 'Ext.Panel',
alias: 'widget.mybutton',
initialize: function() {
this.items = [
{
xtype: 'button',
cls : 'demobtn',
flex : 1
}]
;
this.callParent();
}
});
The result i receive is :
Uncaught TypeError: Cannot read property 'length' of undefined
Where is the error? What is the right way to add the button using a view with MVC in Sencha Touch 2.0 ?
Thanks.
Try changing the way you define your rpc.view.home.Button view, I don't call initialize() in my views, I just do:
Ext.define('rpc.view.home.Button', {
extend: 'Ext.Panel',
xtype: 'mybutton',
config: {
items = [
{
xtype: 'button',
cls : 'demobtn',
flex : 1
}
]
}
});