I have a docked panel in which am changing the dock position using the setDock method. In that docked panel, I also have collapsible buttons which should change as per to the dock position. I am updating the configs collapseDirection and expandDirection and calling out a method updateCollapseTool which lets me update the button.
But I get an issue after the following steps:
Change the dock position to left using the menu button.
Collapse the docked panel using the collapse button, then again expand it.
Again change the dock position to top.
Collapse the docked panel again => After this step my docked panel gets collapsed, but it seems to be collapsed in left direction. It should have collapsed to top and should show an expand button pointing in bottom direction.
If I perform the same steps by excluding the step 2, it works properly. Is there anything that am doing wrong or any other methods which lets me update my expand/collapse buttons properly ?
Here is my fiddle link.
You can use border layout and the the region with setRegion method, something like this:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create({
scrollable: true,
id: 'parentPanel',
xtype: 'panel',
height: 500,
layout: 'border',
items: [{
xtype: 'panel',
id: 'dockPanel1',
region: 'north',
title: 'Parent Dock Panel',
collapsible: true,
collapseFirst: false,
width: 300,
height: 200,
defaults: {
style: {
background: "orange",
border: "1px"
},
},
layout: "container",
tools: [{
text: "dock change",
xtype: 'button',
value: 'top',
menu: {
items: [{
text: 'top',
region: 'north'
}, {
text: 'left',
region: 'west'
}, {
text: 'right',
region: 'east'
}],
listeners: {
click: function (menu, item, e, eOpts) {
Ext.getCmp('dockPanel1').setRegion(item.region);
}
}
}
}],
items: [{
xtype: 'textfield',
text: 'item 1'
}, {
xtype: 'textfield',
text: 'item 2'
}, {
xtype: 'textfield',
text: 'item 3'
}]
}, {
xtype: 'panel',
region: 'center',
layout: "vbox",
items: [{
html: "<span style='font-size:20px;'>Child panel 1</span>",
bodyStyle: "background: lightgreen;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}, {
html: "<span style='font-size:20px;'>Child panel 2</span>",
bodyStyle: "background: lightblue;",
xtype: 'panel',
height: "50%",
width: "70%",
padding: "5 5",
cls: 'overlayMenuCls'
}]
}],
renderTo: Ext.getBody()
});
}
});
Related
I have created a toolbar inside a panel header but the overflow menu doesn't appear on screen resize.
Menu when the screen is not resized
On Screen resize the buttons are not showing in overflow menu.
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.onReady(function () {
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
renderTo: Ext.getBody(),
collapsible: true,
header: {
title: {
text: 'title',
flex: undefined
},
items: [{
xtype: 'toolbar',
width: 400,
overflowHandler: 'menu',
items: [{
xtype: 'button',
text: 'test1'
}, {
xtype: 'button',
text: 'test2'
}, {
xtype: 'button',
text: 'test3'
}, {
xtype: 'button',
text: 'test4'
}, {
xtype: 'button',
text: 'test5'
}, {
xtype: 'button',
text: 'test6'
}],
}, {
xtype: 'tbfill'
}]
}
});
});
}
});
Here is a fiddle. I set a layout using hbox and set a flex on the two different components in the header. also set the panel and header to resizable: true.
Ext.application({
name: 'Fiddle',
launch: function() {
var mainView = new Ext.panel.Panel({
xtype: 'panel',
//title: 'Container',
layout: 'border',
itemId: 'bigContainer',
height: '100vh',
items: [{
xtype: 'panel',
//title: 'Left Panel',
itemId: 'menuLeftPanel',
region: 'west',
scrollable: true,
//width: 300,
//height: 900,
dockedItems:
[{
xtype: 'tabpanel',
collapseMode: 'header',
//animCollapse: 200,
dock: 'left',
id: 'moduleTas',
itemId: 'moduleTabs',
width: 400,
collapsible: true,
headerPosition: 'left',
hideCollapseTool: true,
//activeTab: 0,
tabBarHeaderPosition: 0,
tabRotation: 0,
items: [{
xtype: 'panel',
scrollable: 'y',
tabConfig: {
xtype: 'tab',
iconCls: 'x-fa fa-home',
tooltip: "Home",
listeners:
{
click: function(btn, e, eOpts)
{
var tab = Ext.getCmp('moduleTas');
tab.toggleCollapse();
}
}
},
},
]
},
]
}],
renderTo: Ext.getBody()
});
}
});
Sencha provides an "Admin Dashboard" example application when you download the framework, that implements collapsible side navigation. All the source code for the below layout (and every component found in the kitchen sink) can be found in the framework download.
Admin Dashboard
Admin Dashboard Source Code
This isn't something you should be recreating yourself (defeats the point of using a framework like Extjs)
I have a requirment where i need to put one item inside vbox layout. my item is having a border layout and west and center reason having some vbox layout componet. below I am putting the code of item. In this main panel is border layout and reason having vbox but this is not working.
my Code :
Ext.create('Ext.panel.Panel', {
width: 500,
height: 500,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'South Region is resizable',
region: 'south', // position for region
xtype: 'panel',
height: 100,
layout : 'fit',
split: true,// enable resizing
margin: '0 5 5 5'
},{
// xtype: 'panel' implied by default
title: 'West Region is collapsible',
region:'west',
xtype: 'panel',
margin: '5 0 0 5',
width: 100,
layout: 'vbox',
height: 200,
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 100
},{
title: 'ss Region is resizable2',
xtype: 'panel',
height: 100
}],
collapsible: true, // make collapsible
id: 'west-region-container',
},{
title: 'Center Region',
region: 'center', // center region is required, no width/height specified
xtype: 'panel',
width : 300,
layout: 'vbox',
margin: '5 5 0 0',
items:[{
title: 'South Region is resizable',
xtype: 'panel',
height: 50,
},
{
title: 'ss Region is resizable',
xtype: 'panel',
height: 10
}]
}],
renderTo: Ext.getBody()
});
Below is my Actual code where I am using vboxLayout and then border layout is one of the item of this. I am getting Layout run failed error
Ext.define('myApp.myData.myApp', {
extend: 'Ext.container.Container',
alias: 'widget.myApp',
controller: 'myAppController',
items: [{
xtype: 'label',
margin: '5 10 0 0',
height: 28
},
{
xtype: 'panel',
itemId: 'mainPanel',
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
margin: '3 10 2 5'
},
items: [
{
xtype: 'myPanel'
},{
xtype : 'panel',
height: 500,
width : 300,
layout: 'border',
items :[{
xtype : 'panel',
layout: {
type: 'vbox',
align: "stretch"
},
items :[{
xtype: 'myPanel1'
},{
xtype : 'myPanel2'
}]
},{
xtype : 'panel',
layout: {
type: "vbox",
align: "stretch"
},
items :[{
xtype: 'myGrid'
}]
}]
}
]
}]
});
Any help will appriciate.
Change your layout to:
layout: {
type: "vbox",
align: "stretch"
}
And put flex on child items:
flex: 1
I'm using ExtJS 3.3.2 and I have a panel with some panels nested in vbox and hbox. The problem is easy: My data from items inside hbox are not showing, I tried modifying weight and height but it never shows up. Looking at the code (F12), I see the data is created, but the panels have a very tiny size.
var i = 0;
jsonResp.forEach(function(currentItem) {
i++;
var panel = new Ext.Panel({
id: 'superpanel'+i,
layout: 'vbox',
height: 50,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject'+i,
layout: 'hbox',
frame: true,
align: 'stretch',
items:[{
id: 'codigo'+i,
xtype: 'panel',
html: currentItem.codigo
},{
id:'nombre'+i,
xtype: 'panel',
html: currentItem.nombre
},{
xtype: 'panel',
html: currentItem.estado.toString()
}]
},{
xtype: 'panel',
id: 'aviso'+i,
html: "Error"
}]
})
Ext.getCmp("contenedor").add(panel);
});
Ext.getCmp("contenedor").doLayout();
I want to create this:
What is wrong? I tried it with width/height and flex but it doesn't work.
width: "100%" and flex can be used to resolve this issue.
Here is how I resolved it.
Ext.onReady(function () {
var viewport = new Ext.Viewport({
items: [{
xtype: "panel",
title: "Test one",
width: 500,
height: 800,
id: "contenedor",
autoScroll: true
}]
});
//delay for adding dynamic content
setTimeout(function () {
var parentPanel = Ext.getCmp("contenedor");
for (var i = 0; i < 10; i++) {
var panel = new Ext.Panel({
id: 'superpanel' + i,
layout: 'vbox',
height: 100,
frame: true,
collapsible: true,
items: [{
xtype: 'panel',
id: 'jsonObject' + i,
layout: 'hbox',
frame: true,
align: 'stretch',
flex: 3,
width: '100%',
items: [{
id: 'codigo' + i,
flex: 1,
xtype: 'panel',
html: 'Demo html 1'
}, {
id: 'nombre' + i,
xtype: 'panel',
flex: 1,
html: 'Demo html 2'
}, {
xtype: 'panel',
flex: 1,
html: 'Demo html 3'
}]
}, {
xtype: 'panel',
id: 'aviso' + i,
html: "Error",
width: "100%"
}]
});
parentPanel.add(panel);
}
parentPanel.doLayout();
}, 2000);
});
Fiddle is created with ExtJS 3.4.1.1. Sadly there is no 3.2.2 version available on sencha fiddle. But this should work with 3.2.2.
Example Fiddle (with ExtJS 3.4.1.1): https://fiddle.sencha.com/#view/editor&fiddle/28ql
I want to align Credentials button to the bottom of the panel in extjs, Is there any specific property to do that only for buttons inside the panel. No toolbar involvement is here:
Fiddle Link : https://jsfiddle.net/arya9/rmad2cpb/
Check this fiddle.
You just need to add that button in dockedItems of Panel
{
xtype: 'panel',
renderTo: Ext.getBody(),
layout: 'vbox',
height: 400,
padding: 20,
defaults: {
xtype: 'button',
margin: '0 0 12 0'
},
items: [{
text: 'Normal Button'
}, {
text: 'Basic Button'
}],
dockedItems: [{
xtype: 'button',
dock: 'bottom',
text: 'Docked Button',
margin: '0 0 12 0'
}]
}
https://fiddle.sencha.com/#view/editor&fiddle/25aa
Hope this below code will help you as per your requirement.
Ext.create('Ext.Window',{
width:200,
height:400,
layout:'vbox',
items:[{
xtype:'button',
text:'First'
},{
xtype:'panel',
flex:1
},{
xtype:'button',
text:'Second'
}]
}).show();
You can check here in sencha fiddle it is working https://fiddle.sencha.com/#view/editor&fiddle/25a9
Use a toolbar and change xtype: 'spacer' for xtype: 'tbfill'