Related
I have created one sencha touch application in my localserver.
In that application, there are one textfield, and three buttons.
The following is my app.js file
Ext.application({
name: 'MyApp',
requires: [
'Ext.MessageBox'
],
views: [
'Main'
],
controllers: [
'CalcController'
],
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('MyApp.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();
}
}
);
}
});
The following is my Main.js file
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
//action:
handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
The following is my CalcController.js file
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
}
},
displayNum: function()
{
console.log("This click event works");
}
});
Now my question is as following:
When i press button named btnSeven it display digit 7 in textfield means handler function works.
Now i want click event code in CalcController.js file instead of writing handler function in Main.js file for that i created second button named btnEight and give action:'displayNum' so when that button clicked event goes to the CalcController.js file.
When i pressed button named btnEight then i want to display digit 8 in textfield with the help of writing code in CalcController.js file instead of writing hander function in Main.js file. So how to do this?
Instead of defining Id for component , define Item Id
In Controller you have to define references in config.
config: {
refs: {
'idDisplay': 'main #idDisplay' // idDisplay is itemId not Id here
},
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
}
}
},
and in displayNum function write code like this.
displayNum: function(btn)
{
var display = this.getIdDisplay();
display.setValue(btn.getText());
}
I solved above my question as the following method:
Now my Main.js file is as following:
Ext.define('MyApp.view.Main', {
extend: 'Ext.form.Panel',
xtype: 'main',
requires: [
'Ext.TitleBar',
'Ext.Video'
],
config: {
items: [
{
xtype:'textfield',
name:'txtDisplay',
id:'idDisplay',
readOnly:true,
},
{
xtype:'button',
name:'btnClear',
id:'idClear',
width:'25%',
text:'C',
style:'float:left;',
action: 'clearDisplay',
},
{
xtype:'button',
name:'btnSeven',
id:'idSeven',
width:'25%',
text:'7',
style:'float:left; clear:both;',
action: 'displayNum',
/*handler: function()
{
var x = Ext.getCmp('idSeven')._text;
Ext.getCmp('idDisplay').setValue(x);
}*/
},
{
xtype:'button',
name:'btnEight',
id:'idEight',
width:'25%',
text:'8',
style:'float:left;',
action:'displayNum',
}
]
}
});
and CalcController.js file is as following:
Ext.define('MyApp.controller.CalcController', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=displayNum]' : {
tap: 'displayNum'
},
'button[action=clearDisplay]' : {
tap: 'clearDisplay'
},
}
},
displayNum: function(button, e, eOpts)
{
var x = Ext.getCmp('idDisplay')._value + button._text;
Ext.getCmp('idDisplay').setValue(x);
},
clearDisplay: function(button, e, eOpts)
{
Ext.getCmp('idDisplay').setValue('');
}
});
Using this method i pass my button's properties in the controller file using the button's tap event.
I am creating an application in sencha touch and I want to create a card layout for that my view main.js looks something like this
Ext.define('ov_app.view.Main', {
extend: 'Ext.Container',
xtype: 'main',
css:[{
"path": "default-theme.css",
}],
config: {
layout:{
type: 'card'
},
items: [
{
layout:'vbox',
items:[
{
xtype: 'HeaderBar',
},{
xtype: 'home_button',
flex:1
},{
xtype: 'main_navigation',
flex:1
},{
xtype:'FooterBar',
}
]
},
{
html: "Second Item"
},
{
html: "Third Item"
},
{
html: "Fourth Item"
}
],
}
});`
ok hare is my app.js code
//<debug>
Ext.Loader.setPath({
'Ext': 'touch/src',
'ov_app': 'app'
});
//</debug>
Ext.application({
name: 'ov_app',
requires: [
'Ext.MessageBox'
],
profiles: ['Phone', 'Tablet', 'Desktop'],
views: ['Main', 'Eligibelity', 'HeaderBar', 'ListNavigation', 'FooterBar', 'home_button', 'main_navigation'],
stores: ['NavigationItems'],
models: ['Items'],
controllers: ['MainController'],
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
ov_app.container = Ext.Viewport.add(Ext.create('ov_app.view.Main'));
},
onUpdated: function() {
/*
'onUpdated' is triggered after the following cases happen:
- Your application's HTML 5 manifest file (cache.manifest) changes.
- You have changes in any of your JavaScript or CSS assets listed in
the "js" and "css" config inside app.json.
*/
Ext.Msg.confirm(
"Update",
"Reload now?",
function() {
window.location.reload();
}
);
}
});`
ok now when i enter ov_app.container.setActiveItem(1) in my console it shows me the desired card layout but how can i do it on click of a component? Do i have to declare something in handler of that component and declare a controller for that tab event.
Edit 1
The main_navigation.js code whare i want to apply the tap event
Ext.define('ov_app.view.main_navigation', {
xtype:'main_navigation',
extend:'Ext.Container',
requires:[
'Ext.Img',
],
config:{
layout:'vbox',
defaults:{
cls:"main_navigation",
margin: '0 10 8 10',
border: 0,
flex:1,
},
items:[
{
xtype:'container',
items:[{
xtype:'container',
html: 'tab me',
centered: true,
cls: 'main_navigation_heading',
listeners:[{
tap:function(){
tap event listner function defination }
}]
},{
xtype: 'image',
src: 'resources/images/visa.png'
}]
}
]
}
});
`
check out the container with html:"tap me" I want to display card layout on tab of that container
You can do like this:
{
xtype:'container',
items:[{
xtype:'container',
html: 'tab me',
centered: true,
cls: 'main_navigation_heading',
listeners: {
initialize: function(c) {
this.element.on({
tap: function(e, node, options) {
alert("Working!")
}
})
}
}
}]
}
My button click event subscribed in the controller is getting fired. Here is the code.
WebAppMasterController.js
Ext.define('P.e.w.controller.WebAppMasterController', {
extend: 'P.e.w.controller.IController',
views: [
'WebAppMasterView'
],
refs: [
{
ref: 'webAppView',
selector: 'WebAppMasterView'
}
],
init: function () {
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
}, {
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
},
viewafterrender: function (panel) {
alert();
}
});
IController extends "Ext.app.Controller".
In the above code, the "afterrender" event is getting triggered, but the button click event is not getting triggered.
The view: WebAppMasterView.js
Ext.define('P.e.w.view.WebAppMasterView', {
extend: 'P.w.l.Header',
alias: 'widget.WebAppMasterView',
constructor: function (config) {
var me = this;
me.centerregion = me.createCenterRegion(config);
Ext.applyIf(config, {
favoriteBar: true,
items: [me.centerregion],
menuWidth: 0
});
this.callParent([config]);
},
createBody: function () {
var me = this;
if (!me.controlPanel) {
me.controlPanel = Ext.create('Ext.Panel', {
layout: 'fit'
});
}
return me.controlPanel;
},
createCenterRegion: function (config) {
var me = this,
centerPanel = Ext.create('Ext.Panel', {
region: 'center',
layout: 'fit',
tbar: {
xtype: 'WorkRequestMenuBar',
id: 'workrequestmenubar'
},
defaults: {
border: false
},
items: [me.createBody()]
});
return centerPanel;
}
});
WorkRequestMenuBar.js
Ext.define('P.e.w.view.WorkRequestMenuBar', {
extend: 'Ext.Toolbar', alias: 'widget.WorkRequestMenuBar',
constructor: function (config) {
config = config || {};
Ext.apply(config, {
defaults: {
scale: 'large',
cls: 'x-btn-text-icon',
iconAlign: 'top'
},
items: [
{
text: 'NEW_WORK_REQUEST',
iconCls: 'menubar-createWorkRequest',
action: 'save'
},
{
text: 'OVERVIEW',
iconCls: 'menubar-overview'
}, '->', {
iconCls: 'icon-biggerHelp',
width: 80,
text: 'HELP'
}
]
});
this.callParent([config]);
}
});
You have several issues.
1st. there is a syntax error in your controller
this.control({
'WebAppMasterView': {
afterrender: this.viewafterrender
}
},
{
'button[action=save]': {
click: function () {
alert('dslksd');
}
}
}
//missing --> );
},
2nd. The toolbar config method should be initComponent method instead.
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 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)