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);
}
Related
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 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'); }
}
}
I'm just learning sencha touch 2, MVC. I would to make a simple form that get a value, pass to a PHP file (for an API call to a web-service), move to a Nested List and show results.
But, my app doesn't show nothing after submit... Value is captured correctly (I see it in console log).
Please someone could me help?
Consider for testing that for now I don't pass value, and my API call calls directly with a hard-coded value. In future I'll work to pass form value...
Thank you in advance!
This is "app.js"
Ext.application({
name: 'Appre',
icon: 'resources/icons/icon.png',
phoneStartupScreen: 'resources/images/phone_startup.png',
//tabletStartupScreen: 'tablet_startup.png',
glossOnIcon: false,
//profiles: ['Phone', 'Tablet'],
views : ['Viewport','SearchCap','ElencoRistoranti'],
models: ['ElencoRistoranti'],
stores: ['RistorantiCap'],
controllers: ['SearchCap'],
viewport: {
layout: {
type: 'card',
animation: {
type: 'slide',
direction: 'left',
duration: 300
}
}
},
launch: function() {
Ext.create('Appre.view.Viewport')
} // launch: function() {
}) // Ext.application
This is form "search cap"
Ext.define('Appre.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
config: {
items: [{
xtype: 'fieldset',
layout: 'vbox',
items: [{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
action :'searchCap',
id:'btnSubmitLogin'
}] // items
}] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
This is controller
Ext.define('Appre.controller.SearchCap', {
extend : "Ext.app.Controller",
config : {
refs : {
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap'
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
var $this=this;
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.php',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = Ext.decode(response.responseText);
//Ext.Msg.alert('Contact Complete!', obj.responseText);
$this.resetForm();
Ext.Viewport.add(Ext.create('Appre.view.ElencoRistoranti'));
Ext.Viewport.setActiveItem(Ext.create('Appre.view.ElencoRistoranti'));
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
And this is Nested List
Ext.define('Appre.view.ElencoRistoranti', {
extend: 'Ext.Panel',
xtype: 'appre-elencoristoranti',
config: {
xtype: 'nestedlist',
title: 'Cap',
displayField: 'name',
store: {
type: 'tree',
fields: [
'id_restaurant', 'name',
{name: 'leaf', defaultValue: true}
],
root: {
leaf: false
},
proxy: {
type: 'ajax',
url: 'cerca-ristoranti-cap.php',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
} // proxy
},
detailCard: {
xtype: 'panel',
scrollable: true,
styleHtmlContent: true
},
listeners: {
itemtap: function(nestedList, list, index, element, post) {
this.getDetailCard().setHtml(post.get('name'));
}
}
} // config
});
cerca-ristoranti-cap.php it's a simple function that returns an array like this:
{
"restaurants":[{
"id_restaurant":"40",
"name":"La Saliera",
"zip":"00128",
"lat":"41.7900229",
"lgt":"12.4513128"
}, {
"id_restaurant":"64",
"name":"Osteria del Borgo",
"zip":"00128",
"lat":"41.7887363",
"lgt":"12.5149867"
}]
}
Hi #sineverba sorry for response a little late, but here something this how you want show,
Viewport.js
Ext.define('myapp.view.Viewport' , {
extend : 'Ext.viewport.Default',
xtype : "viewport",
config: {
fullscreen: true,
styleHtmlContent: true,
style: 'background:#ffffff;',
layout : 'card',
autoDestroy : false,
cardSwitchAnimation : 'slide',
items: [
{
xtype: 'appre-searchCap'
},
],
}
})
app.js
Ext.Loader.setConfig({
enabled: true
})
Ext.application({
name: 'myapp',
requires: [
'myapp.view.SearchCap',
'myapp.view.ElencoRistoranti',
'myapp.view.SearchElenco',
],
controllers: ['SearchCap'],
models: ['myapp.model.SearchCapModel'],
launch: function() {
Ext.create('myapp.view.Viewport')
}
});
SearchCapModel.js
Ext.define('myapp.model.SearchCapModel', {
extend: 'Ext.data.Model',
config: {
idProperty: 'id_restaurant',
fields: [
{ name: 'id_restaurant', type: 'string' },
{ name: 'name', type: 'string'},
{ name: 'zip', type: 'string' },
{ name: 'lat', type: 'string'},
{ name: 'lgt', type: 'string'}
],
}
})
SearchCapStore.js
Ext.define('myapp.store.SearchCapStore', {
extend: 'Ext.data.Store',
config: {
model: 'myapp.model.SearchCapModel',
autoLoad: true,
proxy: {
type: 'ajax',
url : 'cerca-ristoranti-cap.json',
reader: {
type: 'json',
rootProperty: 'restaurants'
} //reader
},
}
});
SearchCap.js
Ext.define('myapp.controller.SearchCap', {
extend : "Ext.app.Controller",
views: ['SearchElenco'],
config : {
refs : {
elencoListContainer: 'elencolistcontainer',
btnSubmitLogin: 'button[action=searchCap]',
form : 'appre-searchCap',
},
control : {
btnSubmitLogin : {
tap : "onSubmitLogin"
}
}
},
onSubmitLogin : function() {
console.log("onSubmitLogin");
var values = this.getForm().getValues();
console.log(values);
Ext.Ajax.request({
url: 'cerca-ristoranti-cap.json',
method: 'POST',
params: {
values: Ext.encode({form_fields: values})
},
success: function(response, opts) {
var obj = response.responseText;
Ext.Msg.alert('Contact Complete!', obj);
Ext.Viewport.add(Ext.create('myapp.view.SearchElenco'));
Ext.Viewport.setActiveItem(1);
},
failure: function(response, opts) {
console.log('server-side failure with status code ' + response.status);
}
});
},
resetForm: function() {
this.getForm().reset();
},
launch : function() {
this.callParent();
console.log("LoginForm launch");
},
init : function() {
this.callParent();
console.log("LoginForm init");
}
});
SearchElenco.js
Ext.define('myapp.view.SearchElenco', {
extend: 'Ext.Container',
xtype: 'elencolistcontainer',
requires: ['myapp.store.SearchCapStore'],
initialize: function() {
this.callParent(arguments);
var s = Ext.create('myapp.store.SearchCapStore')
var notesList = {
xtype: 'appre-elencoristoranti',
store: Ext.getStore(s).setAutoLoad(true),
listeners: {
disclose: {
fn: this.onNotesListDisclose,
scope: this
}
}
};
this.add([notesList])
},
onNotesListDisclose: function(list, record, target, index, event, options) {
console.log('editNoteCommand');
this.fireEvent('editNoteCommand', this, record);
},
config: {
layout: {
type: 'fit'
}
}
});
ElencoRistoranti.js
Ext.define('myapp.view.ElencoRistoranti', {
extend: 'Ext.dataview.List',
xtype: 'appre-elencoristoranti',
id: 'appreElenco',
config: {
emptyText: '<pre><div class="notes-list-empty-text">No list found.</div></pre>',
onItemDisclosure: false,
itemTpl: '<pre><div class="list-item-title">{id_restaurant}</div><div class="list-item-narrative">{name}</div></pre>',
}
});
SearchCap.js - View
Ext.define('myapp.view.SearchCap', {
extend: 'Ext.form.Panel',
xtype: 'appre-searchCap',
id: 'appreSearchCap',
config: {
layout: {
type: 'vbox',
},
items: [
{
xtype: 'fieldset',
title: 'Cap',
instructions: 'Enter Cap',
items: [
{
xtype: 'textfield',
name: 'cap',
placeHolder: 'Cap'
},
{
xtype: 'button',
text: 'Cerca',
ui: 'confirm',
action :'searchCap',
id:'btnSubmitLogin'
}
] // items
}
] // items
}, // config
initialize: function() {
this.callParent(arguments);
console.log('loginform:initialize');
}
});
I hope help you and if you have a dude please let me know. :)
I'm new to the MVC structure with Sencha Touch 2.
In my view, I have a label as follows:
{
xtype: 'label',
itemId: 'title',
html: 'title'
}
In my controller, how do I set the value of this label?
Currently my controller (working off a tutorial sample):
Ext.define("NotesApp.controller.Notes", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
noteView: "noteview",
noteEditorView: "noteeditorview",
notesList: "#notesList"
},
control: {
noteView: {
// The commands fired by the notes list container.
noteNextCommand: "onNoteNextCommand",
noteAnswerCommand: "onNoteAnswerCommand"
},
noteEditorView: {
// The commands fired by the note editor.
saveNoteCommand: "onSaveNoteCommand",
deleteNoteCommand: "onDeleteNoteCommand",
backToHomeCommand: "onBackToHomeCommand"
}
}
},
onNoteNextCommand: function () {
var noteView = this.getNoteView();
console.log("loaded view");
//set label here
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
var notesStore = Ext.getStore("Notes");
notesStore.load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
} });
The full View code:
Ext.define("NotesApp.view.Note", {
extend: "Ext.Container",
alias: "widget.noteview",
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: "toolbar",
title: "Random Question",
docked: "top",
items: [
{ xtype: 'spacer' },
{
xtype: "button",
text: 'List',
ui: 'action',
itemId: "list"
}
]
},
{
xtype: "label",
html: 'question',
itemId: "question"
},
{
xtype: "label",
html: 'answer',
itemId: "answer"
}
],
listeners: [{
delegate: "#list",
event: "tap",
fn: "onListTap"
},
{
delegate: "#question",
event: "tap",
fn: "onQuestionTap"
},
{
delegate: "#answer",
event: "tap",
fn: "onAnswerTap"
}]
},
onListTap: function () {
console.log("list");
this.fireEvent("showList", this);
},
onQuestionTap: function () {
console.log("noteAnswer");
this.fireEvent('noteAnswer', this);
},
onAnswerTap: function () {
console.log("noteNext");
this.fireEvent('noteNext', this);
} });
You need to add a reference to your label in your controller :
config: {
refs: {
yourlabel : #YOUR_LABEL_ID'
}
…
}
and then in your controller you can access the label by calling this.getYourlabel();
So, in order to change the title, you need to do (wherever you want in your controller)
this.getYourlabel().setHtml('Label');
Hope this helps
Give your label some id property value
{
xtype: "label",
html: 'answer',
id: "answerLabel"
}
and then write the following code in your controller.
.....
..... // Controller code ..
refs: {
answerLabel: '#answerLabel',
},
control: {
answerLabel: {
tap: 'answerLabelFn'
}
}
.....
.....
answerLabelFn : function() {
// Your Label tap handler code...
}
I am new to sencha touch. I am beginning with MVC pattern. I want to navigate from one page to another. In my controller i have wriiten a tap function. The alert box inside works when tapped but it is not moving to the next screen. I don't know where have i gone wrong. Please do help.
My app.js looks like this:
//<debug>
Ext.Loader.setPath({
'Ext': 'sdk/src'
});
//</debug>
Ext.application({
name: 'iPolis',
requires: [
'Ext.MessageBox'
],
views: ['Main','mainmenu','journalsearch'],
controllers: [
'mainmenu'
],
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'
},
phoneStartupScreen: 'resources/loading/Homescreen.jpg',
tabletStartupScreen: 'resources/loading/Homescreen~ipad.jpg',
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('iPolis.view.Main'));
Ext.Viewport.add(Ext.create('iPolis.view.journalsearch'));
},
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function() {
window.location.reload();
}
);
}
});
mainmenu.js:
Ext.define("iPolis.view.mainmenu", {
extend: 'Ext.form.Panel',
requires: ['Ext.TitleBar','Ext.form.FieldSet'],
id:'menuPanel',
config: {
fullscreen:true,
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'iPolis',
items: [
{
//text:'Back',
ui:'back',
icon: 'home',
iconCls: 'home',
iconMask: true,
handler: function() {
iPolis.Viewport.setActiveItem('menuPanel', {type:'slide', direction:'right'});
}
}]
},
{
xtype: 'fieldset',
title: 'Menu',
items: [
{
xtype: 'button',
text: '<div class="journal">Journal</div>',
labelWidth: '100%',
name: '',
id:'journal',
handler: function() {
// iPolis.Viewport.setActiveItem('journalPanel', {type:'slide', direction:'left'});
}
}
]
}
]
}
});
Journalsearch.js :
Ext.define("iPolis.view.journalsearch", {
extend: 'Ext.form.Panel',
requires: ['iPolis.view.mainmenu','Ext.TitleBar','Ext.form.Panel','Ext.form.FieldSet','Ext.Button'],
id:'journalPanel',
config: {
// tabBarPosition: 'bottom',
layout: {
// type: 'card',
animation: {
type: 'flip'
}
},
items: [
{
xtype: 'toolbar',
docked: 'top',
title: 'iPolis',
items: [
{
//text:'Back',
ui:'back',
icon: 'home',
iconCls: 'home',
iconMask: true,
handler: function() {
}
}]
}
]
}
});
the controller mainmenu.js:
Ext.define('iPolis.controller.mainmenu', {
extend: 'Ext.app.Controller',
requires: [''],
config: {
control: {
'#journal': {
tap: 'onJournalTap'
}
}
},
init: function() {
},
onJournalTap: function() {
alert('i am clicked');
var a = Ext.getCmp('menuPanel');
a.setActiveItem(Ext.getCmp('journalPanel'));
}
});
In this function:
onJournalTap: function() {
alert('i am clicked');
var a = Ext.getCmp('menuPanel');
a.setActiveItem(Ext.getCmp('journalPanel'));
}
Try using this command: console.log(a), and show what it logs, I will help you.
PS: basically that's what Ext.NavigationView is designed for. If you have many views and just want to set one ACTIVE view at one time, let's include them all in your container and later show them using setActiveItem(index of that view)