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'
},
...
]
}
Related
I am new to sencha touch. I am creating a app in which i am using a html . When that span is clicked a function in controller should be called . I have attached the view and controller with this question.
View
Ext.define('SlideNav.view.Viewport', {
extend: 'Ext.Container',
xtype: 'app_viewport',
requires: [
'Ext.TitleBar'
],
config: {
fullscreen: true,
layout: 'hbox',
items : [
{
docked: 'top',
xtype: 'panel',
height: 40,
style:'background:white ;height:40px;color:black',
items:[
{
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}
],
listeners: {
initialize:function(){
this.fireEvent('onPopulateDashBoardData', this);
}
/* tap: {
fn: function(event, el){ console.log("tapped!");
this.fireEvent('onPopulateDashBoardData', this);
},
element: 'element',
delegate: '#TopNews'
}*/
}
},
{
xtype : 'main',
cls: 'slide',
// Needed to fit the whole content
width: '100%'
}, {
xtype : 'navigation',
width : 250
}]
}
});
controller.js
Ext.define('SlideNav.controller.App',{
extend: 'Ext.app.Controller',
config:{
refs:{
app_viewport: 'app_viewport',
main : 'main',
navigation : 'navigation',
navBtn : 'button[name="nav_btn"]',
},
control : {
app_viewport:{
onPopulateDashBoardData:'toggleNav'
},
navBtn : {
tap : 'toggleNav'
},
navigation : {
itemtap : function(list, index, target, record){
this.toggleNav();
console.log(record);
alert(record._data.title);
}
}
}
},
/**
* Toggle the slide navogation view
*/
toggleNav : function(){
var me = this,
mainEl = me.getMain().element;
console.log('hai');
if (mainEl.hasCls('out')) {
mainEl.removeCls('out').addCls('in');
me.getMain().setMasked(false);
} else {
mainEl.removeCls('in').addCls('out');
me.getMain().setMasked(true);
}
}
});
In the above question , i want to click a text with id TopNews from and want to call a function toggleNav in controller. I tried to fire a event with the name onPopulateDashBoardData and tried to use that event in the controller. But it is also not working . What should you know.
The way you are referring the text is wrong.
Do this:-
items:[{
name: 'top_news', // add this name for referring
html:'<div><span style="padding:10px;position:absolute" id="TopNews">Top News</span><span style="padding:13px;position:absolute;right:10px;font-size:12px">MORE</span></div>'
}]
Controller:-
refs:{
menu: container[name='top_news']
},
control : {
menu : {
initialize: function(container) {
container.element.on({
tap: 'toggleNav',
scope: this,
delegate: '#TopNews'
});
}
}
}
I'm following through this sencha touch tutorial, however, I could not get tap event to fire, I've tried with and with out using id to get a reference..but no luck..here is my code..
View:
Ext.define("NotesApp.view.NotesListContainer", {
extend: "Ext.Container",
xtype: "NotesListView",
config: {
items: [{
xtype: "toolbar",
docked: "top",
title: "My Notes",
items:[{
xtype: "spacer",
}, {
xtype: "button",
text: "New",
ui: "action",
action: "addNote",
id: "new-note-btn"
}]
}]
}
});
Controller:
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
notesListView: 'NotesListView',
newNoteBtn: 'notesListView button[action=addNote]'
},
control: {
tap: "onNewNote"
}
},
onNewNote: function(){
console.log("New button has been tapped!!");
},
launch: function() {
this.callParent();
console.log("Launch in Notes.js");
},
init: function(){
this.callParent();
console.log("Init in Notes.js");
}
});
I couldn't workout what I'm missing..when I tap on the New button in the toolbar, no event seems to be firing as theres nothing in the console logs. I've tried Safari, Chrome and Firefox..no joy..Could you please take a quick look and see if could find what I'm missing? Is there a way to debug Sencha Touch apps?
Try to use:
newNoteBtn: 'button[action=addNote]'
or:
newNoteBtn: '#new-note-btn'
instead of:
newNoteBtn: 'notesListView button[action=addNote]'
I have a button at the top right of every page that I want to link to a certain page within my application. Is there a way to give each instance of this button the same behaviour? and if so where would the code sit so that it affects every page? Many thanks in advance.
View:
items: [
{
title: '<span class="logo"></span>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets'
}
]
}
]
Controller (specific to one page):
config: {
refs: {
main: 'ListNav'
},
control: {
"button#buytickets": {
tap: 'buytickets'
}
}
},
buytickets: function(button, e, eOpts) {
this.getMain().push({
xtype: 'buyticketspanel'
});
},
You could just put the button at the top of your Viewport, in the app.js file:
Ext.application({
name: 'MyApp',
requires: [],
views: [/*Views*/],
controllers: [/*Controllers*/],
viewport: {
layout: 'vbox'
},
launch: function() {
var me = this;
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add([
{
title: '<span class="logo"/>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets',
handler: me.doBuyTickets
}
]
},
Ext.create('MyApp.view.Main', {flex: 1})
]);
},
doBuyTickets: function() {
//do stuff
}
});
****EDIT****:
However, you won't be able to re-purpose that bar as the title bar for a NestedView. If you need to have that, then you might be best served with a utils file that has a method to add a button to a toolbar, and just reuse that in the init function of any NestedView components.
Utils.js:
Ext.define("MyApp.util.Utils", {
singleton: true,
addBuyButton: function(toolbar)
{
toolbar.add({
text: 'Buy Tickets',
align: 'right',
handler: function() {
//do stuff
}
});
}
});
Controller:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
nestedList: 'nestedlist'
},
control: {
app-page: {
initialize: 'initAppPage'
}
}
},
initAppPage: function()
{
MyApp.utils.addBuyButton(this.getNestedList().getNavigationBar());
}
});
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
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