Why navigation bar have different sizes ? - Sencha Touch - sencha-touch

I have 3 view are "Home,Category,Info".
This Home panel :
This Category panel :
And This List panel :
In list panel.The navigation bar has different sizes of Home panel and Category panel.
How do I fix ?
Thank you.
----Update----
Code Home view:
Ext.define('Catalog.view.Home', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
config: {
// activeItem: 1,
id: 'mynavigationview',
navigationBar: {
items: [
{
xtype: 'button',
text: 'Categories',
id: 'category',
translate: true,
translationKey: 'navigationbar.category',
align: 'left',
action : 'Categories',
// handler: function(me) {
// var bar = me.up('navigationview').getNavigationBar();
// // bar[bar._hidden ? 'show' : 'hide']();
// }
}
]
},
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
tabBarPosition: 'bottom',
items:[
{
title: "All Apps",
xtype: 'list',
id:'Applist',
itemTpl: new Ext.XTemplate(
'<img src="http://61.47.41.108:9999/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
store: {
autoLoad: true,
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
}
});
Code List view:
Ext.define('Catalog.view.Navigation', {
extend: 'Ext.navigation.View',
xtype: 'navigation',
requires: ['Ext.data.Store'],
config: {
// navigationBar: false,
title: 'Categories',
items: [
{
xtype: 'list',
id: 'Catlist',
itemTpl: '<span style="font-size:16px;" id="cattname">{name}</span>',
store: {
storeId: 'myStore',
autoLoad: true,
fields: ['id','name'],
sorters: [{
property:'name',
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/categories.json',
reader:{
type: 'json',
rootProperty:'Catalog'
}
}
}
}
]
}
});

It is due to the styles added by styleHtmlContent: true. Try setting it on both the views, or remove it from both.

Related

Sencha Dataview with Store not showing

I'm new at sencha touch, and i'm having trouble using dataview with an ajax store.
Here follow my code:
On my app.js on the launch part:
Ext.define('SocializeApp.model.Friends', {
extend: 'Ext.data.Model',
config: {
fields: [
{name:'name' ,type:'string'},
{name:'id' ,type:'string'},
{name:'img' ,type:'string'}
]
}
});
Ext.define('SocializeApp.store.FriendStore', {
extend: 'Ext.data.Store',
config: {
model: 'SocializeApp.model.Friends',
storeId: 'FriendStore',
proxy: {
type: 'ajax',
url: 'http://socialize.localhost.com/friends.php',
reader: {
type: 'json',
rootProperty: 'friends'
},
autoLoad: 'true'
},
}
});
Ext.Viewport.add(Ext.create('SocializeApp.view.Main'));
In the Main.js
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
xtype: 'dataview',
store: 'FriendStore',
scrollable: {
direction: 'vertical'
},
tpl: ['{img} {id} {name}']
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
}
});
I'm kind of lost, i used the store as a variable to test and in the console it gave me the correct data, but no optout for this dataview.
FYI the JSON
{"friends":[{"name":"sakai","id":"123","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"124","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"125","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"126","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"127","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"128","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"129","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"110","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"},{"name":"sakai","id":"111","img":"http:\/\/try.sencha.com\/touch\/2.2.0\/docs\/Ext.dataview.DataView.2\/qr.png"}]}
I really appreciate any help.
Thx,
Try these (code has the ideas combined).
1 - Give your dataview an itemId, and load the store in your view initialize method. Might also want to try and set autoLoad to false.
2 - Sometimes I also explicitly give the full store reference rather than just the id, for ex Ext.getStore('FriendStore')
3 - Are you using MVC? did you declare your stores /models in your app.js?
Ext.application({
name: 'yourapp',
stores: ['FriendStore'],
models: ['Friends'],
launch: function() {
...
}
});
4 - Or, just thought of this.. change your tpl to 'itemTpl'
Ext.define('SocializeApp.view.Main', {
extend: 'Ext.tab.Panel',
fullscreen: true,
xtype: 'main',
requires: ['Ext.TitleBar', 'SocializeApp.store.FriendStore'],
config: {
tabBarPosition: 'bottom',
items: [{
title: 'Amigos',
iconCls: 'team',
items: [{
itemId: 'FriendsDataview',
xtype: 'dataview',
store: Ext.getStore('FriendStore'),
scrollable: {
direction: 'vertical'
},
itemTpl: ''.concat(
'<div>{img} {id} {name}</div>'
)
}]
}, {
title: 'time',
iconCls: 'time',
items: [{
html: '<h1> game </h1><src="resources/img/socialize-button.png" alt=""/>',
}]
}, {
title: 'Interesses',
iconCls: 'bookmarks',
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'Getting Started'
}, {
xtype: 'video',
url: 'http://av.vimeo.com/64284/137/87347327.mp4?token=1330978144_f9b698fea38cd408d52a2393240c896c',
posterUrl: 'http://b.vimeocdn.com/ts/261/062/261062119_640.jpg'
}]
}]
},
initialize: function(){
var store = Ext.getStore('FriendStore');
var dv = Ext.ComponentQuery.query('dataview[itemId=FriendsDataview]')[0];
dv.setStore(store);
store.load(function(){
console.log(this);
});
}
});

Sencha Touch 2 - Why extra button in Navigation bar is not hide when I tap back button in second view?

Why extra button in Navigation bar is not hide when I tap button back ?
My project have 3 view.
1. Home View
2. Category View
3. ShowListCategory View
When I tap back button in "ShowListCategory".My extra button is not hide.My code is wrong?
This is my code.
Home View:
Ext.define('Catalog.view.Home', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
config: {
navigationBar: {
items: [
{
xtype: 'button',
text: 'Categories',
id: 'category',
translate: true,
translationKey: 'navigationbar.category',
align: 'left',
action : 'Categories'
}
]
},
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
tabBarPosition: 'bottom',
items:[
{
title: "All Apps",
xtype: 'list',
id:'Applist',
itemTpl: new Ext.XTemplate(
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
store: {
autoLoad: true,
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://127.0.0.1:3000/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
}
});
Category View
Ext.define('Catalog.view.Navigation', {
extend: 'Ext.navigation.View',
xtype: 'navigation',
requires: ['Ext.data.Store'],
config: {
navigationBar: false,
title: 'Catalog',
ui: 'dark',
items: [
{
xtype: 'list',
id: 'Catlist',
itemTpl: '<span style="font-size:16px;" id="cattname">{name}</span>',
store: {
storeId: 'myStore',
autoLoad: true,
fields: ['id','name'],
sorters: [{
property:'name',
}],
proxy: {
type: 'jsonp',
url: 'http://127.0.0.1:3000/categories.json',
reader:{
type: 'json',
rootProperty:'Catalog'
}
}
}
}
]
}
});
ShowListCategory View
Ext.define('Catalog.view.showSearchCategory', {
extend: 'Ext.navigation.View',
xtype: 'showSearchCategory',
requires: ['Ext.data.Store'],
config: {
catid: null,
navigationBar: false,
items: [
{
xtype: 'list',
itemTpl: new Ext.XTemplate(
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
store: {
autoLoad: true,
storeId: 'allapp',
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://127.0.0.1:3000/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
},
initialize: function() {
var sto = Ext.getStore('allapp');
sto.clearFilter();
sto.filter('categoryid', this.getCatid());
this.callParent(arguments);
}
});
and this my controller:
Ext.define('Catalog.controller.Main', {
extend: 'Ext.app.Controller',
config: {
refs: {
homepanel: 'homepanel',
but: 'homepanel #category',
categoryButton: 'button[action=Categories]',
list:'list',
homepanellist: 'homepanel #Applist',
navigationlist: 'navigation #Catlist',
navigation: 'navigation',
showSearchCategory: 'showSearchCategory'
},
control: {
homepanellist:{
itemtap: 'showApp'
},
categoryButton:{
tap: 'showCat'
},
homepanel: {
back: 'backButtonHandler'
},
navigationlist:{
itemtap: 'showCatQuery'
},
navigation:{
back: 'backButtonNav'
},
showSearchCategory:{
back: 'backFromCategoryList'
}
}
},
//called when the Application is launched, remove if not needed
showApp: function(list,index,element,record) {
Ext.getCmp('category').hide();
// this.getBut().setHidden(true);
var Catname = Ext.get('catname').dom.innerHTML;
var butDown = '';
var gal = record.get('gallery');
var items2 = [];
if(gal.length > 0){
for(var i = 0; i < gal.length;i++){
items2.push({
html:'<center><img style="margin-top:10px;" src="http://127.0.0.1:3000/system/gallery_apps/imgs/000/000/'+gal[i].id+'/original/'+gal[i].img_file_name+'" width="200" height="300"></center>'
})
}
}
// Check OS Mobile
if(Ext.os.name == "iOS"){
butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_ios')+"'><img src='touch/resources/images/d_ios.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
}else{
butDown = "<div style='float:right;position: relative;top: -20px;'><a href='"+record.get('url_android')+"'><img src='touch/resources/images/d_and.png' style='width: 100px;float: right;margin-top: -15px;'></a></div>";
}
// Check OS Mobile
this.getHomepanel().push({
xtype: 'panel',
title: 'info',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'vbox'
},
items: [
{
xtype: 'panel',
style: 'margin-left: -1.2em;margin-right: -1.2em;margin-top: -1.2em;',
height:100,
html: '<div style="width: 100%;height: 100px;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
'<div style="float:left;width:85px;">'+
'<img src="http://127.0.0.1:3000/system/appinfos/appicons/000/000/'+record.get('id')+'/original/'+record.get('appicon_file_name')+'" width="75" heigh="75"></img>'+
'</div>'+
'<div style="word-wrap: break-word;"><b><p style="font-size:15px;margin:0;">'+record.get('name')+'</p></b><p>'+Catname+'</p></div>'+
butDown+
'</div>'+
'<div style="clear:both;"></div>'
},
{
// xtype:'datascreen',
// data:record.data
xtype:'carousel',
direction: 'horizontal',
height:325,
style: 'margin-left: -1.2em;margin-right: -1.2em;background-color:#C0C0C0;box-shadow:inset 3px 3px 49px #fafafa;border-bottom:2px ridge #C5C7BC;',
listeners:
{
'afterrender': function(carousel) {
carousel.pageTurner = new Ext.util.DelayedTask(function() {
if (this.getActiveIndex() == this.items.length - 1) {
this.setActiveItem(0, 'slide');
}
else {
this.next();
}
this.pageTurner.delay(6000);
}, carousel);
carousel.pageTurner.delay(6000);
}
},
items: items2
},
{
xtype: 'panel',
style: 'margin-left: -1.2em;margin-right: -1.2em;',
html:
'<div style="width: 100%;padding: 1.2em;border-bottom:2px ridge #C5C7BC;">'+
'<h1 style="font-size:16px;font-weight:bold;color:black;">Description</h1>'+
'<div id="deS">'+
record.get('description')+
'</div>'+
'</div>'
}
]
});
},
backButtonHandler: function(button){
Ext.getCmp('category').show();
},
backButtonNav: function(button){
Ext.getCmp('category').hide();
},
showCat: function(btn){
Ext.getCmp('category').hide();
this.getHomepanel().push(
{
xtype: 'panel',
title: 'Categories',
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'fit'
},
items: [
{
xtype: 'navigation'
}
]
}
);
// this.but().setHidden(true);
},
backFromCategoryList: function(button){
Ext.getCmp('category').hide();
},
showCatQuery: function(list,index,element,record){
Ext.getCmp('category').hide();
var catid = record.get('id');
var catname = record.get('name');
this.getHomepanel().push({
xtype: 'panel',
title: catname,
scrollable: true,
styleHtmlContent: true,
layout: {
type: 'fit'
},
items: [
{
catid: catid,
xtype: 'showSearchCategory',
}
]
});
}
});
I check in my console log.When I tap back button in ShowListCategory View.It will in method back from homepanel.
you have to destroy it.
and have to recreate it again after tapclick
Ext.getCmp('btn').destroy();
here 'btn' is id of button

How to make carousel Infinite with dynamic data(using url) in sencha

Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items.
I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style).
Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
and Click Dress and you have to show dressess.
I want to display like this only.
I just displayed categories but could not display category respective words.
What I have done until now:
View/CategoryPage.js
Ext.define('MyApp.view.CategoryPage', {
extend: 'Ext.Container',
alias: "widget.categorypage",
config: {
layout: 'vbox',
items: [
{
xtype:'globalmenu',
},
{
xtype: 'toolbar',
//docked: 'top',
cls:'roundedToolbar',
title: 'Categories',
},
{
xtype:'panel',
flex: 1,
layout: 'fit',
cls: 'category-data',
items:[
{
scrollable: {
direction: 'vertical',
directionLock: true,
},
xtype: 'list',
layout: 'fit',
itemHeight: 20,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
//'<span >{category_name}</span> ',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event,cat_id) {
//var id = index;
var id = index + 1;
console.log( "iOS" + id);
catOption(id);
}
}
}
]
},
]
}
});
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;
var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
stProxy.setUrl(url);
Ext.getStore("CategoryWordDisplayStore").load();
Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);
}
If one of the Category Click then Display respective words,
Ext.define("MyApp.view.CategoryWordDisplayMain", {
extend: 'Ext.Container',
alias: "widget.categorywordsdisplay",
requires:"Ext.dataview.List",
config: {
layout: 'vbox',
items: [
{
xtype: 'globalmenu',
flex: 1,
},//end of top menu
{
xtype:'panel',
scrollable: false,
flex: 3,
layout: 'fit',
items:[
{
flex: 1,
xtype: 'toolbar',
/* title: "Help", */
cls:'roundedToolbar',
title: 'value',
docked: 'top',
itemId:'titleid',
id:'titleid',
},
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
// html:'Test',
loadingText:"Loading ....",
emptyText: "<div class=\"words-list-empty-text\">No Words found.</div>",
//onItemDisclosure: true,
// grouped: true,
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div class="paragraph-def" onclick = "ratingStar({def_id})">','{defintion}',
'<span class="authorBox"><i>Author: {author}</i></span>',
'</li>' ,
'</div>',
'</ul></li>',
'</tpl>',
'<div class="yesStar" ></div>',
'</ul>',
'</tpl>',
'</div>'
].join(''),
store: 'CategoryWordDisplayStore',
}
]
},//end of menuitems
]
},
initialize : function(){
this.callParent();
var store = Ext.getStore('CategoryWordDisplayStore');
console.log("category ----"+store.getAt(0).getData().name);
this.down('toolbar').setHtml(store.getAt(0).getData().category);
},
});
function home(){
console.log("Home CategoryPage CLick");
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'mainmenuview' }
]);
}
Category Display Model
model/CagegoryModel.js
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
},
});
and
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
Word Display Model After Click Category:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
and
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
Stores:
Category Display Store:
Ext.define('MyApp.store.CategoryStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
});
Word Display Stores:
Ext.define('MyApp.store.CategoryWordDisplayStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',
reader:
{
rootProperty:''
}
},
}
});
I have not created any controller yet.
JSON: Category Json and
First Category(catID=1) Word Json If i swip right then cat id change 2 and again swip right then 3 and so on. if I swip left from the 3 cat id, then goto cat id 2.
please hep me out.Thank in Advance.

Controller for Buttons Sencha Touch 2

I have this problem that I can ref a button for control it. I don't understand the logic of Controllers, see my example code:
Ext.define('myMoney.controller.Inicio', {
extend: 'Ext.app.Controller',
config: {
refs: {
loginForm: '#loginForm',
logButton: '#logButton',
},
control: {
logButton: {
tab: "autenthic"
}
}
},
autenthic: function(){
console.log("Wazzup!?");
}
});
I have my view:
Ext.define('myMoney.view.Inicio', {
extend: 'Ext.form.Panel',
xtype: 'inicio',
requires: [
'Ext.form.FieldSet',
'Ext.field.Password'
],
config: {
title: 'Inicio',
iconCls: 'home',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Money Tracker',
docked: 'top'
},
{
xtype: 'fieldset',
title: 'Inicio de Sesion',
id: 'loginForm',
instructions: '(Por favor coloca tu usuario y clave)',
items: [
{
xtype: 'textfield',
name: 'us',
label: 'Usuario'
},
{
xtype: 'passwordfield',
name: 'pw',
label: 'Clave'
}
]
},
{
xtype: 'button',
width: '50%',
centered: true,
text: 'Aceptar',
ui: 'confirm',
id: 'logButton'
}
]
}
});
What is wrong?
Instead of
tab: "autenthic"
write
tap: "autenthic"

Sehch touch call controller on list item tap

Here is my Sencha view:
Ext.application({
name: 'Sencha',
launch: function() {
var panel = new Ext.Panel({
fullscreen: true,
dockedItems: [
{
xtype: "label",
dock: "top",
html: "<div style='backbround'>KK TEST",
style: "width:100%;text-align:center;font-weight:bold"
},
{
xtype: "toolbar",
items: [
{
iconMask: true,
iconCls: "download"
},
{
iconMask: true,
iconCls: "favorites"
},
{
iconMask: true,
iconCls: "search"
},
{
iconMask: true,
iconCls: "user"
}
]
},
{
xtype: 'list',
itemTpl: '{title}',
store: {
fields: ['title', 'url'],
data: [
{title: 'Locate a centre', url: 'ext-scheduler-2-0-upgrading-to-ext-js-4'},
{title: 'Browse all kwikkopy centres', url: 'sencha-touch-2-what-to-expect'},
{title: 'Sencha Con 2011', url: 'senchacon-2011-now-packed-with-more-goodness'},
{title: 'Documentation in Ext JS 4', url: 'new-ext-js-4-documentation-center'}
]
},
itemConfig: {
tpl: '{url}'
},
listeners: {
select: function(itemConfig) {
console.log(store)
alert('tapped on '+ itemConfig )
}
}
}
]
}); }
});
I want to call a controller and redirect to the next page when I click on a list item.
How do I do that?
Change your listeners config in this:
listeners:{
itemtap:function(data,index){
var record = data.getStore().getAt(index);
// the record that has been clicked.
Ext.dispatch({
controller: 'ControllerName'
,action: 'ControllerMethod'
,record: record
});
}
}