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.
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 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();
I have a border layout in which I have to expand and collapse the east region for some views,
The screen works fine at the start, but when you click on the refresh button of the browser and if the east region is collapsed, then you got the east region as collapsed which according to my understanding should not happen because the extJS code is executed from the start every time you hit a refresh, and therefore the east region must be visible after doing a refresh.
To make the east region expanded every time a user hits a refresh
I tried to to the following
Ext.getCmp('center_panel').add({
id: 'center_panel_container',
layout: 'border',
defaults: {
'border': true
},
items:[{
id : 'header_panel',
layout: 'fit',
region: 'north',
height: 30,
items: [tbar]
},{
id: 'master_panel',
layout: 'fit',
region: 'center',
width: '60%',
bodyStyle:{"background-color":"white"},
autoScroll: true,
items: [panelLeft,panelLeftSchd,panelLeftStartUp]
}, {
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
autoScroll: true,
items: [panelRight, panelRightStartUp]
}]
});
Ext.getCmp('report_panel').expand(true);
But I am getting the following error this.el is null or not an object .
How to make the east region expanded whenever a user hits a refresh each time
Thanks,
This is happening because Ext.getCmp('report_panel') is not rendered at the time you're trying to call its expand method. That is because Ext-JS sometimes uses a setTimeout when laying out components. The simplest solution is to wait for the render event and call expand from that handler
{
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
autoScroll: true,
items: [panelRight, panelRightStartUp],
listeners: {
render: function(panel) {
panel.expand()
}
}
}
You can also wait for the afterlayout event of the parent container.
The splitter tends to remember its state, so upon refresh the splitter sets itself to the position where it was in his previous session so to make it forgot his state do the followiing
{
id: 'report_panel',
layout: 'fit',
region: 'east',
width : '40%',
split:true,
**stateful : false,**
autoScroll: true,
items: [panelRight, panelRightStartUp]
}
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
}]
}]
});
});