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.
Related
I have put two buttons inside a tab Panel in Sencha Touch 2 application. The code is given below:
var btnAttendance = Ext.create('Ext.Button', {
text: 'Take Attendance',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var btnAddUser = Ext.create('Ext.Button', {
text: 'Add User',
padding: 10,
width: 200,
handler: function () {
alert('a');
}
});
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: true,
title: 'Home',
defaults: {
margin: 5
},
layout: {
type: 'vbox',
align: 'center'
},
padding: 10,
items: [
btnAttendance,
btnAddUser
]
});
Ext.application({
requires: [
'Ext.tab.Panel'
],
launch: function () {
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
buttonContainer,
{
title: 'Present',
items: {
html: '2',
centered: true
},
cls: 'present'
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
}
});
I have tried modifying the handler function as:
handler: function (button, event)
But this also doesn't work.
Thanks,
Nitin
You need to put all your code inside Ext.application... and launch:function(){...}.... Your code is working fine. See demonstration here.
But then again, buttonContainer is not really being added to any tab panel. If you change the tab, you can see buttonContainer is gone once to change the tabs. If you want to add it inside any tab do this-
First -
Set fullscreen:false to you buttonContainer panel.
var buttonContainer = Ext.create('Ext.Panel', {
fullscreen: false,
....... //rest of the code.
And suppose you want to add those buttons in Present tab. You can do this with following--
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
title: 'Present',
cls: 'present',
items: [
{
html: '2',
centered: true
},
buttonContainer
]
},
{
title: 'Absent',
items: {
html: '3',
centered: true
},
cls: 'absent'
}
]
});
Here, buttonContainer is added as an item inside present tab only. You can switch the tabs and can see buttons there with correct event handler.
See this demo here
If you follow MVC architecture, your job becomes much easier writing application having multiple views and user interactions. ST is all about MVC and it's good practice to follow it.
I want to dynamically add a (right aligned) button to the active navigation view depending on view Im showing. Is there any proper way to do it? I found many half good examples online, but didnt get them to work. Here is what I tried:
Ext.define('Sencha.view.user.Login', {
extend:'Ext.navigation.View',
//fullscreen: true,
xtype: 'loginview',
requires:[
'Ext.form.FieldSet',
'Ext.field.Email',
'Ext.field.Password'
],
config: {
title: 'Log in',
iconCls: 'use',
cls: 'kidsbackground',
scrollable: false,
navigationBar: {
items: [
]
},
items:[
{
xtype: 'loginform'
}
]
},
addRightButton:function(button){
var navigationBar = this.config.navigationBar;
console.log("navigationBar: "+navigationBar);
var rightButton = Ext.Button.create({
xtype: 'button',
ui: 'action',
iconCls: 'action',
iconMask: true,
align: 'right' });
console.log("rightButton: "+rightButton);
//navigationBar.addItem(rightButton);
var oNavigationbar = {
docked: 'top',
backButton : {
margin: 7,
docked: "left",
ui : 'back'
},
items: [
Ext.create("Ext.Button", {
text: "Button1"
}),
Ext.create("Ext.Button", {
text: "Button2",
align: "right"
})
]
};
this.setNavigationBar(oNavigationbar);
/*this.setNavigationBar({
items: [
{
id: 'rightButton',
xtype: 'button',
text: 'yes!'
//placeHolder: 'Search...',
//align: 'right'
}
]
});*/
console.log("wow, no crash, really ?");
}
});
When I run the above code I get strange errors, one of this is this (see attachment):
You can try this code (in Chrome Developer Tools' console) on the Sencha Touch 2 Navigation View example :
Ext.ComponentQuery.query('navigationview')[0].getNavigationBar().add({
xtype:'button',
text:'Right',
align:'right'
});
It basically get the navigationview, then the navigation bar of this view and finally add the button to it.
This is the proper way to add a button to the navigation bar.
Hope this helps
different way
var navigationView = Ext.create('Ext.NavigationView',
{
useTitleForBackButtonText: false,
scrollable: false,
layout:
{
type: 'card',
animation: null
},
navigationBar:
{
items:
[
{
xtype: 'togglefield',
name: 'smsmode',
align: 'right',
value: 0,
disabled: true
},
{
text: '',
iconCls: 'delete',
align: 'right',
ui: 'back',
listeners:
{
tap: function()
{
navigator.app.exitApp();
}
}
}
]
}
});
I'm practicing with Sencha Touch. I created a simple tabbar that's docked at the bottom of the screen. Here's my code:
Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
onReady: function() {
Ext.regModel('ListItem', {
fields: [{name: 'text', type: 'string'}]
});
var d1 = new Ext.data.TreeStore({
model: 'ListItem',
root:{text:'D1',items:{}},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
var d2 = new Ext.data.TreeStore({
model: 'ListItem',
root:{text:'D2',items:{}},
proxy: {
type: 'ajax',
reader: {
type: 'tree',
root: 'items'
}
}
});
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
});
}
});
What I want to do next is create a toolbar directly on top of the tab bar. This toolbar will print some text (which I'll eventually use to create a scrolling newsfeed). How do I add a toolbar directly on top of the tab bar?
Here you go :
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({
dock:'left',
title:'title',
iconCls:'home',
width:'350',
store:d1,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Docked to the bottom'
}]
}]
}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
});
The first tab now have a toolbar just above the tabbar
I'm playing around with something similar tonight, trying to add a message bar above the tab bar. I found a nice way to do it using the initComponent method (I'm using lazy instantiation and Ext.extend to create xtypes). Here's a modified version of your tabBar code that worked for me:
tabBar = new Ext.TabPanel({
id:'tabPanel',
fullscreen:true,
tabBar: {
dock: 'bottom'
},
items:[
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d1}),
new Ext.NestedList({dock:'left',title:'title',iconCls:'home', width:'350', store:d2})
]
listeners: {
beforerender: function(){
this.addDocked({
html: 'hello world',
dock: 'bottom'
});
}
}
});
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);
}