Here is a simple illustration of what I mean. It works in IE, and FF, but not in Safari.
I have four panels which are dynamically added to a tabpanel item. Three are grid panels, and one is a form panel. I need to preserve the grids proportions or sizes. I tried several layout methods (table, column, absolute etc), and nothing seems work so far. For table layout, all sizes end up being the same width. It seems my best bet is column layout, and they seem to render properly in FF, IE, but not in Safari as shown in the image. (Here it seems that column goes to second row, when the item does not fit into the current row). Initially, the title bar, and several of the column headings does not show.
Any suggestions.
Thank you.
alt text http://pssnet.com/~devone/pssops3/testing/Screenshot.png
Your best bet is probably a BorderLayout. I'm not sure how you want the page to look so I can't tell what specific configuration would be best
EDIT: Since you are using Ext 3.1, you really should check out the new HBox (sample) and VBox (sample) layouts. They are extremely powerful and will do exactly what you need.
Ext.onReady(function() {
var panel = new Ext.Panel({
id:'main-panel',
baseCls:'x-plain',
renderTo: Ext.getBody(),
width: 600,
height: 400,
layout: {
type: 'vbox',
align:'stretch'
},
defaults: {
xtype: 'panel',
baseCls:'x-plain',
flex: 1,
layout: {
type: 'hbox',
align: 'stretch'
}
},
items: [{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 1',
flex: 1
},{
title: 'Item 2',
flex: 2
}]
},{
defaults: {
xtype: 'panel',
frame: true
},
items: [{
title: 'Item 3',
html: 'sssssssssssss',
flex: 2
},{
title: 'Item 4',
flex: 1
}]
}]
});
});
Related
Ext JS : ver 6.5.2.463 theme-classic (6.2.1.167)
Browser : Chrome Version 62.0.3202.94 (64-bit)
OS : Window 10 (64bit)
Few days ago I start my application as usual but encounter an awkward behavior when I opened already collapsed panel in Chrome its title bar text was blank. I tried in on another browser it was working fine there.
I tried it on another machine it was working fine there. but when the Chrome of other machine get updated the same problem is there too.
we updated our Ext JS version from 6.2.1.167(Classic) to 6.5.2.463(Classic) but the problem is still there.
we create the similar UI on the fiddle and link is attached. so you can verify it.
https://fiddle.sencha.com/#fiddle/2acg&view/editor
is there anyone else facing the same issue ?
To reproduce the issue:
1. Open the link to a fiddle.
2. Click on the expand button the title bar content will be shown.
3. Now click on the collapse then expand now content will disappear.
Screenshots are also attached.
title bar is blank there
You need to go though with this config collapseMode and also with code file of collapseMode.
In this FIDDLE, I have used your code and made some change as per your requirement. Hope this will help you or guide you to solve your problem.
Ext.create('Ext.panel.Panel', {
plugins: 'viewport',
title: 'ViewPort Title',
layout: 'fit',
tbar: [{
xtype: 'button',
text: 'Expand',
handler: function () {
var panel = this.up('panel').down('#bottomPanel');
panel.collapseMode = undefined;
panel.expand();
}
}, {
xtype: 'button',
text: 'Collapse',
handler: function () {
this.up('panel').down('#bottomPanel').collapse();
}
}],
items: [{
xtype: 'container',
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel Title',
region: 'center',
html: 'Sample center panel text'
}, {
xtype: 'panel',
itemId: 'bottomPanel',
title: 'Bottom Panel Title',
region: 'south',
height: 150,
collapsible: true,
collapseMode: 'mini',
collapsed: true,
layout: 'fit',
items: [{
xtype: 'panel',
html: 'Sample bottom inner panel text'
}]
}]
}]
});
I am Newbie in Extjs and use version 4.1. I want to know which component is best to use into one Ext.Viewport, to have left panel sidebar (like in Wordpress admin, like Wordpress Post/Page/Media/Categories/Settings menus etc). I want to be vertical menu, one under the other.
I found samples with Ext.tree, Ext.menu or vertical Tabs for sidebar, but i dont really know if for Ext.Viewport (not MVC Application) it is one best approach to use components in "items" property.
Ext.create('Ext.Viewport', {
layout: 'border',
items: [{
xtype: 'box',
region: 'north'
....
},{
layout: 'border',
id: 'sidebar',
region:'west',
items: HERE WANT SIDEBAR COMPONENT
....
},
{
id: 'vbox-panel',
region: 'center',
defaultType: 'container',
layout: {
type: 'vbox'
},
defaults: {
frame: true
},
items: [
{
height: 40,
html: 'Top content'
....
}, {
id: 'content',
layout: 'card',
items: [content],
flex: 2
....
}, {
flex: 2,
html: 'Bottom comtent'
....
}
]
}],
renderTo: Ext.getBody()
});
Thanks
UPDATE:
- write one comment with one simple solution, for beginers as me :)
You can use a vertical toolbar like this : http://dev.sencha.com/deploy/ext-4.1.0-gpl/examples/toolbar/vertical-toolbars.html
I use Ext5 and I have a question. Is it possible to remove text and add items into panel header after the panel collapsed?
Belows the code, the east panel is collapsible. I want to remove text and add items into header after it collapsed.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
UPDATE
In this case, I add buttons into header but when the panel is collapsed the button disappeared. Is there any way to show or add components into header when panel is collapsed?
{
region: 'east',
title: 'East Panel',
collapsible: true,
split: true,
width: 150,
header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}
}
here is the fiddle
Thanks
Please refer to "placeholder" related configs in Ext.panel.Panel class. Below is your code from fiddle modified.
Ext.create('Ext.container.Viewport', {
layout: 'border',
items: [{
region: 'east',
title: 'East Panel',
collapsible: true,
collapseMode:'placeholder',// set collapseMode to placeholder
split: true,
width: 300,
placeholder:{ // Try different components and layout configs
width:100,
items:[{
xtype:'button',
text:'Button 1'
}]
}
/*header: {
items: [{
xtype: 'button'
}, {
xtype: 'button'
}]
}*/
}, {
region: 'center',
xtype: 'tabpanel', // TabPanel itself has no title
activeTab: 0, // First tab active by default
items: {
title: 'Default Tab',
html: 'The first tab\'s content. Others may be added dynamically'
}
}]
});
The header you see collapsed is actually another instance of Ext.panel.Header created just for this purpose. I tried to find some configs to customize it, but the Ext.panel.Panel was not created having it in mind.
So you'll have to override the method which creates this reader, which I found out is called createReExpander. It's a big method hard to override without having to rewrite a lot of stuff, but it can be done.
I tried adding buttons to the header and the result was not visually nice, but at least they were created!
So I would suggest you use tools instead of buttons if you don't need text on them.
Have a pretty common task to do where I need a search form above a list to display the results, the problem is that the list is not showing the results, the store and the proxy work correctly because when I use firebug to locate the list items the list always have height of 0px.
I have already searched and the common ways to workaround this is to use a fit layout, but using that on the parent panel makes all look small as if the width used was 10px.
I cant set a fixed height because I want the list to fill the remaining space, and neither the flex option cause that stretches the search form when I want that to use the default size of the buttons and input fields.
Here is the config Im using on the view
Ext.define('MyApp.view.search.Search', {
extend:'Ext.navigation.View',
xtype: 'search_view',
config:{
items:[
{
fullscreen:true,
scroll:false,
xtype:'panel',
title:'Search',
items:[
{
xtype:'searchfield',
name:'search',
label:'Search',
},
{
xtype:'container',
layout:'hbox',
width:'100%',
margin:'3 0 0 0',
defaults:{
flex:1
},
items:[
{
xtype:'selectfield',
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
},
{
xtype:'button',
text:'Search',
action:'search'
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
}
]
},
],
}
});
This image describes what Im trying to achieve, I took this screenshot by setting manually a height to the list container, as you can see it works the problem is that the list height doesn't fill the space below the form by default.
This is what I ended up doing to solve this, it's more of a workaround since I had to change the layout to only have the list in it, and use toolbars for the search options, this way the toolbar controls only use the minimum height they need to draw themselves correctly.
Ext.define('MyApp.view.search.Search', {
extend:'Ext.Container',
xtype: 'search_view',
config:{
fullscreen:true,
layout:'card'
items:[
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'searchfield',
name:'search',
flex:6
},
{
xtype:'button',
action:'search',
iconCls:'search',
iconMask:true,
ui:'simple',
flex:1
}
]
},
{
xtype:'toolbar',
docked:'top',
items:[
{
xtype:'selectfield',
flex:1,
options:[
{text:'Option 1', value:'opt1'},
{text:'Option 2', value:'opt2'}
]
}
]
},
{
xtype:'list',
itemTpl:['{title}'],
onItemDisclosure:true,
plugins:[
{ xclass: 'Ext.plugin.ListPaging' }
]
},
],
}
});
As you can see I have two toolbars docked at the top, and the list filling the whole layout. Here is a screenshot of how it looks now.
Thanks for your time.
did you tried setting your container layout to "fit"?, basically it will use all the remaining available height, here is a great guide on layouts for sencha touch: http://docs.sencha.com/touch/2-0/#!/guide/layouts right from the docs!
Panel should have vbox layout, list should have fit layout and set flex option.
As seen if example bellow, if flex value is not set to a button, it should get default size.
From the documentation:
Flexing means we divide the available area up based on the flex of
each child component...
Here is an example:
Ext.define('MyApp.view.Main', {
extend: 'Ext.tab.Panel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Welcome',
iconCls: 'home',
html: [
"Some content"
].join("")
},
{
title: "About",
iconCls: 'star',
layout: "vbox", // this card has vbox layout
items: [{
docked: 'top',
xtype: 'titlebar',
title: 'List'
},
{
xtype: "list",
layout: "fit", // take as much space as available
flex: 1, // define flex
data: [
{name: 'Jamie Avins', age: 100},
{name: 'Rob Dougan', age: 21},
{name: 'Tommy Maintz', age: 24},
{name: 'Jacky Nguyen', age: 24},
{name: 'Ed Spencer', age: 26}
],
itemTpl: '{name} is {age} years old'
},
{
xtype: 'button',
text: "Button"
}
]
}
]
}
});
And screenshot:
Note: I am learning Sencha Touch so I am not sure that written is correct.
I want toolbar to take only nessasary \ auto size.. how can i do that?
MyViewportUi = Ext.extend(Ext.Viewport, {
layout: 'fit',
initComponent: function() {
this.items = [
{
xtype: 'panel',
title: 'My Panel',
layout: 'vbox',
tbar: {
xtype: 'toolbar',
items: [
{
xtype: 'button',
text: 'MyButton 1'
},
{
xtype: 'button',
text: 'MyButton 2'
}
]
}
}
];
MyViewportUi.superclass.initComponent.call(this);
}
});
Because a toolbar is just that, a bar, it will expand to fill all available space. Buttons placed inside a toolbar will occupy as much space as they need, but the toolbar will still expand to fill the maximum width possible.
The Ext.Toolbar has a property called autoWidth, but this will only cause the toolbar to use the css width: auto property. This is not perfect, but it's probably your best bet.