[SOLVED]
I am following this tutorial link
I have a buttons in my Main view like so
Ext.define('Sencha.view.Main', {
extend: 'Ext.Panel',
config: {
items:[
{
text:'hello',
xtype:'button',
action:'pingHomeBadge',
}
]
}
});
And my main controller looks like
Ext.define('Sencha.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
starButton:'button[action=pingHomeBadge]',
},
control: {
starButton: {
tap:'incrementHomeBadge',
},
}
},
incrementHomeBadge: function() {
alert("hello");
},
});
The button gets displayed but when I click on the button nothing happens. Anybody know what I am doing wrong? I pretty much copy pasted the code from the tutorial. Thanks
I suggest you try this way:
Ext.define('Sencha.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
// starButton:'button[action=pingHomeBadge]',
},
control: {
'button[action=pingHomeBadge]': {
tap:'incrementHomeBadge',
},
}
},
incrementHomeBadge: function() {
alert("hello");
},
});
Also check whether this controller is getting loaded or not. As in mentioned in the app.js
UPDATE
Actually they are not in your control, but your refs look fine... i dont see anything with your code so i suspect the issue lies elsewhere... why not just compare your source with the source code of the tutorial? http://github.com/senchalearn/Tabs-and-Toolbars
Related
I am currently setting view titles in a sencha touch 2 view like so:
initialize: function() {
this.callParent();
var translator = Ext.create('MyApp.util.Translation');
this.config.title = translator.translateData('pagetitle.detail');
}
The translation class just looks up a string from a javascript object based ont the key provided in the translator.translateData function.
With this approach when the view has loaded the title shifts slightly to right (40 px or so).
I have also tried placing this in a view listener activate with similar results.
What is the correct method for dynamically setting a view title in ST2?
You can do this way via the Controller
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
titlebar: {
autoCreate: true,
selector: '#mytitlebar',
xtype: 'titlebar'
}
},
control: {
"titlebar#mytitlebar": {
initialize: 'onTitlebarInitialize'
}
}
},
onTitlebarInitialize: function(component, options) {
var me = this;
me.getTitlebar().setTitle("Second Title");
// OR IN YOUR CASE:
var translator = Ext.create('MyApp.util.Translation');
me.getTitlebar().setTitle(translator.translateData('pagetitle.detail'));
}
});
Views:
Ext.define('MyApp.view.MyContainer', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'titlebar',
docked: 'top',
itemId: 'mytitlebar',
title: 'First Title'
}
]
}
});
ExtJS 4.1 & DeftJS 0.6.8
The documentation says "References to view components can be established via the control annotation and view-relative component query selectors"
Documentation example:
control: {
submitButton: 'panel > button[text="Submit"]'
}
So in my case I want to get access to a menu's button that is nested like this:
...
extend: 'Ext.tree.Panel',
lid: 'mytreepanel',
dockedItems: [{
xtype: 'toolbar',
lid: 'mybbar',
items: [{
xtype: 'splitbutton',
lid: 'mysplitbutton',
menu: {
lid: 'mymenu',
items: [{
lid: 'createFolder',
text: 'Create folder',
}]
}
}]
}]
My attempts:
control: {
createFolder: {
selector : '[lid=createFolder]',
// selector : 'menu[lid=createFolder]',
// selector : 'mytreepanel > menu[lid=createFolder]',
// selector : 'treepanel > toolbar > splitbutton > menu[lid=createFolder]',
listeners: {
click: 'createFolder'
}
}
}
Nothing worked. Can anyone point me to the right direction?
I don't know in which documentation you found your example (control: { submitButton: 'panel > button[text="Submit"]' }), but it doesn't work for me at all.
By following sencha documentation I've created following controller class:
Ext.define('Pandora.controller.Main', {
extend: 'Ext.app.Controller',
init: function() {
this.control({
'[lid=mytreepanel] menu[lid=mymenu] menuitem[lid=createFolder]': {
click: function(){ alert(123); }
}
});
}
});
With this definition of control click is working. Also note how the click handler is attached. You must provide callback, not a string.
The solution was to add mixins: ['Deft.mixin.Controllable'] which I forgot to make the view controllable.
So now everything works fine with:
createFolder: {
selector : '[lid=createFolder]',
listeners: {
click: 'createFolder'
}
}
i have four separete view, adding these four view in single tabview as shown below.
Tab View Code:
Ext.define("SLS.BRND.WEB.view.MainTabbarView", {
extend: 'Ext.tab.Panel',
xtype: 'MainTabbarView',
requires: ['Ext.data.proxy.JsonP', 'Ext.TitleBar', 'Ext.Video', 'SLS.BRND.WEB.view.GallerysView', 'SLS.BRND.WEB.view.FloorView'],
config: {
tabBarPosition: 'bottom',
items: [
{
xclass: "SLS.BRND.WEB.view.GlobalNavigationView",
docked: "top",
scrollable: false
},
{
xclass: 'SLS.BRND.WEB.view.ApartmentView'
},
{
xclass: 'SLS.BRND.WEB.view.SpecificationView'
},
{
xclass: 'SLS.BRND.WEB.view.FloorView'
},
{
xclass: 'SLS.BRND.WEB.view.GallerysView'
}
]
}
});
In controller onbuttontap function i am calling above 'MainTabbarView' page as shown below. i have set setActiveItem(0); to display first tabitem among four i.e (xclass: 'SLS.BRND.WEB.view.ApartmentView'). when i set like this setActiveItem(0) it will dispaly first view page but without data(blank screen).if i set like this setActiveItem(1), it will dispaly second view page with data. then i thought may be problem in first page, so i have changed order of page view in 'MainTabbarView'. again i set setActiveItem(0) then it showing active page but without data. i have keep on changed setActiveItem(0) to 1,2,3 its working fine and also data displaying. but for the setActiveItem(0) data is not displaying. can any help me . how to resolve this issue. thank you
Controller Code :
Ext.define("SLS.BRND.WEB.controller.ApartmentController", {
extend: "Ext.app.Controller",
requires: ['Ext.data.proxy.JsonP'],
config: {
refs: {
projectsPage: "projectspage",
mainTabbarView: "MainTabbarView",
},
control: {
projectsPage: {
BtnApartments: "onAptButtonTap"
}
}
},
onAptButtonTap: function () {
var ApartmentTabbar = this.getMainTabbarView();
ApartmentTabbar.setActiveItem(0);
Ext.Viewport.animateActiveItem(ApartmentTabbar, this.slideLeftTransition);
},
activateNotesList: function () {
Ext.Viewport.animateActiveItem(this.getHomepage(), this.slideRightTransition);
},
slideRightTransition: { type: 'slide', direction: 'right' },
slideDownTransition: { type: 'flip', direction: 'down' },
slideLeftTransition: { type: 'fade', direction: 'left' }
});
Your onAptButtonTap function is not in the right place, you put it in the config as you should put it after the config like so :
...
config: {
refs: {
projectsPage: "projectspage",
mainTabbarView: "MainTabbarView",
},
control: {
projectsPage: {
BtnApartments: "onAptButtonTap"
}
},
...
},
onAptButtonTap: function () {
var ApartmentTabbar = this.getMainTabbarView();
ApartmentTabbar.setActiveItem(0);
Ext.Viewport.animateActiveItem(ApartmentTabbar, this.slideLeftTransition);
},
...
I have two views. The User view has some text and a button. I want to use that button to switch to the second view. But i don't know how this works with sencha touch 2. When i press the button on the "UserView" (which is the first view), then i get the following error:
Uncaught Error: SYNTAX_ERR: DOM Exception 12
This is basically how my code looks right now:
app.js
Ext.Loader.setConfig({ enabled: true });
Ext.setup({
viewport: {
autoMaximize: false
},
onReady: function() {
var app = new Ext.Application({
name: 'AM',
controllers: [
'Main'
]
});
}
});
The Main controller
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
views : ['User'],
init: function() {
this.getUserView().create();
this.control ({
'#new': {
tap: function() {
alert('aaaa');
}
}
});
}
});
And the two views:
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
fullscreen:true,
items: [{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
2nd view
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
fullscreen: true,
html: 'w00t'
}
});
Here is your application written the way it should be. Here are a few notes about the changes I made:
You should call Ext.application instead of Ext.setup when creating your MVC application.
All root views should be defined inside your app.js.
You no longer need to use this.control() in your controllers. You can simply use the control configuration in the config block.
You should define all views in the views config of Ext.application.
Instead of creating the view in init, do it in launch. This is components should be added into the view.
app/view/User.js
Ext.define('AM.view.User', {
extend: 'Ext.Container',
config: {
items: [
{
xtype: 'button',
text: 'New',
id: 'new'
}
],
html: 'Testing<br />'
}
});
app/view/New.js
Ext.define('AM.view.New', {
extend: 'Ext.Container',
config: {
html: 'w00t'
}
});
app/controller/Main.js
Ext.define('AM.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'#new': {
// On the tap event, call onNewTap
tap: 'onNewTap'
}
}
},
launch: function() {
// When our controller is launched, create an instance of our User view and add it to the viewport
// which has a card layout
Ext.Viewport.add(Ext.create('AM.view.User'));
},
onNewTap: function() {
// When the user taps on the button, create a new reference of our New view, and set it as the active
// item of Ext.Viewport
Ext.Viewport.setActiveItem(Ext.create('AM.view.New'));
}
});
app.js
Ext.application({
name: 'AM',
// Include the only controller
controllers: ['Main'],
// Include all views
views: ['User', 'New'],
// Give the Ext.Viewport global instance a custom layout and animation
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
}
});
I also suggest you checkout the great guides over on the Sencha Touch API Docs, as well as checking out the Sencha Forums as they are very active and are a great source of information.
I'd like to get a reference to a view from my controller in Sencha Touch 2.
I followed the explanation in this question :
Getting a refernce to an auto-instantiated Sencha Touch 2 view
But still, the render and show function in this.control in my controller never get called.
This is my app.js :
Ext.application({
name: 'App',
appFolder: 'src',
controllers: ['Home'],
launch: function () {
Ext.Viewport.setActiveItem({xtype: 'homeView'});
}
});
This is my view :
Ext.define('App.view.HomeView', {
extend: 'Ext.Panel',
alias : 'widget.homeView',
config: {
html : ['<h1>Sencha Touch Web App</h1>']
},
initialize: function() {
this.callParent();
}
});
and this is my controller :
Ext.define('App.controller.Home', {
extend : 'Ext.app.Controller',
views : ['HomeView'],
init: function() {
this.control({
'homeView' : {
render: function() {
console.log('Render method called!');
},
show: function() {
console.log('Show method called!');
}
}
})
}
});
Does anyone have any idea what I'm doing wrong?
Thanks a lot.
Franziska
The render handler is not called for me either. The way I do it is either use show, which will be called every time the component is showed, or use a custom event for when the view is initialised, e.g.
Ext.define('App.view.HomeView', {
extend: 'Ext.Panel',
alias : 'widget.homeView',
config: {
html : ['<h1>Sencha Touch Web App</h1>']
},
initialize: function() {
this.fireEvent('render');
this.callParent();
}
});