I need to help a big problem.
When i get event "tap" Ext.button, with follow code:
var nav = button.up("MainNav");
if (!this.waitingView) {
this.waitingView = {xtype: "WaitingShowView"};
}
nav.push(this.waitingView);
My Navigation pushed double same View "WaitingView".
Also, I have to back twice to go back root view.
How do i do? Thanks.
is it firing the 'tap' event twice? or just executing two nav.push(this.waitingView) ?
Also, try executing it from the button handler instead of catching the tap event:
** Update:
{
xtype: 'button',
text: 'myButton',
handler: function() {
this.up("MainNav").push({
xtype: 'WaitingShowView'
});
}
}
try this one..
yourTasksAction:function(){
if(this.delayedTask == null){
//setup a delayed task that is called IF double click is not later detected
this.delayedTask = new Ext.util.DelayedTask(
function(){
/*
Put your button action code here
*/
this.delayedTask = null;
}, this);
this.delayedTask.delay(300);
}
},
Related
I am working on Sencha Touch 2 application where some buttons are dynamically created depending upon the number of videos returned from JSON.
I have created the buttons but how to set action on those buttons. I mean how to identify, which button was pressed.
Normally in config we have:
config:
{
layout: 'vbox',
fullscreen: true,
listeners:
[
{
delegate: '#button1',
event: 'tap',
fn: 'itemClicked'
},
],
This action will be set for 'button1' only. So how do I set action of 10 buttons for example. and in my action how can I identify which button was pressed.
Thanks,
Thanks guys,
I am adding these buttons to a panel. I solved it using this code:
var b_Panel = Ext.getCmp('bottompanel');
for(var i=0; i<20; i++)
{
var aButton = Ext.create('Ext.Button',
{
text:'button'+i,
margin:8,
id:'button'+i,
itemId:i,
listeners:
{
tap: function()
{
console.log("Item ID is: "+this.getItemId());
}
}
});
b_Panel.add(aButton);
}
Thanks,
I have this defined in my view:
View:
Ext.define("MyApp.view.Welcome", {
extend: 'Ext.Panel',
alias: 'widget.welcomeview',
config: {
///...items... removed lines for brevity..
{
xtype: 'button',
id : 'btnSignInNow',
text: 'Sign In Now',
listeners: {
tap: function() {
this.fireEvent("onSignInNowTap", this);
console.log("onSignInNowTap fired"); /// <-- I see this in console.log
}
}
}
I can see this in the log. But in my controller it is not receiving the event. Can anybody shed any light on this?
Controller:
config: {
refs: {
welcomeView: 'welcomeview'
},
control: {
welcomeView: {
onSignInNowTap: function () {
alert('bla!'); <!-- I Don't see this in console.log
}
}
}
}
I appreciate I might have missed something, but is there any way that I can debug to find out how/where this event is being lost or ignored?
Try
this.parent.fireEvent("onSignInNowTap", this);
instead of
this.fireEvent("onSignInNowTap", this);
that way parent view will be firing event instead of button.
Sometimes if button is nested deep inside you might have to do something like this
this.parent.parent.parent....fireEvent("onSignInNowTap", this);
Write your view's listeners inside initialize,
you will get reference to this in the initialize
Ext.define("MyApp.view.Welcome", {
extend: 'Ext.Panel',
alias: 'widget.welcomeview',
initialize:function(){
this.callParent();
listeners: {
tap: function() {
this.fireEvent("onSignInNowTap", this);
console.log("onSignInNowTap fired");
}
}
}
Thanks ThinkFloyd. Your solution worked. I had to to use this.parent.fireEvent(...) and then the controller was able to catch it...
I'm just getting started with Sencha Touch 2 and I have never worked with Sencha Touch 1.x before. I've just finished this tutorial (which is the best starter tutorial I have found so far) http://miamicoder.com/2012/how-to-create-a-sencha-touch-2-app-part-1/ and now I want to go ahead and extend this Notes App.
I have a controller and 2 views, a list view and an edit view. In the edit view I want to be able to delete the current record. The delete function is in the controller. After tapping the delete button, I want to show a confirmation dialog ("Are you sure you want to delete...?"). After the user presses yes, the delete function should be called.
Now my problem is: How do I call the controllers delete function from within Ext.Msg.confirm?
Here are the relevant snippets of my code. Please let me know if something important is missing.
Please see the "onDeleteNoteCommand" function. "this.someFunction" obviously doesn't work since "this" is a DOMWindow.
Ext.define('TestApp2.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
noteEditorView: 'noteeditorview'
},
control: {
noteEditorView: {
deleteNoteCommand: 'onDeleteNoteCommand',
}
}
},
onDeleteNoteCommand: function() {
console.log('onDeleteNoteCommand');
var noteEditor = this.getNoteEditorView();
var currentNote = noteEditor.getRecord();
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
//controller functions!! how to call them?
this.deleteNote(currentNote);
this.activateNotesList();
}
}
);
},
deleteNote: function(record) {
var notesStore = Ext.getStore('Notes');
notesStore.remove(record);
notesStore.sync();
},
activateNotesList: function() {
Ext.Viewport.animateActiveItem(this.getNotesListView(), this.slideRightTransition);
},
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
launch: function() {
this.callParent();
Ext.getStore('Notes').load();
console.log('launch main controller');
},
init: function() {
this.callParent();
console.log('init main controller');
}
});
When you enter callback function of Ext.Msg the scope changes from controller scope to global scope (window), so you must set up it as parameter of confirm method:
Ext.Msg.confirm(
"Delete note?",
"Do you reall want to delete the note <i>"+currentNote.data.title+"</i>?",
function(buttonId) {
if(buttonId === 'yes') {
this.deleteNote(currentNote);
this.activateNotesList();
}
},
this // scope of the controller
);
For more info please check sencha docs: http://docs.sencha.com/touch/2-0/#!/api/Ext.MessageBox-method-confirm
1.) I need to add 2 buttons, one below another. My working so far is demonstrated below; It only shows one button, but how can i add another button with a different button image below this button ?
2.) When the user clicks a button, i need to navigate to another screen. How can i do this ?
I need the equivalent of the following objective-c code ?
View1 *view1 = [[View1 alloc] initWithNibName:#"View1" bundle:nil];
[self.navigationController pushViewController:View1 animated:YES];
3.) How can i add a navigation Bar (equivalent to the navigation bar shown in iPhone)
The code for the 1st question;
{
items:[
{
xtype:'button',
text: 'Submit',
ui:'confirm',
handler: function(){
var values = Ext.getCmp('contactForm').getValues();
Ext.Ajax.request({
url: 'http://loonghd.com/service/',
failure: function (response) {
//do something
}, success: function (response) {
// do something
}
});
}
}
]
}
1) For getting two buttons one below the other, you can add two separate buttons (with different ui property) as childs of a form panel. I think, this is what you need.
Just like this,
....
....
items : [
{
xtype:'button',
text: 'Submit',
ui:'confirm', // makes the button color as green
handler: function(){
var values = Ext.getCmp('contactForm').getValues();
Ext.Ajax.request({
url: 'http://loonghd.com/service/',
failure: function (response) {
//do something
},
success: function (response) {
// do something
}
});
}
},
{
xtype:'button',
text:'Second button',
ui:'decline', // makes the button color as red.
listeners : {
tap : function() {
Ext.Msg.alert('You just clicked Second button');
}
}
}
]
....
....
2) 3) For your 2nd and 3rd question, navigationview is the solution.
Solution posted by M-x is great, but it's very advanced level example & also difficult to understand at first instance.
Here's an easy solution of navigatioview from Sencha Docs.
//create the navigation view and add it into the Ext.Viewport
var view = Ext.Viewport.add({
xtype: 'navigationview',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
//items can have titles
title: 'Navigation View',
padding: 10,
//inside this first item we are going to add a button
items: [
{
xtype: 'button',
text: 'Push another view!',
handler: function() {
//when someone taps this button, it will push another view into stack
view.push({
//this one also has a title
title: 'Second View',
padding: 10,
//once again, this view has one button
items: [
{
xtype: 'button',
text: 'Pop this view!',
handler: function() {
//and when you press this button, it will pop the current view (this) out of the stack
view.pop();
}
}
]
});
}
}
]
}
]
});
Maybe a navigation view will work for you? It's the same idea but it's like starting with a UITableView:
http://docs.sencha.com/touch/2-0/#!/example/navigation-view
In the app/controller/Application.js, when you tap on a contact, the detail view gets pushed. All the source is in the examples directory.
onContactSelect: function(list, index, node, record) {
var editButton = this.getEditButton();
if (!this.showContact) {
this.showContact = Ext.create('AddressBook.view.contact.Show');
}
// Bind the record onto the show contact view
this.showContact.setRecord(record);
// Push the show contact view into the navigation view
this.getMain().push(this.showContact);
},
When an item from a list gets selected i execute the following lines of code.
this.details = Ext.create('EventManager.view.EventInfoView');
this.getNavigationView().push(this.details);
so i create a new view, and push it on a navigationview.
In my controller i listen for a tap on an acceptEventButton which is inside newly created view.
Ext.define('EventManager.controller.eventController', {
extend: 'Ext.app.Controller',
config: {
refs: {
acceptEventButton: '#acceptEventButton'
},
control: {
"acceptEventButton": {
tap: 'onAcceptButtonTap'
}
}
},
...
The first time this view gets placed on the navigationview, the button tap works.
When i hit the back button and push another view the button does nothing.
I'd like to solve this by doing the logic as it is now. I'd rather not add the eventlisteners myself while i'm creating the view and then push it.
Any ideas where this problem resides and how to fix?
A new version of sencha architect was released which allows adding not listed properties.
I solved this by adding an action field on my button, and in my controller reacting to that action.
{
xtype: 'button',
id: 'acceptEventButton',
ui: 'confirm',
text: 'Accept',
action: 'acceptEvent'
}
and in my controller i have the following lines of code
control: {
"button[action=acceptEvent]": {
tap: 'onAcceptButtonTap'
}
}
i faced same problem earlier and it was solved by setting autoDestroy: false,at config of my navigationView
its very well working after applying false to this autoDestroy property.hope it will work for you too.
You should change your query as follows:
control: {
"button[id='acceptEventButton']": {
tap: 'onAcceptButtonTap'
}
}
As an extra information: You can also use xtype in these queries.
For example if you have a navigationview as follows:
Ext.define('app.view.Pages', {
extend: 'Ext.NavigationView',
xtype: 'pages',
...
}
and you push a list to it like this:
Ext.define('app.view.ItemList', {
extend: 'Ext.dataview.List',
xtype: 'itemlist',
...
}
then you can write your query as follows:
control: {
"pages itemlist": {
itemtap: 'onItemTap'
}
}