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.
Related
I have an ExtJS toolbar at the top of my panel that can have between 5 and 10 actions (buttons), plus a search text field as the last item.
Depending on the size of the window, all items may fit directly on the toolbar, or some of them may get put into a "more" menu button. I need to specify one of those button to have some sort of priority so it is the last one to be put on the "more" button. Or even to never be put on it.
Is there any way to achieve this?
Solution:
Add items with code. I don't know if this is exactly your case, but I often use this to arrange buttons in toolbar:
Working example:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.FocusManager.enable();
Ext.Ajax.timeout = 100 * 1000;
Ext.define('Trnd.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 400,
height: 500,
modal: true,
closable: true,
resizable: true,
layout: 'fit',
fillToolbar: function() {
var me = this;
me.toolbar.add(me.button5);
me.toolbar.add(me.button1);
me.toolbar.add(me.button2);
me.toolbar.add(me.button3);
me.toolbar.add(me.edit);
me.toolbar.add(me.button4);
},
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button1 = Ext.create('Ext.button.Button', {
text: 'Button 1'
});
me.button2 = Ext.create('Ext.button.Button', {
text: 'Button 2'
});
me.button3 = Ext.create('Ext.button.Button', {
text: 'Button 3'
});
me.button4 = Ext.create('Ext.button.Button', {
text: 'Button 4'
});
me.button5 = Ext.create('Ext.button.Button', {
text: 'Button 5'
});
me.edit = Ext.create('Ext.form.TextField', {
text: 'Edit'
});
me.toolbar = Ext.create('Ext.toolbar.Toolbar', {
enableOverflow: true,
items: []
});
me.panel = Ext.create('Ext.panel.Panel', {
tbar: me.toolbar
});
me.add(me.panel);
me.fillToolbar();
}
});
var win = new Trnd.TestWindow({
});
win.show();
});
Notes:
Tested with ExtJS 4.2
I solved this by wrapping the toolbar in a container like this:
tbar: [
{
xtype: 'container',
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [
{
xtype: 'mail-compose-toolbar',
flex: 1
},
{
xtype: 'mail-compose-search',
itemId: 'mailComposeSearch',
width: 200
}
]
}
]
The search field is of fixed width and the toolbar has a flex:1 so it stretches.
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.
Using ExtJS 4.2.1 I'm trying to add a 'composite' control to my Form Panel that consists of a textfield and a button next to it (which will invoke a lookup dialog).
I've implemented this as follows:
Ext.onReady(function () {
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
defaults:{
anchor:'100%',
border: 0
},
items: [{
xtype: 'textfield',
fieldLabel: 'foo'
}, {
xtype: 'panel',
layout:'hbox',
items: [{
xtype: 'textfield',
fieldLabel: 'bar'
}, {
text: '...',
xtype: 'button'
}]
}]
});
});
The problem I have is in terms of Layout. I want the 'bar' textfield to shrink/grow to fill the available width of the form, but it's currently maxing out at a fixed width, even when the 'foo' textfield extends correctly across the width of the form
Please advise the correct layout settings?
jsFiddle
Just add flex:1 to your bar text box config. As its being managed by a hbox layout this is required to tell the item to fill up as much space (width) as possible
I have the following situation. I have an Ext.form.field.File (With the buttonOnly: true on top of a Ext.form.Panel which is on top of a Toolbar docked on an Ext.grid.Panel. The result of that is, the button has a completely different style then the toolbar, and the Panel seems to have some white space around button that you can see. Anyone have any suggestions as to how I can fix this, so that the style of the button and panel matches the toolbar (I use default styles, didn't modify anything).
EDIT: here is some code:
upload_button = Ext.create('Ext.form.field.File', {
buttonOnly: true,
buttonText: "Upload File",
hideLabel: true,
listeners: {..}
});
button_panel = Ext.create('Ext.form.Panel', {
region: 'south',
items: upload_button
});
upload_toolbar = Ext.create('Ext.toolbar.Toolbar',{
width: 400,
region: 'north',
dock: 'top',
items: [ button_panel]});
grid_file = Ext.create('Ext.grid.Panel', {
title: 'File List',
region: 'center',
height: 300,
store: store_file,
dockedItems: [upload_toolbar],
You are using regions, but I cannot see any border layout.
Your problem is that you are trying to put a panel within a toolbar - it won't work.
You better off just putting an hidden upload form somewhere in your page; putting a normal button in the toolbar, and have the toolbar button press triggering a press on the hidden form.
So this would be the hidden upload form definition:
Ext.define('App.view.Assignments' ,
{
extend: 'Ext.panel.Panel',
alias: 'widget.assignments-panel',
hidden: true,
items: [{
xtype: 'filefield',
id: 'uploadField',
emptyText: 'Select a file',
fieldLabel: 'Assignment',
name: 'assignment-path',
buttonText: '...',
buttonConfig: {
iconCls: 'upload-icon'
}
},{
xtype: 'hidden',
id: 'submissionIdField',
name: 'submissionId',
value: ''
}],
});
And then when the visible update button is pressed you can do:
var uploadField = Ext.getCmp( 'uploadField' );
uploadField.fileInputEl.dom.click();
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
}]
}]
});
});