controller control sencha touch 2 doesnt work - list

My controller seems that it doesnt work :
Controller:
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
NewsContainer: 'NewsContainer'
},
control:{
'NewsContainer home list':{
itemtap: function(){
console.log("item");
}
}
}
}
});
Home :
Ext.define('MyApp2.view.Home', {
extend: 'Ext.Panel',
xtype: 'home',
requires: [
'Ext.tab.Panel',
'Ext.dataview.List',
'MyApp2.view.NewsContainer'
],
config: {
title: 'Home',
IconCls:'home',
styleHtmlCls:'details',
styleHtmlcontent:'true',
scrollable:true,
layout:'fit',
items: [
{
xtype: "list",
store: "NewsStore",
itemTpl: new Ext.XTemplate (
'<div>',
'<img src="{enclosure}" />',
'<h1>{title}</h1>',
'</div>'
),
itemCls:'news-entries'
}
]
}
});
NewsContainer:
Ext.define('MyApp2.view.NewsContainer', {
extend: 'Ext.NavigationView',
xtype: 'NewsContainer',
config: {
autoDestroy: false,
title: 'Home',
IconCls:'Home',
items: [
{
xtype:'home'
}
]
}
});
and here is my app.js:
Ext.application({
name: 'MyApp2',
requires: [
'Ext.MessageBox'
],
controller:['Details'],
models:['MyApp2.model.News'],
views: [
'Main','Home','News','NewsContainer','Details'
],
stores:['NewsStore'],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('MyApp2.view.Main'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});
Can u tell me please what's wrong with my code ?there is no error in the console , nothing's happened when i tap :(

The problem is, that the controller doesn't find the reference to the list.
There is no error message, because the itemtap event from the list is not catched.
I think this controller code is going to work:
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
homeList: 'home list'
},
control:{
homeList : {
itemtap : function(list, index, item, record) {
console.log("item");
}
}
}
}
});

Adding
itemId : list in the view
and in the controller the next line :
main : 'main , it´s enough for you...
Ext.define('MyApp2.controller.Details',{
extend : 'Ext.app.Controller',
config: {
refs:{
main : 'main',
homeList: 'main list'
},
control:{
homeList : {
itemtap : function(list, index, item, record) {
console.log("item");
}
}
}
}
});

Related

Sencha Touch: List does not fire itemtap

I am building a small demo application using Sencha touch:
I have run into an issue with the list display followed by the itemtap even firing.I had this working in a previous application but cannot find out why its not firing in the current application
I have added itemtap methods as listeners, on the view, in the controller, but none of them fire. Any ideas on what I am missing?
Thanks In Advance for your help.
PS
Main.js
Ext.define('KapselApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainview',
requires: [
'KapselApp.view.ExpApproval',
'KapselApp.view.ExpApproval.Details',
'KapselApp.view.ExpApproval.Confirm'
],
config: {
autoDestroy: false,
navigationBar: {
ui: 'sencha',
items: [
{
xtype: 'button',
id: 'editButton',
text: 'Edit',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
},
{
xtype: 'button',
id: 'saveButton',
text: 'Save',
ui: 'sencha',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}
]
},
items: [
{ xtype: 'expApprovals' }
]
}
});
ExpApproval.view
Ext.define('KapselApp.view.ExpApproval', {
extend: 'Ext.dataview.List',
xtype: 'expApprovals',
config: {
title: 'Expense Approval',
cls: 'x-ExpApprovals',
items: [{
xtype: 'list',
//id: 'expApproval',
store: expApprovals,
itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
'From:{UserName} {WorkItem}',
'<div>Subject:{SUBJECT}</div>'
],
listeners: {
itemtap: function(view, index, item, e){
alert ('itemtap 1');
}
}
}],
itemtap: function(me, index, target, record){
alert ('itemtap');
//do other logic here
}
},
initialize: function() {
console.log ('KapselApp.view.ExpApproval:initialize: ');
}
});
Controller
Ext.define('KapselApp.controller.ExpApprovalApplication', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
expApprovalDetails: 'expapproval-details',
expApprovalList: 'expApprovals',
confirmExpApprovals: 'expapproval-confirm',
contacts: 'contacts',
showContact: 'contact-show',
editContact: 'contact-edit',
saveButton: '#saveButton'
},
control: {
main: {
push: 'onMainPush',
pop: 'onMainPop'
},
editButton: {
tap: 'onContactEdit'
},
expApprovalList: {
itemtap: 'onExpApprovalsSelect'
},
saveButton: {
tap: 'onContactSave'
},
editContact: {
change: 'onContactChange'
},
'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
}
},
onExpApprovalsSelect: function(list, index, node, record) {
alert ('onExpApprovalsSelect');
}
}
Ok .. found the sollution to your problem. You made the same mistake as I did. you overrode the initialize method in the list view without calling in the initiallize method "this.callParent()". By adding this in my code events started firing. I am sure it will work in yours.
So your List initialize handler should look something like this:
initialize: function(){
console.log('eventsView being initialized.');
this.callParent();
},
You can still use the code bellow to check which events are being fired for debugging in similar situations.
---- Previous post ----
I am facing a similar issue. I am extending Ext.dataview.List and have a controller capture the itemtap event but the event does not seem to be firing.
I tried adding the following code to capture all the events being fired... The list seems to fire the show event and the scroll events but no other such as itemtap, etc ...
Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',
fireEvent : function(eventName, args) {
console.log('Event:', eventName, args);
this.callOverridden(arguments);
//debugger;
},
fireAction : function(eventName) {
console.log('Action:',eventName);
this.callOverridden(arguments);
}
});
Try adding this code and see if you are getting the itemtap events.
Let me know if you make any progress.

Showing list in panel in sencha touch

I am basically making 2 horixzontal panel to split the screen for ipad.
I am trying to show list in left panel and a detail view in right panel but any how I am not getting the list.
below is the view which I am using:
Ext.define("Sencha.view.Main", {
extend: 'Ext.Container',
config: {
layout: 'hbox',
items: [
{
xtype: 'panel',
width: 300,
items: [
{
xtype: "list",
id:'contactlist',
store:'Items',
}
],
},
{
xtype: 'panel',
html: 'Message Detail view goes here ....'
}
]
}
});
Below is the store which I am using:
Ext.define('Sencha.store.Items', {
extend: 'Ext.data.Store',
config: {
model: 'Sencha.model.Item',
defaultRootProperty: 'items',
root: {
items: [
{
text: 'Drinks',
},
{
text: 'Snacks',
}
]
}
}
});
i think you might be missing the flex config option in the list as stated in the sencha docs and the itemTpl
{
xtype: "list",
id:'contactlist',
flex: 1,
itemTpl: {text},
store:'Items',
}
docs:
"The flex of this item if this item item is inside a Ext.layout.HBox or Ext.layout.VBox layout."
also there is no storeId set for the store. storeId: 'Items',

Sencha Touch2: Cannot close floating panel on Button click?

I am new to Sencha Touch2, i have problem while destroying the floating panel. I show floating Panel with details on top of ListView on list item click. I want the floating panel to be destroyed on 'Cancel' Button clicked.can anyone please help me. Thanks.
FloatingPanel.js:
Ext.define('CustomList.view.FloatingPanel', {
extend: 'Ext.Panel',
alias: 'widget.FloatingPanel',
xtype:'datepanel',
config: {
id:'floatingPanel',
modal:true,
centered: true,
hideOnMaskTap:true,
width:'500px',
height:'650px',
items:[
{
styleHtmlCls:'homepage',
tpl:'<h4>{name1}</h4><h3>{name2}</h3><h3>{name3}</h3><h3>{name4}'
},
{
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('floatingPanel');
panelToDestroy.destroy();
}
}
}]
}
]
}
});
Here is my List,
ShowList.js:
Ext.define('CustomList.view.ShowList',{
extend:'Ext.List',
xtype:'showlist',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'CustomList.controller.Main'
],
config:{
items:[
{
xtype:'list',
id: 'listitems',
onItemDisclosure: true,
store:'StoreList',
scrollable:'true',
itemTpl: [
'{firstname}'
],
itemTpl: '<font color="#990000"><h2>{lastname}</h2></font>{firstname}'
}
]
}
});
Here is my controller
Main.js
Ext.define('CustomList.controller.Main', {
extend: 'Ext.app.Controller',
requires:['CustomList.view.FloatingPanel'],
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');
var name1 = record.get('name1');
console.log('Item was tapped on the Data View'+name1);
var floatingDatePanel = Ext.create('CustomList.view.FloatingPanel');
var data = record.getData();
floatingDatePanel.getAt(0).setData(data);
Ext.Viewport.add(floatingDatePanel);
}
});
One obvious problem is that:
Ext.getCmp('floatingPanel');
will be applied for case id: 'floatingPanel' whereas you use itemid:'floatingPanel'
To retrieve itemId, you can make use of Ext.ComponentQuery:
Ext.ComponentQuery.query('#floatingPanel')[0];

Not getting record on itemtap sencha list

When Taping items the listener is getting invoked but the value is null. My Code:
Ext.define('tablet.SelectCategories', {
extend: 'Ext.navigation.View',
xtype: 'selectcategorypanel',
id: 'SelectCategories',
requires:[
],
initialize:function(){
this.callParent();
var jsonObject = Ext.create('Tablet')
.make_webservice_call_post('get_categories');
Ext.getCmp('select_category_list')
.setData(jsonObject.info);
console.log(jsonObject.info);
},
config: {
//title : 'Select Categories',
//iconCls: 'team',
//styleHtmlContent: true,
// scrollable: true,
layout: {
type: 'card'
},
items: [
{
fullscreen: true,
mode: 'MULTI',
xtype: 'list',
itemTpl: '{name}',
autoLoad: true,
id:'select_category_list',
store: {
fields: ['active','created','description','name']
},
listeners: {
itemtap: function (list, records) {
console.log('Sel');
console.log(records.name);
var names = [];
Ext.Array.each(records, function (item) {
names.push('<li>' + item.data.name + '</li>');
}); // each()
Ext.Msg.alert('You selected ' + records.length + ' item(s)',
'<ul>' + names.join('') + '</ul>');
} // selectionchange
}
// handler:self.itemClick
}
Getting undefined in console.log(records.name);
Your method signature for itemtap is also wrong. It should be -
itemtap: function(list, index, target, record) {
console.log('Item tapped');
console.log(record.get('name'));
// and your rest of the code.
}
Check the documentation for the itemtap event here, and read up more about stores here.

Sencha 2.0 change title toolbar dynamically

I would dynamically change the title of my list titlebar. This is my app.js where you can view my app (see var list where there is the toolbar item and title that I would change)
How can I do this?
Thanks.
var mainForm ;
var mainFormPanel={};
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var list= Ext.create('Ext.List', {
fullscreen: true,
store: 'MyStore',
itemTpl: '{txt}',
items: [{
xtype: 'titlebar',
docked: 'top',
title:'change dinamically this title!!!!'
}] // items (list)
}); // create()
Ext.application({
glossOnIcon: false,
autoMaximize: false,
icon: {
57: 'lib/sencha-touch/resources/icons/icon.png',
72: 'lib/sencha-touch/resources/icons/icon#72.png',
114: 'lib/sencha-touch/resources/icons/icon#2x.png',
144: 'lib/sencha-touch/resources/icons/icon#114.png'
},
phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
launch: function() {
mainForm = Ext.create('Ext.form.Panel', {
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name : 'distance',
label: 'Distance'
},
{
xtype: 'textfield',
name : 'quantity',
label: 'Quantity'
}
]
});
mainFormPanel={
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
mainForm.setValues({
distance: '300',
quantity: '25'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
mainForm.reset();
}
}
]
};
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
//each item in a tabpanel requires the title configuration. this is displayed
//on the tab for this item
title: '1-tab',
layout:'fit',
//next we give it some simple html
items: [mainForm,mainFormPanel],
//then a custom cls so we can style it
cls: 'card1'
},
{
//title
title: '2-tab',
layout:'fit',
items: [list],
cls: 'card2'
},
{
//title
title: '3-tabs',
//the items html
items: {
html: 'mia auto',
centered: true
},
//custom cls
cls: 'card3'
}
]
});
}
});
Ext.List component's superclass is Ext.DataView., not Ext.Panel.
Hence, it is not possible to directly add / dock any item inside the Ext.List component.
So, I recommend you to wrap your Ext.List component inside Ext.Panel.
Do it like this,
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var listpanel = new Ext.Panel({
layout: 'fit', // important to make layout as 'fit'
items: [
{
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'Before Change title',
items: [
{
xtype:'button',
text:'Change Title',
align:'right',
listeners : {
tap : function() {
Ext.getCmp('myTitle').setTitle('After Title Change');
}
}
}
]
},
{
//Definition of the list
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
}]
});
....
....
{
title: '2-tab',
layout:'fit',
items: [listpanel],
cls: 'card2'
},
....
....
Sample Output :-
Before changing the title
After changing the title
FYI, If you look inside the Ext.List class in Sencha Docs, you will see the following code inside initComponent() method,
if (Ext.isDefined(this.dockedItems)) {
console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}