I've got an Container (which layout is HBox) and want to dynamically slide-in a panel on the left side of it (the panel shall not use the full screen width, but e.g. 1/3 of it).
I can't get it to work.
Here is what I tried:
Ext.define('MegatheriumProject.view.MainContainer', {
extend: 'Ext.Container',
alias: 'widget.maincontainerview',
requires: ['Ext.Container', 'Ext.TitleBar'],
config: {
layout: {
type: 'hbox',
animation: {
type: 'slide',
direction: 'right'
}
},
items: [
{
flex: 3,
xtype: 'titlebar',
title: 'Megatherium',
docked: 'top',
items: [
// some items
]
}
],
// some other configuration, listeners aso
This is my NavigationPanel that shall be slided into the container:
Ext.define('MegatheriumProject.view.NavigationPanel', {
extend: 'Ext.form.Panel',
alias: 'widget.navigationpanelview',
requires: ['Ext.form.Panel'],
config: {
flex: 1,
// some other config
And this is the method with which I try to add it:
showNavigation: function() {
this.getMainContainerView().add(this.getNavigationPanelView());
},
... but it turned out that it appears but doesn't get animated and doesn't use flex.
Any help?
Best greetings,
Martin
Here's a way of doing it :
http://www.senchafiddle.com/#Qh35F
Hope this helped
Thanks to TDeBailleul, it works that way but does not the exact thing that I want ;).
I wanted the title bar to get animated and scrolled away, too.
The navigation sidebar by wnielson did it for me :).
Related
What is the proper way to change the back button text?
Ext.define('myapp.view.post.PostDetail', {
extend: 'Ext.Panel',
alias: 'widget.postdetailpage',
xtype: 'postdetailpage',
config: {
navigationBar: {
config: {
//change the back button text?
defaultBackButtonText: 'Go Back',
useTitleForBackButtonText: false
}
},
scrollable: 'vertical',
styleHtmlContent: true,
tpl: ['{content}'],
}
});
The backbutton text is set in the navigation view before displaying the detailed view.
Ext.define('mimo.view.PostPanel', {
extend: 'Ext.NavigationView',
xtype: 'postPanel',
requires: [
'mimo.view.post.PostList'
],
config: {
title: 'Blog',
iconCls: 'home',
// set the back button text here
defaultBackButtonText: 'Volver',
items:[{
title: 'Las entradas de blog',
xtype: 'postlist'
}]
}
});
</pre>
You are extending Ext.Panel. Ext.Panel does not accept the navigationBar configuration, you probably want to use Ext.navigation.View. Then on that view you can pass the defaultBackButtonText property. Otherwise if you want to customize the button further, inside of navigationBar object you want to specify a button object with button properties.
In the simple example of a Panel within a ViewPort, the panel will not have scrollbars for the text overflow because the default for autoScroll is false for a panel.
Here is a working example: http://jsfiddle.net/rqZ4y/ (Thanks to CD..)
Here is a slightly more involved example, featuring a GridPanel (which has autoScroll defaulting to true, so it does not need to be set explicitly!)
Ext.application({
launch: function () {
Ext.create("Ext.Viewport", {
// layout: "fit",
items: [
{
html: "Hello!"
},
{
xtype: "grid",
title: 'Simpsons Contacts',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]
}
]
});
}
});
Working example: http://jsfiddle.net/gXsPk/
In this case, the grid does not have scrollbars.
I have disabled layout: "fit" in order to get both the panels to show. If I specify layout: "fit" then that causes the "Hello!" panel to take up all of the available space, and the grid is not visible at all.
If I remove the "Hello!" panel, and re-introduce the layout: "fit" option, then I get a grid with scrollbars!
Working example: http://jsfiddle.net/VBAyS/
What am I doing wrong here?!
I'm using Ext JS 4.1.1a
The default for autoScroll is false.
Set autoScroll: true to use overflow:'auto' on the components layout element and show scroll bars automatically when necessary.
Working example: http://jsfiddle.net/rqZ4y/
EDIT:
Using vbox layout should solve your issue.
I changed the layout to:
layout: { type: 'vbox', align: 'stretch' }
Next, I've added flex: 1 to the grid.
Working example: http://jsfiddle.net/gXsPk/1/
I need a list of names to display within a sheet in sencha touch. The sheet will display all other child items, but not the list. Am I doing something wrong, or does this simply not work? Here is the code:
myList = Ext.create('Ext.dataview.List', {
store: myStore,
itemTpl: '{firstName}, {lastName}'
});
mySheet = Ext.create('Ext.Sheet', {
items: myList
});
Ext.create('Ext.Panel', {
fullscreen: true,
items: [
mySheet,
{
xtype: 'button',
text: 'Click Me',
handler: function() {
mySheet.show();
}
}
]
});
Thanks in advance!
give it height=300. as per your requriment.
#jeremygerrits is almost correct.
IMO fit won't work as it will fit all the components.
My solution is to use vbox/hbox on the view container. Then on the components that get added, just add flex: 1.
e.g. container:
Ext.define('Tm.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'holder',
config: {
fullscreen: true,
layout: 'vbox'
}
});
and component:
Ext.define('Tm.view.MyComponent', {
extend: 'Ext.dataview.List',
xtype: 'newc',
config: {
flex: 1,
itemTpl: '{option_text}'
}
});
and in controller (assuming container ref been set):
tpl = Ext.create('Tm.view.MyComponent');
tpl.setData(data);
this.getMyContainer().add(tpl);
Then any component added displays correctly.
Try adding a layout to your panel config:
layout: 'fit'
This should make the list fill the rest of the space.
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.
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);