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!")
}
})
}
}
}]
}
Related
I'm writing a Sencha Touch 2 application and I've got a problem with switching views. I've got two views (LoginPanel and RegisterPanel) and I want to switch from LoginPanel to RegisterPanel by clicking a button. I want to use "makeAccount" button to go to the RegisterPanel View. I've tried many tricks, but alas no one work. Here's my codes:
app.js
Ext.application({
name: 'kody2',
requires: [
'Ext.MessageBox'
],
controllers: [
'Main'
],
views: [
'HomeContainer',
'LoginPanel',
'Produkty',
'Start',
'SkanujKod',
'Opcje',
'KatalogPDF',
'RegisterPanel',
'SimpleProduct',
'ForgotPassword'
],
viewport: {
layout: {
type: 'card',
animation: {
type: 'fade',
direction: 'left',
duration: 300
}
}
},
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('kody2.view.HomeContainer'));
},
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();
}
}
);
}
});
LoginPanel.js
Ext.define('kody2.view.LoginPanel', {
extend: 'Ext.Panel',
xtype: 'loginpanel',
config: {
title: 'Twoje konto',
iconCls: 'user2',
styleHtmlContent: true,
scrollable: true,
items: [
{
xtype: 'fieldset',
id: 'formContent',
title: 'Zaloguj się',
items: [
{
xtype: 'emailfield',
name: 'login',
id: 'email_login',
label: 'Login'
},
{
xtype: 'passwordfield',
name: 'password',
id: 'form_password',
label: 'Hasło'
},
{
xtype: 'button',
text: 'Załóż konto',
id: 'makeAccount',
action: 'register'
},
{
xtype: 'button',
text: 'Zapomniałem hasło',
id: 'forgotPassword'
},
{
xtype: 'button',
text: 'Zaloguj',
id: 'logowanie'
}
]
}
]
}
});
and the Controller:
Ext.define('kody2.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=register]': {
tap: 'myFunction'
}
}
},
myFunction: function() {
Ext.Viewport.add({
xtype: 'register'
});
}
});
Thanks for all help!
You just adding register view in viewport, But not setting it as active item.
Ext.Viewport.setActiveItem({xtype:'register'});
Above line will add register view in viewport and also sets as ActiveItem.
Update
Ext.define('kody2.controller.Main', {
extend: 'Ext.app.Controller',
config: {
control: {
'button[action=register]': {
tap: 'myFunction'
}
}
},
myFunction: function() {
Ext.Viewport.setActiveItem({ xtype: 'register' });
console.log(Ext.Viewport.getActiveItem().xtype);
}
});
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 have a tabpanel which should always be shown at the bottom of the page.
This tabpanel (main.js) has 3 tabs (home, persoon and todo).
These tabs are "panels" (home.js, persoon.js, todo.js).
Every tab has multiple panels:
Home tab --> home.js, homeOver.js, homeReset.js
Persoon tab --> person.js, personAdd.js, personDetail.js
Todo tab --> todo.js, todoAdd.js, todoDetail.js
When I click at a tab, the correct page will be shown.
When I click at lets say the home tab, the home panel will be shown. When I click within this panel at a button to show another panel within the same tab (home), the tabpanel disappears.
How can I resolve this?
I change the page with the following function:
Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
Here is my complete code:
app.js:
Ext.application({
name: 'app',
controllers: ['HomeController', 'PersoonController'],
views: ['Main'],
launch: function() {
Ext.Viewport.add({
xclass: 'app.view.Main'
});
}
});
app.view.Main.js:
Ext.define('app.view.Main', {
extend:'Ext.TabPanel',
xtype: 'maincard',
requires: [
'app.view.Home',
'app.view.Persoon',
'app.view.Todo',
'app.view.HomeOver',
'app.view.HomeReset'
],
config: {
tabBar: {
docked: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'homecard' },
{ xtype: 'persooncard' },
{ xtype: 'todocard' }
]
}
});
app.view.Home.js:
Ext.define('app.view.Home', {
extend: 'Ext.Panel',
alias: "widget.homePage",
xtype: 'homecard',
config: {
iconCls: 'home',
title: 'Home',
html: 'Dit is de home pagina',
styleHtmlContent: true,
items: [{
docked: 'top',
xtype: 'toolbar',
title: 'Home',
items: [
{
xtype: "button",
text: 'Over',
action: 'ButtonHomeOverClicked'
},
{
xtype: "spacer"
},
{
xtype: "button",
text: 'Reset',
action: 'ButtonHomeResetClicked'
//action:
}
]
}
]
}
});
app.view.HomeOver.js:
Ext.define('app.view.HomeOver', {
extend: 'Ext.Panel',
alias: "widget.homeover",
xtype: 'homeovercard',
requires: [
'app.view.Home',
'app.view.Persoon',
'app.view.Todo'
],
config: {
iconCls: 'home',
title: 'Home',
html: 'Dit is de home over pagina',
styleHtmlContent: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
title: 'Over pagina',
items: [
{
xtype: "button",
ui: "back",
text: "Terug",
action: "ButtonBackHome"
}
]
}
]
}
});
app.controller.HomeController:
Ext.define("app.controller.HomeController", {
extend: "Ext.app.Controller",
config: {
refs: {
// We're going to lookup our views by xtype.
overButton: "button[action=ButtonHomeOverClicked]",
resetButton: "button[action=ButtonHomeResetClicked]",
backButton: "button[action=ButtonBackHome]"
},
control: {
overButton: {
// The commands fired by the notes list container.
tap: "onOverCommand"
},
resetButton: {
// The commands fired by the notes list container.
tap: "onResetCommand"
},
backButton: {
tap: "onBackCommand"
}
}
},
onOverCommand: function () {
console.log("Op home over knop gedrukt");
this.changeScreenToOverPage();
},
onResetCommand: function () {
console.log("Op home reset knop gedrukt");
this.changeScreenToResetPage();
},
onBackCommand: function () {
console.log("Op back knop gedrukt");
this.changeScreenToHomePage();
},
changeScreenToOverPage: function () {
console.log("Verander screen!");
Ext.Viewport.animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
},
changeScreenToResetPage: function () {
console.log("Verander screen!");
Ext.Viewport.animateActiveItem( { xtype : 'homeresetcard'}, {type: 'slide', direction: 'left'});
},
changeScreenToHomePage: function () {
console.log("Verander screen!");
Ext.Viewport.animateActiveItem( { xtype : 'maincard'}, {type: 'slide', direction: 'right'});
},
// Base Class functions.
launch: function () {
this.callParent(arguments);
// Ext.getStore("Notes").load();
console.log("launch");
},
init: function () {
this.callParent(arguments);
console.log("init");
//this.onOverCommand();
}
});
I hope my question is clear.
Thanks in advance for your help.
UPDATE
Here is some code that should get the right component:
changeScreenToOverPage: function (button, e, eOpts) {
var maincard = Ext.Viewport.getComponent(0).animateActiveItem( { xtype : 'homeovercard'}, {type: 'slide', direction: 'left'});
console.log("Verander screen!");
}
The problem is that you are calling animateActiveItem on the viewport, you need to call it on the tabpanel which is your maincard xtype that sits in the viewport
I'm creating a sencha touch app and the design requires a segmented button in the tab bar.
Is there an easy way to do this with sencha built-in features or do I have to create that by myself (add a toolbar with the segmented button as an item and create all the controls to actually get the same thing)?
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton',
],
xtype: 'album',
id: 'album',
fullscreen: true,
config: {
tabBar: {
layout: {
pack: 'center',
},
items: {
xtype: 'segmentedbutton',
allowDepress: false,
listeners: {
initialize: function() {
Ext.SegmentedButton.implement({
setActive: function(activeItem) {
this.setActiveItem(activeItem);
}
});
}
}
}
},
autoDestroy: true,
activeItem: 1,
items: [
{
title: 'HIGHLIGHTS',
xtype: 'highlightview',
id: 'highlightView'
},
{
title: 'KATEGORIEN',
xtype: 'categoryView',
id: 'categoryView',
},
{
title: 'SUCHE',
xtype: 'searchView',
id: 'searchView',
}
],
}
That's what I tried so far. the listener is there to get around the error of [Object] Object has no method 'setActive', but doesn't result in the behaviour I'd like it to have.
//take a tap panel and inside the tap panel create panel as a xtype
//give item id to each button in segmented button to create listener and later on assign a //function to it
extend: 'Ext.TabPanel',
requires: [
'Ext.SegmentedButton'
],
xtype: 'album',
id: 'album',
enter code here`enter code here`
fullscreen: true,
config: {
cls:[
'styles'
],
scrollable: 'vertical',
items: [
{
xtype: 'panel',
title: 'Close Case',
items: [
{
xtype: 'segmentedbutton',
allowDepress: true,
height: 50,
items: [
{
text: 'Option 1',
pressed: true,
handler: function() {
console.log("Picked #1");
alert("foo");
itemId: "newButton11"
}
},
{
text: 'Option 2',
handler: function() {
alert("foo");
}
},
{
text: 'Option 3',
handler: function() {
alert("foo");
}
}
]
}
]
}
],
listeners: [
{
delegate: "#newButton",
event: "tap",
fn: "onNewButtonTap"
}
]
},
onNewButtonTap: function () {
//write your function here and it will work
}
//This is working for me just let me know if it works for you.
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)