I need to be able to hide the grid(what's under the Food titlebar) when the food title bar is tapped.
From what I have found I had to use Event Delegation, but for some reason my testing with an Alert() didnt do anything when I had click on Food TitleBar.
Can someone help me? (Using architect, so it would be easier for me to have the solution using architect since most of the code generated is ReadOnly -_-')
I've only used architect once. But Im pretty sure there is an interface to edit the code that it is generated. Here is the demo to implement a click on the titlebar.
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: ('SF' || 'SenchaFiddle'),
launch: function () {
Ext.define('MyApp.view.home', {
extend: 'Ext.Container',
xtype: 'homecontainer',
config: {
items: [{
xtype: 'toolbar',
title: 'test',
dock: 'top',
listeners: {
painted: function (element, opt) {
element.on('tap', function () {
alert('Test');
});
}
}
}]
}
});
Ext.Viewport.add(Ext.create('MyApp.view.home'));
}
});
Related
Can anybody tell How to implement back button functionality in sencha
Thanks
Use Navigationview component.NavigationView auto add Back button on top toolbar and handles functionality of Back.
config: {
title:'Home',
layout:'fit',
items:[
{
xtype:'titlebar',
title:'Home',
docked:'top',
items: [
{
xtype: 'button',
text: 'Logout',
align: 'right',
initialize: function () {
this.element.on({
tap: function () { Ext.Viewport.setActiveItem(Ext.widget('home'));
}
});
}
}
]
},
}
}
});
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]'
Back Ground : I am working on an MVC application using sencha touch 2. I am working on a page which has two tabs. Inside the first tab, I have a button inside a title bar.
Issue : I am not able to call anyother function from the button handler. I think, there is an issue with the scope of the calling function.
Here is my code.
Ext.define('WUPOC.view.WUHomePage', {
extend: 'Ext.TabPanel',
requires:['Ext.TitleBar','Ext.dataview.List','Ext.data.proxy.JsonP'],
alias: 'widget.wuHomePageView',
config: {
fullscreen: true,
defaults: {
styleHtmlContent: true
},
items: [{
title: 'Home',
iconCls: 'home',
items: [{
xtype: 'titlebar',
title: 'Hello',
docked: 'top',
items: [{
xtype: 'button',
text: 'LogOut',
ui: 'action',
itemId: 'newButton',
align: 'right',
handler : function(btn){
console.log('LogOut is tapped'); // This is printed
this.up.onNewButtonTap(); // Throws error
}
}],
}],
}, {
title: 'Contact',
iconCls: 'user',
html: 'Contact Screen'
}]
},
onNewButtonTap: function () {
alert('newNoteCommand');
},
});
I am getting the error as below.
Uncaught TypeError: Object function (selector) {
var result = this.parent;
if (selector) {
for (; result; result = result.parent) {
if (Ext.ComponentQuery.is(result, selector)) {
return result;
}
}
}
return result;
} has no method 'onNewButtonTap'
I think there is an issue with setting the scope of a button. Kindly help.
Thank you
First, up is a function so you need to call it this way :
this.up();
Then this.up() would only bring to the container of the button, which has no method onNewButtonTap. You could just keep doing up() until you get the right component but this would me more clever to do :
Add an xtype to your view
Use this xtype as a selector in the up function : this.up('myXType').onNewButtonTap();
Example
Hope this helps
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'm running Sencha Touch V2 beta and I'm looking at the most recent documentation.
I've followed the Ext.application instructions and am trying to properly lay out my MVC application. Unfortunately I can't figure out how to actually load up a View with this approach.
index.js
Ext.application({
name: 'rpc',
defaultUrl: 'home/index',
controllers: ['home'], //note: define controllers here
launch: function () {
console.log('Ext.application ~ launch'),
Ext.create('Ext.TabPanel', {
id: 'rpc-rootPanel',
fullscreen: true,
tabBarPosition: 'bottom',
items: [{
title: 'Home',
iconCls: 'home'
}]
});
Ext.create('Ext.viewport.Viewport', {
id:'rpc-rootPanel',
fullscreen: true,
layout: 'card',
cardSwitchAnimation: 'slide'
});
}
});
homeController.js
Ext.define('rpc.controller.home', {
extend: 'Ext.app.Controller',
views: ['home.index'],
stores: [],
refs: [],
init: function () {
console.log('rpc.controller.home ~ init');
},
index: function () {
console.log('rpc.controller.home ~ index');
}
});
indexView.js
Ext.define('rpc.view.home.index', {
extend: 'Ext.Panel',
id: 'rpc-view-home-index',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'button',
text: 'Videos',
handler: function () {
}
}],
html:'test'
}
});
Any help you might be able to offer would be greatly appreciated.
The new release follows MVC concepts introduced in ExtJS 4. You should read Architecture guide because Sencha Touch will be following the same arch.Here is my folder structure:
During development of your application, you should make use of sencha-touch-all-debug-w-comments.js in your html. This helps in debugging your application.
Here is the application class:
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: 'homepage'
}]
});
}
});
Note, how I have included the homepage view using the alias (xtype: 'homepage').
Here is the controller:
Ext.define('rpc.controller.Home', {
extend: 'Ext.app.Controller',
views: ['home.HomePage'],
init: function() {
console.log('Home controller init method...');
}
});
And finally, my Homepage view:
Ext.define('rpc.view.home.HomePage', {
extend: 'Ext.Panel',
alias: 'widget.homepage',
config: {
html: '<img src="http://staging.sencha.com/img/sencha.png" />'
},
initialize: function() {
console.log("InitComponent for homepage");
this.callParent();
}
});
The alias property is used to instantiate instance of the class when needed. You could also use the Ext.create method.
I hope this will help you get started with Sencha Touch.
Great answer by Abdel.
You can also do it though profiles, as demonstrated in this answer:
Sencha Touch 2.0 MVC tutorial