button tap not reacting when view gets added a 2nd time - sencha-touch-2

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'
}
}

Related

Sencha Touch2: Passing data from Controller to floating Panel not working

I am new to Sencha Touch2 and facing problem while passing data from my Controller to Floating panel on listitem tap. Here is my controller implementation code:
Ext.define('CustomList.controller.Main', {
extend: 'Ext.app.Controller',
requires:['CustomList.view.DatePanel'],
config: {
refs: {
listView: 'listitems'
},
control: {
'main test2 list': {
activate: 'onActivate',
itemtap: 'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onItemTap: function(view, index, target, record, event) {
console.log('Item was tapped on the Data View');
Ext.Viewport.add({
xtype: 'DatePanel'
});
}
});
Am able to get data in the controller and DatePanel.js is my floating Panel.
DatePanel.js:
Ext.define('CustomList.view.DatePanel', {
extend: 'Ext.Panel',
alias: 'widget.DatePanel',
xtype:'datepanel',
config: {
itemid:'DatePanel',
modal:true,
centered: true,
hideOnMaskTap:true,
width:'500px',
height:'650px',
items:[
{
styleHtmlCls:'homepage',
tpl:'<h4>{name3}</h4>'
},
{
xtype:'toolbar',
docked:'bottom',
items:[{
text:'OK',
ui:'confirm',
action:'ShowTurnOverReport',
listeners : {
tap : function() {
console.log('Ok');
}
}
},
{
text:'Cancel',
ui:'confirm',
action:'Cancel',
listeners : {
tap : function() {
console.log('Cancel');
var panelToDestroy = Ext.getCmp('datepanel');
panelToDestroy.destroy();
Ext.Viewport.add(Ext.create('CustomList.view.Test2'));//Test.js is my list Panel
}
}
}]
}
]
}
});
Help me out in destroying the panel on 'Cancel' Button.
Can anyone please help me. Thanks.
Create instance of panel you want to add first.
var floatingDatePanel = Ext.create('Yourapp.view.YourDatePanel');
Next get data of selected list item on itemTap
var data = record.getData();
Assign this data to floatingDatePanel with setData() method
UPDATE,
after looking at your panel code, I guess you want to set data to first item in panel ie
{
styleHtmlCls:'homepage',
tpl:'<h4>{name3}</h4>'
}
Right ? If so then you need to change following code
floatingDatePanel.setData(data);
to
floatingDatePanel.getAt(0).setData(data);
Because, it is first item inside panel that is having a template assigned and hopefully the same where you want to set data.
then finally, you can add this panel into viewport with
Ext.Viewport.add(floatingDatePanel);

List item disclosure isn't firing inside a controller

I'm trying to get the item disclosure to work in a list item in Sencha Touch using a controller ref. But the event never seems to fire/receive inside controller. All of the examples I've seen have the list item using a listener but I thought that wasn't very MVC so I'm trying to do it this way (is there any reason why they use listeners instead of a controller?)
In my view, the list is an item inside the EnquiryIndex view.
When I do this in a console window it returns the list correctly so I know the ref is working ok:
Ext.ComponentQuery.query("enquiryindexview list")[0]
See below example:
Ext.define('MyApp.controller.EnquiryIndex', {
extend: 'Ext.app.Controller',
requires: [
],
config: {
refs: {
enquiryIndexViewRef: 'enquiryindexview list'
},
control: {
'enquiryIndexViewRef': {
disclose: 'onDiscloseEnquiryIndex'
}
}
},
onDiscloseEnquiryIndex: function (rec) {
// never gets here!
}
});
Try this
config: {
control: {
'enquiryindexview list': {
disclose: 'onDiscloseEnquiryIndex'
}
}
or this
config: {
refs: {
enquiryIndexViewRef: 'enquiryindexview list'
},
control: {
enquiryIndexViewRef: {
disclose: 'onDiscloseEnquiryIndex'
}
}
Hope this helps
What you might have missed doing is adding this line in the app.js
controllers: ['EnquiryIndex'],
Try this out, it should work now.

Events not caught by Controller

I am trying to respond to a view-fired event inside a controller. The event does fire, but the controller action is never called.
View:
Ext.define("MyApp.view.Dashboard", {
extend: 'Ext.Container',
xtype: 'my_dashboard',
config: {
items: [
{
xtype: 'dataview',
listeners: {
itemtap: function(sender, index, elem, record) {
// fires with param, e.g. 'inbox'
this.fireEvent(record.get('name'));
}
}
}
...
Controller:
Ext.define('MyApp.controller.Dashboard', {
extend: 'Ext.app.Controller',
config: {
control: {
'my_dashboard': {
'inbox': 'showInbox',
...
}
}
},
showInbox: function () {
/* never gets called */
},
...
What am I doing wrong?
UPDATE:
I found a solution, but it feels very hacky. I added a bubbleEvents config to the dataview and the my_dashboard view, and the events started making their way up to the controller.
Since the dashboard can have a variable number of items, I don't know which events I need to bubble up. Of course, I could bubble up all possible dashboard events, but that just seems like a massive kludge.
Should the view fire an application event instead, e.g. MyApp.app.fireEvent()?
I would put an itemId on the dataview.
itemId: 'my_dashboard_dataview'
Then in your controller...
control: {
'#my_dashboard_dataview': {
'itemtap': 'showInbox',
...
}
}
UPDATE
Here is some code that should get you started:
Controller:
Ext.define('MyApp.controller.Dashboard', {
extend: 'Ext.app.Controller',
config: {
control: {
'my_dashboard': {
painted: 'onDashboardPainted',
inbox: 'showInbox'
}
}
},
onDashboardPainted: function(dashboard, eOpts) {
dashboard.down('dataview').on('itemtap', function(sender, index, elem, record){
dashboard.fireEvent(record.get('name'));
//check the console to make sure you the value is: inbox
console.log(record.get('name'));
});
},
showInbox: function () {
console.log('showInbox init');
},
This is definately a scope issue... in your controller add a painted function for my_dashboard... the first function variable will be the my_dashboard component itself:
painted: function(dashboard,...
Now in the painted function add the listener dynamically:
dashboard.down('dataview').on( ... rest of listener code ...
Now inside of the listener do dashboard.fireEvent(....);
Sorry for the formatting im on my mobile, if u cant get it to work i will post code tomorrow

Adding a button and navigating between views

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);
},

Sencha Touch 2.0 Controller can't handle clicks to my list

Hey guys i just started with sencha touch 2.0 and now i have a problem while using mvc in my project. I have a simple list and i want to open a detail view, with a tab on a list item. So i tried to tell my controller to handle clicks on this list but it doesn't work at all.
What am i doing wrong?
Here's my controller
Ext.define('MyFirstApp.controller.Main', {
extend: 'Ext.app.Controller',
views: ['Home', 'People'],
models: ['People'],
stores: ['Peoples'],
config: {
refs: {
people: 'peoplelist'
},
control: {
people: {
itemtap: 'testFunc'
}
}
},
testFunc: function() {
console.log("something was clicked");
}
});
'peoplelist' is the xtype of my list.
Thank you for your help :-)
Nothing wrong with the code you posted. It works fine with this List:
Ext.define('MyFirstApp.view.People', {
extend: 'Ext.List',
xtype: 'peoplelist',
config: {
fullscreen: true,
itemTpl: '{first} {last}',
store: 'Presidents'
}
});
It doesn't work if xtype is declared inside the config.
Yes, the way you are doing it is correct but you're not getting a reference to the list correctly.
Try this:
config: {
control: {
'peoplelist': {
itemtap: 'testFunc'
}
}
}
This video and code helped me a lot: http://learn.sencha.com/learn/meet-the-list-component/
Updated link: http://docs.sencha.com/touch/2.2.1/#!/video/list
You should have your people/itemtap event inside listeners (not control).
http://docs.sencha.com/touch/2-0/#!/guide/events