I place tabPanel's tabBar on top postion and keep bottom style, so refer to this thread, and the display result is ok but the tab bar not extend all space, at the top right corner of page shows background. ( about 30px at my 1024px resolution).
when use Chrome to view it, if I open Developer Tools and then close it, then tab bar becomes ok. (occupy all screen with).
I try tabPanel.doLayout() or viewPort.doLayout(), both not works.
Please give any advice, Thank you !
var tabPanel = new Ext.TabPanel({
id:'tabPanel',
tabBar : {
dock : 'top',
layout : { pack : 'right' },
},
listeners: {
single: true,
afterlayout: function (panel) {
var dom = Ext.select('.x-docked-top', panel.getEl().dom).first().dom;
dom.className = dom.className.replace('x-docked-top', 'x-docked-bottom');
}
},
defaults: {
scroll: 'vertical'
},
cardSwitchAnimation: {
type: 'slide',
duration: 1
},
flex: 1,
ui: 'light',
items : [
{
iconCls : 'icon1',
items: [ scanPanel ]
},
{
iconCls : 'icon2',
items: [ logPanel ]
}
]
});
...
var viewPort = new Ext.Panel({
fullscreen : true,
layout : {
type : 'fit',
align : 'stretch'
},
items : [ tabPanel]
});
the Ext.Panel has a default setting for padding, try to move the tabBar into Ext.Panel.
Related
I have this code which creates a floating panel centered to the screen:
Ext.define('myapp.view.ButtonNav', {
extend: 'Ext.Container',
xtype: 'myapp_buttonnav',
config: {
fullscreen: false,
layout: 'hbox',
items: [
{
xtype: 'button',
text: 'Button 1',
listeners: {
tap: function () {
var panel = Ext.Viewport.add({
xtype: 'panel',
defaultType: 'button',
baseCls: 'btn1_cont',
centered: true,
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{
baseCls: 'btn1',
text: 'HOME PAGE',
handler: function() {
Ext.Viewport.setActiveItem({
xtype: 'myapp_homepage'
});
panel.destroy();
}
}
],
top: // SET TOP TO SOURCE BUTTON
left: // SET LEFT TO SOURCE BUTTON
});
}
}
},
]
}
});
As you can see, it is a container, with a button which when clicked shows a floating panel.
How do i position the floating panel centered to the button that triggered the floating panel?
If I understand correctly, you need to use the showBy function like so :
myPanel.showBy(myButton);
It will show the panel next to the button and you can choose the alignment as well.
You can take a look at the documentation
How to get the button
If you take a look at the tap listener signature : http://docs.sencha.com/touch/2-0/#!/api/Ext.Button-event-tap
You can see that the first parameter is the button itself so :
listeners: {
tap: function (myButton, myEvent) {
... // create your panel
myPanel.showBy(myButton);
}
}
Hope this helps
I'm having trouble with the layout of a FormPanel in Sencha Touch 2. See example app below.
There should be a panel with 'vbox' layout containing 3 items: a piece of text, a FormPanel, and another piece of text. However the FormPanel seems to get size 0x0 and not show up at all, so I only see the two texts.
I found 2 things that get the form panel to show up:
Setting layout: 'fit' on the outer panel. But then everything overlaps. fit isn't really designed for more than one item, so this isn't a solution.
Settings explicit width and height config on the FormPanel. But I want it to layout itself and not have to specify this in pixels. Why would I need to do this?
I've tried a bunch of other random params, but I'm just shooting in the dark. So what am I missing?
Ext.application({
name: 'TestApp',
launch: function() {
return Ext.Viewport.add({
xtype: 'panel',
layout: {
type: 'vbox',
align: 'center'
},
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items: [
{ html: 'Fill in the form below' },
{
xtype: 'formpanel',
// width: 300, // These fixed sizes reveal the form, but why?
// height: 300, // These fixed sizes reveal the form, but why?
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
{ html: 'Fill in the form above' }
]
});
}
});
Set scrollable property of your formpanel object to false, that will solve the problem.
{
xtype: 'formpanel',
scrollable: false,
items: [
{
xtype: 'fieldset',
items: [
{
xtype: 'textfield',
name: 'username',
label: 'Username'
}
]
}
]
},
Update. Please note, that in newer releases of Sencha (2.3) you will have to use scrollable: null, as noticed by Nathan Do in his comment to this answer. But since it's not documented feature in can be changed in the future.
TracKer's answer is correct, but he doesn't provide an explanation for why.
Here's my take at why you need scrollable:false.. If the formpanel IS scrollable, then you need to tell Sencha how big to make it (and within that size the user can scroll around it). However, if it's NOT scrollable, it will take up the entire space it's allowed, and to get to be bigger the user can scroll around to access it.
A bit confusing =\
I kind of switched around your code a little but here's what I came up with:
Ext.application({
name : 'TestApp',
requires: ['Ext.form.Panel', 'Ext.form.FieldSet'],
launch : function() {
var paneltest = Ext.create('Ext.Panel', {
fullscreen: true,
layout: 'vbox',
// layout: 'fit' // This shows the form, but overlaps all 3 panel items.
items : [
{
html : 'Fill in the form below',
flex: 1
},
{
xtype: 'formpanel',
flex: 1,
items : [
{
xtype : 'fieldset',
items : [{
xtype : 'textfield',
name : 'username',
label : 'Username'
}]
}
]
},
{
html : 'Fill in the form above',
flex: 1
}
]
});
Ext.Viewport.add(paneltest);
}
});
My main change to your code was that I removed the
layout: {
type: 'vbox',
align: 'center'
}
and I changed it to
layout: 'vbox'
I also added a flex to your elements. This is the proper way to use the vbox and hbox layouts. I'm not totally sure why this works, however it does look like 'center' is not a valid value you can give the align attribute. I think you are looking for 'middle'. And if that doesn't give you what you are wanting maybe try to add a class or id to your panel and control the alignment with css. Hope this helps.
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 writing a Sencha Touch 1.1 MVC app.
My view code looks like this
MyApp.views.MainIndexView = Ext.extend(Ext.TabPanel, {
ui: 'light',
cardSwitchAnimation: {
type: 'slide',
cover: true
},
initComponent: function() {
this.topToolbar = new Ext.Toolbar({
title: 'My App'
})
this.temperatureTab = new Ext.Panel({
title: 'Temperature',
html: '<h1>Log A Temperature</h1>'
})
this.dockedItems = [this.topToolbar];
this.items = [this.temperatureTab];
this.tabBar = {
dock: 'bottom',
layout: {
pack: 'center'
}
}
MyApp.views.MainIndexView.superclass.initComponent.call(this);
}
})
The view renders, but the tabBar at the bottom is super small. It makes no sense.
Is there a way to make this normal height without adding icons?
Adding icons was the only way that I found to fix this.
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.