Here is my current code (with heights/widths omitted):
myapp.cards.addvehicle = new Ext.TabPanel({
scroll: 'vertical',
id: "home2",
layout:{
type:"vbox",
},
dockedItems: [{
xtype: 'toolbar',
dock: 'top'
}]
});
but it places the toolbar above the tabpanel. Adding a toolbar in the items part of the configuration object doesn't produce the desired result either. Has anyone been able to accomplish this and if so, how?
Note: I believe that by default in extjs4 the toolbar appear below the tabbar when docked at the top, although I can't confirm this.
Many thanks.
the bottom on the docked toolbar item:
myapp.cards.addvehicle = new Ext.TabPanel({
scroll: 'vertical',
id: "home2",
layout:{
type:"vbox",
},
dockedItems: [{
xtype: 'toolbar',
dock: '**bottom**'
}]
});
Related
How to get following layout in extjs 4.1.3??
I want checkbox to attach next to textbox.
Any Idea?
You are looking for a FieldContainer with an hbox layout. See the docs here: http://docs.sencha.com/extjs/4.1.3/#!/api/Ext.form.FieldContainer
{
xtype: 'fieldcontainer',
fieldLabel: 'lamp failed',
layout: 'hbox',
items: [{
xtype: 'textfield'
}, {
xtype: 'checkbox'
}]
}
I'm trying to add a button (right aligned) on the toolbar of a nestedlist. Here is my code :
Ext.define('Test.view.NestedList', {
extend: 'Ext.Panel',
requires: ['Ext.dataview.NestedList'],
xtype: 'mynestedlist',
config: {
modal: true,
centered: true,
layout:'fit',
width:'80%',
height:'80%',
items: [{
xtype: 'nestedlist',
fullscreen: true,
title: 'Groceries',
displayField: 'text',
store: 'MyTreeStore',
initialize: function(){
console.log("Add the button on the toolbar");
this.getToolbar().add({xtype: 'spacer'});
this.getToolbar().add({xtype: 'button', iconCls: 'compose', ui: 'plain', action: ''});
}
}]
}
});
The button does not align to the right of the toolbar but appears to the left.
Does anyone have an idea to make this ?
Thank you
One thing you can do is try adding a titlebar to your nestedlist and then align the button right.
Long story short: I've got a mainPanel which consists of a tabBar on the bottom and a docked toolBar on top.
From a tabPanel that is selected, I have elements inside of it, in this case other buttons. On a button tap, I want to load a different panel that I've created, which is not one of the tabBar panels.
So I'm hiding the current tabPanel and showing the panel that is tied to the button click. I can get it to show up. The issue is that the panel that shows doesn't render correctly until I actually rotate the device. The image / items on the panel are usually off to the bottom right.
Sometimes the toolbar that I have attached to the new panel disappears completely as well. I'm clueless as to why this is happening, and hoping someone can explain to me what I need to do. I'm using the latest version of Sencha Touch 1.x.
fyi: this is a xpost from (http://www.sencha.com/forum/showthread.php?171567-Loading-another-panel-causes-incorrect-rendering...&p=710474#post710474). I wasn't getting an answer that made sense so I'm coming to SO for hopefully some assistance.
Code Snippets Below:
INITIAL TAB FROM TABPANEL
var TAB1 = {
title: "TAB1",
layout: 'vbox',
items:[
{html: "<h1>TAB1</h1>"},
panel2_btn, panel3_btn, panel4_btn,
{flex: 1},
{html: "<h3>EMAIL US</h3>"},
sevenday_btn
],
iconCls: 'TAB1',
style: "color: #2e2e2e; font-family: 'Arial'; font-weight: bold",
}
BUTTON FOR NEW PANEL
var panel2_btn = new Ext.Button({
centered: true,
cls: 'button',
text: 'TAP FOR PANEL2',
handler: function(e){
mainTabPanel.hide();
viewStack.push(panel2);
panel2.show();
}
});
PANEL THAT BUTTON TAP SHOULD LOAD
var panel2 = new Ext.Panel({
id: 'panel2',
layout: 'vbox',
fullscreen: true,
dockedItems: [
backToolbar],
items: [
{flex: 1},
{html: "<h1>PANEL 2</h1><img src='resources/assets/panel2.png' id='panel2'/>"},
{flex: 1}
]
});
TAB PANEL
var tabPanel = new Ext.TabPanel({
id: 'tabPanel',
dock: 'bottom',
styleHtmlContent: true,
tabBar: {
cls: 'tabBar',
dock: 'bottom',
layout: {
pack: 'center'
}
},
defaults: {
scroll: 'vertical',
layout: 'hbox'
},
items: [TAB1, TAB2, TAB3, TAB4, TAB5]
});
MAIN PANEL CREATION
var mainPanel;
Ext.setup({
tabletStartupScreen: 'startup-splash-logo.png',
phoneStartupScreen: 'phone-startup-splash-logo.png',
icon: 'icon.png',
glossOnIcon: true,
fullscreen: true,
onReady: function(){
mainPanel = new Ext.Panel({
id: 'mainPanel',
fullscreen: true,
dockedItems: [
toolbar
],
items: [tabPanel],
layout: 'card',
scroll: 'vertical'
});
}
});
TOOLBAR CREATION
var toolbar = new Ext.Toolbar({
id: 'mainToolbar',
dock: 'top',
cls: 'toolbar',
layout: {
pack: 'justify',
align: 'center'
},
items: [
{xtype: 'spacer'},
logo,
{xtype: 'spacer'}
]
});
LOGO
var energy_fitness_image = new Ext.BoxComponent({
centered: true,
cls: 'energy_fitness_logo'
});
There are a couple of things that I've noticed in your code, although your code snippets fall short to fully understand how your views are structured:
First of all, try adding the element before hiding the active one
viewStack.push(panel2);
mainTabPanel.hide();
panel2.show();
You could call panel2 or the viewport's doLayout() method after adding it
If you don't strictly need tabs, try using a viewport with a card layout. You can switch between them with setActiveItem() and you can add new ones to the viewport with the panel's add() method instead of using an array like you're doing right now.
When I create a toolbar like below the title is misplaced to the right of the last button, any ideas how to fix it?
{
xtype: 'toolbar',
docked: 'top',
title: 'Chat',
items: [{
xtype: 'button',
text: 'Places',
ui: 'back',
id: 'backToPlaces'
},
{
xtype: 'spacer'
},
{
xtype: 'button',
text: 'People',
ui: 'forward',
id: 'toProfiles'
}
I was also fighting with the toolbar. Then I discovered the navigationbar.
The title is in the center. With a button aligned left and right. (see align property)
{
docked: 'top',
xtype: 'navigationbar',
title: 'Chat',
items: [
{
xtype: 'button',
ui: 'back',
action: 'back',
text:'BACK',
itemId: 'backButton'
},
{
xtype: 'button',
ui: 'decline',
action: 'cancel',
text:'Cancel',
itemId: 'cancelButton',
align : 'right'
}
]
}
just after answered this, i found the "centered" attribute and looked at creation of title element of sencha, so just forget this above and use in your config:
var myToolbar = new Ext.Toolbar({
docked : 'top',
title: {
title: 'my Title',
centered: true
},
items : []
});
In Sencha 2 there is no "special" title element, it is created as simple element in the "items". So i future, you can just add it at right place direcly by placing the config to your docked bar:
var myToolbar = new Ext.Toolbar({
docked : 'top',
items : [{
xtype: 'spacer',
},{
xtype: 'title',
title : 'Hello World'
},{
xtype: 'spacer',
}]
});
Only with spacer it is in the middle.
It is clearly stated in the docs that NavigationBar is a private class for internal use by the framework http://docs.sencha.com/touch/2-0/#!/api/Ext.navigation.Bar and the centered attribute metioned by anj does not work as expected (at least in the latest release).
According to this post http://www.sencha.com/forum/showthread.php?161082-PR3-Toolbar-title-position-broken-when-spacers-control-button-positioning&p=691928 it is simply a bug that the title is not centered and we should wait for next release. In the meantime you might use navigationbar if you need to.
If you want to leverage something similar to how titles in Toolbar behaves of Ext.navigation.Bar. see the Ext.TitleBar http://docs.sencha.com/touch/2-0/#!/api/Ext.TitleBar
This class handles things like long titles for you by automatically adding ellipses and the title is always centered horizontally.
There is no longer a NavigationBar component which is public. It is simply used internally by NavigationView. You should never use this.
Instead, you should use Ext.TitleBar. This allows you to center the title config and also use the align property on items (normally buttons) to align them to the left or right.
It also has built in support when the title is too long, or any items are too wide. It will automatically limit the length of all items to a certain width, and add ellipse to the title if needed.
Here is a simple example:
var titleBar = Ext.create('Ext.TitleBar', {
docked: 'top',
title: 'Navigation',
items: [
{
iconCls: 'add',
iconMask: true,
align: 'left'
},
{
iconCls: 'home',
iconMask: true,
align: 'right'
}
]
});
Ext.Viewport.add(titleBar);
I have tried the following with no success:
items:[myapp.buttons.resultsPrevious, {xtype: 'spacer'}, myapp.buttons.resultsNext]
items:[myapp.buttons.resultsPrevious, '->', myapp.buttons.resultsNext]
Where items are the items of the relevant toolbar.
And I have also tried to use the align property of the buttons:
align: 'left'
in the configuration for the buttons, but that doesn't work either.
Any tips appreciated. Thanks.
The toolbar must have the layout property configured:
layout: {
pack: 'left'
},
Then we have to use docked property for aligning the button right or left.
xtype: 'toolbar',
docked: 'bottom',
items:
[
{
xtype: 'button',
id:'btn1',
html:"left btn",
docked: 'left'
},
{
xtype: 'button',
id:'btn2',
html:'right btn,
docked: 'right'
}
]