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!'
});
}
});
Related
In my application, I'm using a tab panel with 5 items in it. Each item holds around 6 panels added in card layout. When I'm at the last panel inside a tab item, I need to get back to the initial panel by clicking on the bottom tab panel (somewhat similar to a normal tab view controller in iOS). I have came across some solutions I found here, but it seems to work only when I switch between the tabs. In fact I want to listen to the click event on the same tab icon. How can I do this?
I have worked on your problem. I think this is exactly what you want. Hope this helps. If not so, please leave a comment.
1). View (MyTabPanel1.js)
Ext.define('MyApp.view.MyTabPanel1', {
extend: 'Ext.tab.Panel',
config: {
scrollable: 'vertical',
items:
[
{
xtype: 'panel',
id:'cardpanel1',
title: 'Tab1',
layout: 'card',
items: [
{
html: "First Item",
items:
[
{
xtype: 'button',
text: 'Forward',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(1);
console.log('Going to Second Item');
}
}
]
},
{
html: "Second Item",
items:
[
{
xtype: 'button',
ui: 'confirm',
text: 'Go back',
handler: function() {
Ext.getCmp('cardpanel1').setActiveItem(0);
console.log('Going to First Item');
}
}
]
}
]
},
{
xtype: 'panel',
title: 'Tab2',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab2'
}
]
},
{
xtype: 'panel',
title: 'Tab3',
scrollable: true,
items: [
{
xtype: 'button',
margin: 10,
ui: 'action',
text: 'Tab3'
}
]
}
]
}
});
2). Controller (MainController.js)
Ext.define('MyApp.controller.MainController', {
extend: 'Ext.app.Controller',
config: {
control: {
"tabpanel #ext-tab-1":{ //ext-tab-1 is the id for the 1st tab generated by Sencha
tap: 'ontap'
}
}
},
ontap: function (){
console.log('inside controller');
Ext.getCmp('cardpanel1').setActiveItem(0);
}
});
I would give a much simpler solution
This is my view called Viewport which is a TabPanel:
Ext.define('Sencha.view.iphone.Viewport',{
extend: 'Ext.TabPanel',
xtype: 'newviewport',
alias: 'widget.newTabPanel',
Now in my controller file:
Ext.define('Sencha.controller.iphone.main', {
extend: 'Ext.app.Controller',
config:
{
refs: {
theMainTabPanelTabbarTab: 'newTabPanel > tabbar > tab', //this the tab of the tabpanel, if we listen to it that way we will know of tab panel tap.
},
control: {
theMainTabPanelTabbarTab:{
tap: 'onTapMainTabPanel'
}
}
This is a working code and works fine. Hopefully this will help you.
i have a carousel with 3 items and i have 1 toolbar. But how can i change the title of the toolbar depending on which item the carousel is showing? for example:
var theCarousel = new Ext.Carousel({
ui: 'dark',
direction: 'horizontal',
defaults: { cls: 'card', layout:'fit' },
items: [
{
html:'<b>I'm big</b>'
},
{
html:'<i>I'm oblique</i>'
},
{
html:'<u>I'm underlined</u>'
}
});
var toolbar = new Ext.Toolbar({
title: 'iToolbar' ,
dock: 'top',
items:[
{
text:'back',
ui:'back'
},{xtype: 'spacer'},
{
text:'Help',
ui:'help'
}
]
});
var panel = new Ext.Panel({
fullscreen: true,
layout: {
type : 'fit',
align: 'top'
},
defaults: {
flex: 1
},
items: [ theCarousel ],
dockedItems: [ toolbar ]
});
panel.show();
so when i am at the item 'I'm oblique' i want the title of the toolbar to show 'I'm oblique'
Anny ideas on how to do this? Ty, Already!
When each new card is revealed, Ext.Carousel fires an cardSwitch event. The handler of this event will receive the new card component as the second parameter. You can do
panel.setTitle(newCard.getYourTitle());
in the handler.
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);
}
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.