I currently have a list that is coming through a store fine, and the itemTpl is putting a div inside each list item with a specific ID. What I want to do know is use a controller to execute different functions on each specific list item when it is tapped. I have a controller set up but it doesn't seem to be referencing it.
Any help would be great
View:
Ext.define('tourApp.view.TourInfo', {
extend: 'Ext.List',
xtype: 'TourInfo',
config: {
navigationBar: {
hidden: true
},
title: 'Tour Info',
iconCls: 'MyTourInfoIcon nav-schedule',
items: [
{
docked: 'top',
xtype: 'toolbar',
title: '<span class="logo"></span>'
},
{
xtype: 'list',
store: 'TourInfoList',
id: 'lolol',
itemTpl: '<div id="TIList{id}" class="TIList"><div class="TIListTitle">{title}</div></div>'
}
]
}
});
Controller:
Ext.define('tourApp.controller.TourInfo', {
extend: 'Ext.app.Controller',
config: {
refs: {
Tdetails: 'TourInfo',
main: 'TourInfo'
},
control: {
"TourInfo list #TIList1": {
tap: 'test'
}
}
},
test: function() {
console.log('Success');
}
});
Use the select event for this..
control: {
'TourInfo list': {
select: function(list, record, eOpts) { console.log('test'); }
}
}
Related
I built a view and I want to do some manipulation of the elements, after the view has been painted.
I am trying to use the "painted" event with no avail.
Any ideas why?
Ext.define('TestApp.view.phone.RegisterViewPhone', {
extend: 'Ext.Panel',
xtype: 'RegisterViewPhone',
config: {
items: [
{
xtype: 'Header'
},{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT'
},{
xtype: 'Footer'
}
],
listeners: [
{
delegate: '#thePanel',
event: 'painted',
fn: 'onPainted'
}
]
},
onPainted: function () {
alert('hey!');
}
});
You can attach listeners to that particular element like
{
xtype: 'panel',
itemId: 'thePanel',
html: 'THIS WILL HOLD THE VIEWS CONTENT',
listeners: {
painted: function(){
alert('hey!');
}
}
}
As painted is not dependent on individual element and it acts on page scope also U can write it in views directly
items: [
],
listeners: {
painted: function () {
alert('hey!');
}
I have a button at the top right of every page that I want to link to a certain page within my application. Is there a way to give each instance of this button the same behaviour? and if so where would the code sit so that it affects every page? Many thanks in advance.
View:
items: [
{
title: '<span class="logo"></span>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets'
}
]
}
]
Controller (specific to one page):
config: {
refs: {
main: 'ListNav'
},
control: {
"button#buytickets": {
tap: 'buytickets'
}
}
},
buytickets: function(button, e, eOpts) {
this.getMain().push({
xtype: 'buyticketspanel'
});
},
You could just put the button at the top of your Viewport, in the app.js file:
Ext.application({
name: 'MyApp',
requires: [],
views: [/*Views*/],
controllers: [/*Controllers*/],
viewport: {
layout: 'vbox'
},
launch: function() {
var me = this;
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add([
{
title: '<span class="logo"/>',
xtype: 'titlebar',
docked: 'top',
items: [
{
xtype: 'button',
align: 'right',
iconAlign: 'right',
id: 'buytickets',
text: 'Buy Tickets',
handler: me.doBuyTickets
}
]
},
Ext.create('MyApp.view.Main', {flex: 1})
]);
},
doBuyTickets: function() {
//do stuff
}
});
****EDIT****:
However, you won't be able to re-purpose that bar as the title bar for a NestedView. If you need to have that, then you might be best served with a utils file that has a method to add a button to a toolbar, and just reuse that in the init function of any NestedView components.
Utils.js:
Ext.define("MyApp.util.Utils", {
singleton: true,
addBuyButton: function(toolbar)
{
toolbar.add({
text: 'Buy Tickets',
align: 'right',
handler: function() {
//do stuff
}
});
}
});
Controller:
Ext.define('MyApp.controller.MyController', {
extend: 'Ext.app.Controller',
config: {
refs: {
nestedList: 'nestedlist'
},
control: {
app-page: {
initialize: 'initAppPage'
}
}
},
initAppPage: function()
{
MyApp.utils.addBuyButton(this.getNestedList().getNavigationBar());
}
});
I would like to link a list to another view (carousel layout), for example carousel item no. 2.
What should I put in this bracket?
onItemDisclosure: function() {
[......]
}
I want to achieve something like carousel.setActiveItem(x)
where x is my carousel content.
I have worked on your problem. May be this helps you.
app.js
Ext.application({
name: "FrontApp",
models: ["mymodel"],
stores: ["mystore"],
controllers: ["FrontAppController"],
views: ["front","carousel"],
launch: function () {
var frontView = {
xtype: "frontview"
};
var Carousel = {
xtype: "carousel"
};
Ext.Viewport.add([frontView,Carousel]);//views called by x-type
}
});
front.js
Ext.define("FrontApp.view.front", {
extend: "Ext.Panel",
alias: "widget.frontview",
config: {
layout: {
type: 'fit'
},
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'list',
itemId: 'myList',
scrollable: false,
itemTpl: '{firstName}',
store: 'mystore51',
onItemDisclosure: true,
}
],
listeners:
[
{
delegate: "#myList",
event: "disclose",
fn: "onListDisclose"
}
]
},
onListDisclose: function (list, record, target, index, evt, options) {
console.log("calling carousel..");
this.fireEvent("carouselCommand", this,record, target, index, evt, options);
}
});
carousel.js
Ext.define('FrontApp.view.carousel', {
extend: 'Ext.carousel.Carousel',
xtype: 'carousel',
config: {
items: [
{
xtype: 'panel',
html: 'hello1'
},
{
xtype: 'panel',
html: 'hello2'
},
{
xtype: 'panel',
html: 'hello3'
}
]
}
});
FrontAppController.js
Ext.define("FrontApp.controller.FrontAppController", {
extend: "Ext.app.Controller",
config: {
refs: {
frontView: "frontview",
carouselView:"carousel"
},
control: {
frontView: {
carouselCommand: "onCarouselCommand"
}
}
},
// Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
onCarouselCommand: function (list, record, target, index, e, eOpts) {
console.log("onCarouselCommand");
var a=this.getCarouselView().setActiveItem(index); // setting the carousel item according to list index.
Ext.Viewport.animateActiveItem(a, this.slideLeftTransition);
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
}
});
onItemDisclosure: function(list, record, index) {
//switch the view to carousel (my main content view)
Ext.ComponentManager.get('comp').setActiveItem(1);
//set active item for carousel according to chosen list
Ext.ComponentManager.get('content').setActiveItem(index);
}
Is it possible to link to a tab.Panel view and have the second or third (not the first) tabItem be selected?
Currently i have a view that's linking to a tab.Panel that looks like this:
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
}
});
As of now when i load in the view, 'xtype-of-view-1' is set as the active tab.
But is it possible to load in the tab.Panel view but having one of the other tabs active and pressed?
Ext.define("app.view.MyView", {
extend: 'Ext.tab.Panel',
xtype: 'myview',
alias: 'widget.myview',
requires: [
'Ext.TitleBar',
'dev.view.1',
'dev.view.2',
'dev.view.3',
'dev.view.4',
'dev.view.5',
],
config: {
tabBarPosition: 'bottom',
title: 'My Title',
ui: 'neutral',
items: [
{
xtype: 'xtype-of-view-1'
},
{
xtype: 'xtype-of-view-2'
},
{
xtype: 'xtype-of-view-3'
},
{
xtype: 'xtype-of-view-4'
},
{
xtype: 'xtype-of-view-5'
}
]
},
initialize: function() {
var items = this.getItems(),
itemIdx,
Ext.each(items, function(item, idx) {
if (item.xtype == 'xtype-of-view-2') {
itemIdx = idx;
return false;
}
});
this.setActiveItem(itemIdx);
}
});
you could also watch the awesome video guide http://docs.sencha.com/touch/2-0/#!/video/tabs-toolbars
You have to add a controller to you app. in controller add a reference
refs: {
myview: 'myview',
list: 'anotherview list'
},
control : {
list: {
itemtap: 'onListItemTap'
}
},
onListItemTap: function (ct) {
var myview = this.getMyview();
myview.setActiveItem(1)
}
Please get read the sencha tutorial if you have no clue about MVC in sencha touch. Eg. http://docs.sencha.com/touch/2-0/#!/guide/controllers
you cand add bello config in to tab.panel
activeItem :2
for active third item insted of first
I have a layout in which I want to show list items on left-pane. How can I show list items there along with some click event?
{
docked: 'left',
style: 'background:#7b7b7b',
html: 'Here I want to show Ext.List'
}
My List items are Home, About, User, Help.
Your List..instead of "html: 'Here I want to show Ext.List'"
withe the listeners you can creat some tap events
items: [
{ xtype: 'list',
store: 'NaviStore',
id: 'NaviList',
itemTpl: '<div class="contact">{text}',
scrollable: false,
listeners:{
itemtap: function (obj, idx, target){
alert(List is Clicked);
}
}
}]
Your store
Ext.define('MyApp.store.NaviStore', {
extend: 'Ext.data.Store',
requires: 'MyApp.model.NaviModel',
config: {
model: 'MyApp.model.NaviModel',
data: [
{ text: 'Item1'},
{ text: 'Item2'},
{ text: 'Item3'},
{ text: 'Item4'}
],
autoLoad: true
}
});
Your model
Ext.define('MyApp.model.NaviModel', {
extend: 'Ext.data.Model',
config: {
fields: ['text']
}
});