pardon my naivety here. I'm trying to make buttons on a ToolBar link to a new card as opposed to TabPanels. The new card will have different panel elements than the home I've watched all the video tuts and read several articles on here, yet somehow never quite manage to get it sorted.
new Ext.Application({
name: 'Demo App',
launch: function() {
this.viewport = new Ext.TabPanel({
fullscreen: true,
id: 'mainPanel',
html: 'Welcome',
cls: 'homescreen',
dockedItems: [{
xtype: 'toolbar',
ui: 'light',
title: 'Home',
items: [
{text: 'Option1', ui: 'action', flex: 1},
{xtype: 'spacer', },
{text: 'Option2', ui: 'action',flex: 1 }
]
}]
});
}
});
That's not really the point of a tab panel. It's supposed to load cards into the main panel and let you move between them. You could load a new fullscreen panel (which could have it's own tab panel or other elements) by intercepting the card switch and rendering your new separate panel like so:
new Ext.Application({
name: 'Demo App',
launch: function() {
this.viewport = new Ext.TabPanel({
fullscreen: true,
id: 'mainPanel',
cls: 'homescreen',
items: [{
title : 'Home',
html : 'Welcome'
},{
title : 'Full screen'
}],
listeners : {
beforecardswitch : function (ct, newcard, oldcard) {
if (newcard.title == 'Full screen') {
var panel = new Ext.Panel({
fullscreen : true,
dockedItems : [{
xtype : 'toolbar',
title : 'Full screen',
dock : 'top',
}],
html : 'Full!'
});
return false;
} else {
return true;
}
}
}
});
}
});
You would then have to close that panel somehow (a close button probably) so the user could return to the original tab panel. Though you are better off leaving the tab panel as is and add new cards to panels within the tab panel.
Hope this answers your question.
Related
I'm starting to use sencha touch. I've been able to create a nestedlist layout where clicking on a leaf element triggers a getdetailcard. Now I want to do something that's kind of the reverse of that.
I want to now create a home page with nothing on it but a logo. WHen user clicks on logo, the layout scrolls to a nested list of items.
can someone point me to the relevant documentation or show me sample code?
Thanks
You need to add panel card to your viewport and then on logo tap change the active item.
Here is sample code:
var data = {
text: 'Groceries',
items: [{
text: 'Drinks',
items: [{
text: 'Water',
items: [{
text: 'Sparkling',
leaf: true
}]
}]
}]
};
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var store = new Ext.data.TreeStore({
model: 'ListItem',
root: data,
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var nestedList = new Ext.NestedList({
title: 'Groceries',
displayField: 'text',
store: store
});
var MyApp = new Ext.Application({
name: 'MyApp',
launch: function() {
MyApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items: [
{
xtype: 'panel',
html:'<img src="https://www.google.com/intl/en_com/images/srpr/logo3w.png">',
listeners:{
el:{tap:function(){MyApp.views.viewport.setActiveItem(1,{type:'slide',direction:'left'});}}
}
},
nestedList
]
});
}
});
I'm a newbie to SenchaTouch. I have started working on an App and the results are this until now: http://mobz.com.br:86. (based on the Sencha-Touch-tabs-and-toolbars-demo)
Now I started playing with it and I have difficulties to set things strait in my head.
I have lot of JQuery experience, but regarding the design of this library, the coin haven't dropped yet.
I got a TabPanel with 5 sections. I will focus only in one section cause there where my problem is.
The Problem
As you can see in my app, when one clicks an item of ingressos (tickets in English), the app loads the second panel, but load it with bugs.
It loads it without the title bar, without the Back button, and also add an empty sixth button on the right.
But if I load the second panel first, when the page loads, it loads without any UI issues.
My Code
First I declare my ViewPort
Mobz.views.Viewport = Ext.extend(Ext.TabPanel, {
fullscreen: true,
initComponent: function() {
Ext.apply(this, {
tabBar: {
dock: 'bottom',
layout: {
pack: 'center'
}
},
items: [
{ xtype: 'destaques', id: 'home' },
{ xtype: 'ingressos' },
{ xtype: 'mobilizacoes' },
{ xtype: 'locais' },
{ xtype: 'minhaconta' }
]
});
Mobz.views.Viewport.superclass.initComponent.apply(this, arguments);
}
});
Than after, at the ingressos.js file, I define the tab.
First I got the panel that will load the items into it.
Mobz.views.Ingressos = Ext.extend(Ext.Panel, {
id: "ingressos",
title: "Ingressos", //title of the page
iconCls: "arrow_right", // icon of the tab at the bottom
styleHtmlContent: true,
fullscreen: true,
layout: 'card',
initComponent: function () {
Ext.apply(this, {
dockedItems: [{
xtype: "toolbar",
title: "Ingressos"
}],
items: [Mobz.views.IngressosList]
});
Mobz.views.Ingressos.superclass.initComponent.apply(this, arguments);
}
});
Ext.reg('ingressos', Mobz.views.Ingressos);
This is the initial item that load into the panel.
Mobz.views.IngressosList = new Ext.List({
id: 'ingressoslist',
itemTpl: IngressosList_Template,
store: Mobz.stores.IngressosStore,
onItemTap: function (subIdx) {
//Mobz.views.IngressoCinemaList.update(subIdx);
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
}
});
And that's the second panel.
The panel where the first panel goes to.
Mobz.views.IngressoTitle = new Ext.Panel({
id: 'ingressotitle',
tpl: IngressoTitle_Template,
data: Mobz.stores.IngressoTitle_Store
});
Mobz.views.IngressoCinemaList = new Ext.List({
id: 'ingressocinemalist',
itemTpl: IngressoCinemaList_Template,
store: Mobz.stores.IngressoCinemaListStore,
flex: 1, grouped: true,
dockedItems: [{
xtype: 'toolbar',
items: [{
text: 'Back',
ui: 'back',
handler: function () {
Mobz.views.viewport.setActiveItem(Mobz.ingressos, { type: 'slide', direction: 'right' });
}
}]
}
],
onItemDisclosure: function () {
app.views.viewport.setActiveItem(Mobz.views.IngressosHorario, { type: 'slide', direction: 'left' });
}
});
Mobz.views.Ingresso = new Ext.Panel({
id: 'ingresso',
layout: {
type: 'vbox',
align: 'fit'
},
items: [Mobz.views.IngressoHorario_IngressoECinemaTitles, Mobz.views.IngressoCinemaList]
});
That's it.
I hope some of you guys will have the patient to read all my code examples. I'll appreciate any help.
Shlomi.
First, you must understand the logic about the panels.
You have an TabPanel and you have 5 panel in it. If you run your code when you click a ticket as you described in problem, your code added a new pane to TabPanel. But you need to set active item of Ingression panel(second panel which is in tabPanel).
Now start the solution;
The second tab has a panel(I will say senchaTabItem) whose layout is card layout. And this panel has a panel in it with list of Ingressos. We want to remove this panel and replace the new panel so we should not call the tabPanel's method, we must call to senchaTabItem's method.
So if you replace below code
Mobz.views.viewport.setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
with working code(below code).
Mobz.views.viewport.getActiveItem().setActiveItem(Mobz.views.IngressoCinemaList, { type: 'slide', direction: 'left' });
In your site; it is at line 170 in ingressos.js
I tried and it works, I hope it helps
I have a panel inside a panel as an item, along with other docked items.
For some reason it is not showing up.
These are stuffs to add to main panel:
MarketMakerApp.views.businessInfo = new Ext.Panel({
id: 'businessInfo',
layout: 'fit',
html: '<br /><br /><br /><div>{ id } </div>' + '<div>{ title }</div>'
//html: 'This is the business info view'
});
MarketMakerApp.views.businessTabbar = new Ext.TabBar({
dock: 'bottom',
ui: 'dark',
items: [
{
text: '1',
iconCls: 'info',
hander: function() {
MarketMakerApp.views.viewport.setActiveItem('businessInfo', {type: 'slide', direction: 'left' });
}
},
{
text: '2',
iconCls: 'star',
hander: function() {
this.add( MarketMakerApp.views.businessInfo);
this.setActiveItem(2);
}
},
{
text: '3',
iconCls: 'map',
hander: function() {
}
}
]
});
And the main panel is this:
MarketMakerApp.views.businessContainer = new Ext.Panel({
id: 'businessContainer',
layout: 'fit',
dockedItems: [
MarketMakerApp.views.businessTypeListToolbar,
MarketMakerApp.views.businessTabbar
],
items: [ MarketMakerApp.views.businessInfo]
});
The tabbar and toolbar are showing up fine, but I can't see the businessInfo panel.
Any suggestions would be appreciated.
p.s. I struggled with Tabpanel far too long to give up and just using tabbar now.
I haven't had any success in creating Panels (or whatever your view is) programmatically like that. Here's some code that does work w/that approach though.
Add an initComponent function to your businessContainer like the following instead of setting the items on the businessContainer panel:
initComponent: function(){
Ext.apply(this, {
items: [
MarketMakerApp.views.businessInfo
]
});
MarketMakerApp.views.businessContainer.superclass.initComponent.apply(this, arguments);
}
I have a panel which has a toolbar as docked item. I want to add a button inside this docked toolbar. But when i add it, it doesn't show up at all.
So how do I do that? Or is there a more convenient way to achieve this?
And, if I want to add it to the right side of the toolbar?
Thanks.
Here's a simple example. You use the "spacer" concept to float the button to the right side. There is a good explanation of how this works here.
new Ext.Application({
launch: function() {
var tapHandler = function (btn, evt) {
alert("Button '" + btn.text + "' tapped.");
}
var dockedItems = [
{
xtype: 'toolbar',
title: 'Buttons',
ui: 'dark',
dock: 'top',
items: [
{ xtype: 'spacer' },
{ ui: 'forward', text: 'Forward' }
],
defaults: { handler: tapHandler }
}];
new Ext.Panel({
fullscreen: true,
dockedItems: dockedItems,
html: 'Hello World!'
});
}
});
Hey guys I'm starting to work with Sencha Touch and it feels like the tutorials I've read/documentation is helpful. I'm trying to understand: the difference between tabbar and tabpanel and when to use them
For example I have a index panel with list items, once someone clicks it, it goes to a page with a tabbar on the bottom. am I suppose to use a new panel with a tabbar or just a tabpanel?
I was working on something similar, check out the code below. As for the difference between TabPanel and TabBar it seems that TabBar is just a component of TabPanel used for displaying and manipulating tab buttons.
The list part of the below code has been taken form sencha touch API List
Ext.setup({
onReady: function() {
Ext.regModel('Contact', {
fields: ['firstName', 'lastName']
});
var store = new Ext.data.JsonStore({
model : 'Contact',
sorters: 'lastName',
getGroupString : function(record) {
return record.get('lastName')[0];
},
data: [
{firstName: 'Tommy', lastName: 'Maintz'},
{firstName: 'Rob', lastName: 'Dougan'},
{firstName: 'Ed', lastName: 'Spencer'}
]
});
var tabPanel = new Ext.TabPanel({
tabBar:{
dock: 'bottom', // will put the menu on the bottom of the screen
layout:{
pack: 'center' // this will center the menu
}
},
items:[
{
title: 'tab 1',
html: 'TAB 1',
iconCls: "home"
},
{
title: 'tab 2',
html: 'TAB 2',
iconCls: "bookmarks",
}
]
});
var list = new Ext.List({
itemTpl : '{firstName} {lastName}',
grouped : true,
indexBar: true,
store: store,
listeners: {
itemtap:function (subList, subIdx, el, e) {
console.log(subList, subIdx, el, e);
var store = subList.getStore(),
record = store.getAt(subIdx);
if (record) {
mainPanel.setActiveItem(tabPanel, 'slide');
}
}}
});
// Main panel viewport
var mainPanel = new Ext.Panel({
fullscreen: true,
layout: 'card',
items:[list]
});
mainPanel.show();
}
});
You should be able to do it with just a tabPanel. Add a tabBar property with dock : bottom.
For the objects in your items list, add a title and iconCls so that the buttons appear with names and icons.