I am using ExtJS 6.0.1. I have my view port with center and east region configured with Ext.tab.Panel. I use a button to show and hide the center and north region. I could do that perfectly with show() and hide() methods. Is there a way to animate the view by sliding in any direction
xtype : 'app-main',
controller : 'main',
viewModel : {
type: 'main'
},
layout : {
type: 'border'
},
initComponent: function(){
var me = this;
Ext.applyIf(me,{
items : [{
region : 'center',
xtype : 'layoutP1',
split : true,
flex : 1
},{
region : 'east',
xtype : 'layoutP2',
layout : 'fit',
split : true,
hidden : true,
flex : 1
}]
});
I use a button at the footer to show/hide the panel in center and east region
onClickP1: function() {
this.getP2layout().flex = 2000;
this.getP1layout().show();
this.getP2.hide();
},
onClickP2View: function() {
this.getP2layout().flex = 2000;
this.getP1layout().flex = 2000;
this.getP1layout().hide();
this.getP2layout().show();
}
With this I can able to show and hide the panel but i need to animate sliding from left to right /right to left based on the region.
And is there a way to do the same using Splitters?. I can see Panel by default it comes with splitter to collapse and expand the panel.
For this you need to use slideIn on dom element (panel/veiw).
slideIn slides the element into view. An anchor point can be optionally passed to set the point of origin for the slide effect. This function automatically handles wrapping the element with a fixed-size container if needed. See the Ext.fx.Anim class overview for valid anchor point options.
Usage:
// default: slide the element in from the top
el.slideIn();
// custom: slide the element in from the left with a 2-second duration
el.slideIn('l', { duration: 2000 });
// common config options shown with default values
el.slideIn('r', {
easing: 'easeOut',
duration: 500
});
In this FIDDLE, I have created a demo. I hope this will guide you to achieve your requirement.
Code Snippet
Ext.create('Ext.tab.Panel', {
height: window.innerHeight,
renderTo: document.body,
items: [{
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
itemId: 'p1',
layout: 'fit',
split: true
}, {
// xtype: 'panel' implied by default
title: 'East Region is collapsible',
layout: 'fit',
region: 'east',
itemId: 'p2',
xtype: 'panel',
split: true,
hidden: true
}],
buttons: [{
text: 'P1',
disabled: true,
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}, {
text: 'P2',
handler: function () {
this.up('tabpanel').doHideShow(this)
}
}]
}],
//For hide/show view on basis of button click P1/P2
doHideShow: function (btn) {
btn.setDisabled(true);
if (btn.getText() == 'P1') {
this.down('#p1').show().setWidth('100%').getEl().slideIn('l');
this.down('#p2').hide();
this.down('[text=P2]').setDisabled(false);
} else {
this.down('#p2').show().setWidth('100%').getEl().slideIn('r');
this.down('#p1').hide();
this.down('[text=P1]').setDisabled(false);
}
}
});
Related
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.
I just started using ExtJS 3.4 version. And I was not sure how to access the items within the panel when there is no id or itemId assigned to it. I have used Ext JS 4.2 before but I need to use 3.4 version for now.
In my case, I am using border layout here. I have a tree panel on the east region and a tabpanel in the center region. And I want to update the center region dynamically with grids or forms based on the tree node clicked.
here is my code for the tabpanel
{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
And here is the complete code that I tried
First ExtJs Page
Ext.onReady(function () {
Ext.namespace('Class');
Class.create = function() {
return this.init(config);
}
};
Ext.namespace('FirstOOPS');
FirstOOPS = Class.create();
FirstOOPS.prototype = {
init: function (config) {
var store= new Ext.data.ArrayStore({
fields: [{name: 'C1'},{ name: 'C3'}, {name: 'C5'}]
});
var myData= [['abcdC11','C3','C5'],['asdf','C3_asdf','C5_asdf']]
store.loadData(myData);
var gridpnl= new Ext.grid.GridPanel({
layout: 'fit',
height: 500,
width: 500,
store: store,
columns:[
{header: "C1", dataIndex: 'C1'},
{header: "C3", dataIndex: 'C3'},
{header: "C5", dataIndex: 'C5' }
]
});
var mainPanel = new Ext.Panel({
layout : 'border',
items : [
{
region: 'east',
collapsible: true,
title: 'Navigation',
xtype: 'treepanel',
width: 200,
autoScroll: true,
split: true,
loader: new Ext.tree.TreeLoader(),
root: new Ext.tree.AsyncTreeNode({
expanded: true,
children: [{
text: 'Grid',
leaf: true
}, {
text: 'Form',
leaf: true
}]
}),
rootVisible: false,
listeners: {
click: function(n) {
if(n.text=='Grid'){
Ext.Msg.alert(n.text);
}
}
}
},{
xtype : 'tabpanel',
title : 'Center Panel',
width : 200,
region : 'center',
items:[gridpnl]
}
]
});
new Ext.Viewport({
layout : 'fit',
items : [mainPanel]
});
}
};
var firstObj = new FirstOOPS();
});
</script>
</body>
</html>
Can someone tell me how to access this without id, so that I can update the tabpanel dynamically or create new tabs based on the tree node click.
Thanks in advance
you can use the following code to access tabpanel without using id or items id
this.up().items.items[1]
to test the above code I am alerting the title of the tab panel by following code
alert(this.up().items.items[1].title);
it will alerts the title of the tab panel
I have a border layout with two panels inside center and west regions. By default, west panel is collapsed and if you click on any part of the title bar while is collapsed, the panel is temporary expanded until you move the mouse pointer out of its boundaries.
What I want to do is to have this same "temporary expand" not by clicking on the panel's title bar, but just hovering over it. How can I make that possible?
Here is my code:
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'Center Panel',
region: 'center',
flex: 1
},{
xtype: 'panel',
title: 'West Panel',
region: 'west',
flex: 1,
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true
}]
}).show();
});
Please refer to the following fiddle for your convenience: http://jsfiddle.net/3FJ58/3/
Thanks in advance!
Yes, this is possible but you have to extend from Ext.panel.Panel to override the getPlaceholder method that is used by the borderlayout
getPlaceholder: function(direction) {
var me = this,
collapseDir = direction || me.collapseDirection,
listeners = null,
placeholder = me.placeholder,
floatable = me.floatable,
titleCollapse = me.titleCollapse;
if (!placeholder) {
if (floatable || (me.collapsible && titleCollapse)) {
listeners = {
mouseenter: {
// titleCollapse needs to take precedence over floatable
fn: (!titleCollapse && floatable) ? me.floatCollapsedPanel : me.toggleCollapse,
element: 'el',
scope: me
}
};
}
me.placeholder = placeholder = Ext.widget(me.createReExpander(collapseDir, {
id: me.id + '-placeholder',
listeners: listeners
}));
}
// User created placeholder was passed in
if (!placeholder.placeholderFor) {
// Handle the case of a placeholder config
if (!placeholder.isComponent) {
me.placeholder = placeholder = me.lookupComponent(placeholder);
}
Ext.applyIf(placeholder, {
margins: me.margins,
placeholderFor: me
});
placeholder.addCls([Ext.baseCSSPrefix + 'region-collapsed-placeholder', Ext.baseCSSPrefix + 'region-collapsed-' + collapseDir + '-placeholder', me.collapsedCls]);
}
return placeholder;
}
See the updated JSFiddle
Overriding is at least the cleanest way IMO. But it would also be possible to manipulate the placeholder created by the borderlayout.
#JoseRivas already posted something like this but with some issues I will add the snipped how this can be done in a cleaner way
listeners: {
afterrender: function(p){
p.placeholder.getEl().on('mouseenter', function(){ p.floatCollapsedPanel() })
}
}
See the updated JSFiddle
jacoviza. Can you try to capture focus event of panel. this link helps you. Extjs panel. Keyboard events
add a listener to the el of the placeholder for mouseover and then call the floatCollapsedPanel()
Ext.onReady(function () {
Ext.create('Ext.window.Window', {
width: 500,
height: 300,
layout: 'border',
items: [{
xtype: 'panel',
title: 'panel1',
region: 'center',
flex: 1
}, {
xtype: 'panel',
title: 'panel2',
region: 'west',
flex: 1,
id: 'mypanel2',
collapsible: true,
collapsed: true,
animCollapse: false,
collapseDirection: Ext.Component.DIRECTION_BOTTOM,
titleCollapse: true,
listeners: {
afterrender: {
fn: function (self) {
self.placeholder.getEl().on('mouseover', function () {
var panel = Ext.getCmp('mypanel2');
panel.floatCollapsedPanel()
})
}
}
}
}]
}).show();
});
Initially this panel had accordion layout. Both the child panels where shown then. But as soon as I changed it to vbox, it shows the second panel. But no tree inside!
See the image.
Related Code
OurApp.online_tree_store = Ext.create('Ext.data.TreeStore', {
root : {
expanded : true,
children : []
}
});
OurApp.online_tree = Ext.create('Ext.tree.Panel', {
store : OurApp.online_tree_store,
title : 'Online',
region: 'north',
useArrows : true,
rootVisible : false,
listeners : {
itemdblclick : contactitemdblclick
}
});
/// Note: Offline tree is exactly the same as online tree.
Ext.create('Ext.panel.Panel', {
closable : false,
width : 300,
maxWidth : 400,
itemId : 'viewport-contacts',
constrain : true,
layout : 'accordion', // <--- layout changed to vbox or border
region : 'west',
hidden : true,
border : true,
defaults : {
height : '50%', // <--- used for vbox
},
tbar : [{
xtype : 'button',
text : 'Sign out',
iconCls : 'icon-disconnect',
handler : function() {
}
}],
items : [OurApp.online_tree, OurApp.offline_tree],
});
height: '50%' should be flex: 1.
You'll also want to specify align: 'stretch'
Ext.require('*');
Ext.onReady(function() {
var panel = Ext.create('Ext.panel.Panel', {
renderTo: document.body,
width: 400,
height: 400,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
title: 'P1',
flex: 1
}, {
title: 'P2',
flex: 1
}]
});
});
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]
}