Related
I'm trien to make a resizable panel layout. I've made a fiddle:
https://fiddle.sencha.com/#view/editor&fiddle/3c94
Why can't I use the resizer between test1 and test2 while the resizer between test3 and test4 is working.
I tried adding flex/fit to a few container, tried removing unimportant stuff, can't find a solution.
Because you have used fit layout in the first panel and hbox (it works) in the second one:
Ext.create('Ext.form.Panel', {
xtype: 'main_customer',
itemId: 'main_customer',
renderTo: Ext.getBody(),
flex: 1,
items: [{
xtype: 'panel',
itemId: 'maincontainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
padding: 0,
scrollable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
height: '63%',
resizable: {
split: true,
edges: ['south']
},
items: [{
xtype: 'panel',
resizable: {
split: true,
edges: ['east'],
},
items: [{
xtype: 'panel',
html: 'test 1',
}]
}, {
xtype: 'panel',
html: 'test 2',
}]
}, {
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
flex: 1,
items: [{
xtype: 'panel',
width: '50%',
resizable: {
split: true,
edges: 'east'
},
html: 'test 3',
}, {
xtype: 'panel',
html: 'test 4',
}]
}]
}],
collapsible: false
});
How can I put panel with some text inside navigation view, like here http://joxi.ru/E2pyDJQC9MLnyA
I tried past panel in navigation treelist but panel not displayed.
Also I united my treelist and panel in joint container:
{
xtype: 'maincontainerwrap',
id: 'main-view-detail-wrap',
reference: 'mainContainerWrap',
flex: 1,
items: [
{
xtype: 'container',
reference: 'leftContainer',
itemId: 'leftContainer',
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
{
xtype: 'treelist',
reference: 'navigationTreeList',
itemId: 'navigationTreeList',
ui: 'navigation',
store: 'NavigationTree',
width: 64,
micro: true,
expanderFirst: false,
expanderOnly: false,
listeners: {
itemclick: 'onNavigationItemClick',
selectionchange: 'onNavigationTreeSelectionChange'
}
},
{
xtype: 'panel',
header: false,
layout: 'fit',
height: 100,
hidden: checkSubscription().hidden,
width : 64,
userCls: 'sidebar-purchase-wrapper',
renderTo: Ext.get("leftContainer"),
html :
'My text Here'
},
{
xtype: 'container',
flex: 1,
reference: 'mainCardPanel',
cls: 'sencha-dash-right-main-container',
itemId: 'contentPanel',
layout: {
type: 'card',
anchor: '100%'
}
}
]
}
Panel displayed, but when I'm click button onToggleNavigation animation not work correct.
I have included an 'accordion' layout, which is included in 'west' region of a 'border' layout. But the align : 'stretch' property is not working for the accordion layout.
Accordion Layout
var user_menu_items = new Ext.Panel({
layout: 'accordion',
height: 565,
align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Border Layout
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
I am using extjs-4.2.2
you can try below:
var user_menu_items = new Ext.Panel({
layout: 'accordion',
//height: 565,
//align: 'stretch',
id: 'usermenu',
items: [{
layout: 'fit',
title: 'Configuration',
id: 'menulist1',
html: 'Group1 Content',
collapseFirst: true
}, {
title: 'User Action Group2',
id: 'menulist2',
html: 'Group2 Content'
}, {
title: 'User Action Group3',
id: 'menulist3',
html: 'Group3 Content'
}]
});
Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [{
layout: 'border',
defaults: {
collapsible: false,
split: false,
bodyStyle: 'padding:2px'
},
items: [{
title: 'USER MENU',
region: 'west',
margins: '5 0 0 0',
cmargins: '5 5 0 0',
width: 225,
minSize: 100,
maxSize: 250,
collapsible: true,
collapsed: false,
bodyStyle: 'padding:0px',
layout: 'accordion', // <------- ADD THIS LINE TO WEST PANEL.------------------>
items: [user_menu_items]
}]
}],
renderTo: Ext.getBody()
});
If I am not mistaken, Ext.panel.Panel does not have a config option align.
What does have a config option align is the Ext.layout.container.Accordion.
So the code would be:
var user_menu_items = new Ext.Panel({
layout: {
type:'accordion',
align: 'stretch'
},
height: 565,
...
As what the title suggest, is that I have a panel that will execute a command onRender to add items, like the code below, a treepanel. I wrapped treepanel in a layout - border and then on a vbox panel to be put on region west. Unfortunately the whole tree panel does not render. I inspected the HTML, and the elements are there but they are sort of disabled because the elements have that blurry font in the firebug. Why is it doing that? Please help.
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
pageLimit : 15,
title : 'Report Generator',
layout : 'border',
border : false,
frame : true,
initComponent: function() {
this.callParent(arguments);
},
onRender:function() {
var me = this;
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{ text: "detention", leaf: true },
{ text: "homework", expanded: true, children: [
{ text: "book report", leaf: true },
{ text: "algebra", leaf: true}
] },
{ text: "buy lottery tickets", leaf: true }
]
}
});
var reportItem = {
xtype: 'panel',
layout: 'vbox',
id:'westpanel',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [
{
border: false,
layout: 'border',
items:[
{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
frame: false,
rootVisible: false
}
]
}
]
};
this.add(reportItem);
this.callParent(arguments);
}
});
Im not really sure why you are using the onRender method instead of placing the panels in the items but there are too many errors there anyway.
Every border panel needs height, width or flex and it is required to have one panel with the center region.
If you change your code to this, it will work but be careful with all these nested panels, it seems like you are getting lost.
CODE
var store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [{
text: "detention", leaf: true
},{
text: "homework", expanded: true,
children: [{
text: "book report", leaf: true
},{
text: "algebra", leaf: true
}]
}, {
text: "buy lottery tickets",
leaf: true
}]
}
});
Ext.define('anr.panels.report', {
extend : 'Ext.panel.Panel',
width: 800,
height: 400,
border: true,
title : 'Report Generator',
layout : 'border',
items: [{
xtype: 'panel',
layout: 'vbox',
region:'west',
width: 350,
height: 300,
minSize: 350,
maxSize: 350,
border: false,
split: true,
margin: '1 0 5 1',
items: [{
xtype: 'panel',
border: false,
layout: 'border',
flex: 1,
width: 350,
items:[{
xtype: 'treepanel',
height: 250,
width: 200,
store: store,
id: 'menu-panel',
region: 'center',
frame: false,
rootVisible: false
}]
}]
},{
xtype : 'panel',
region: 'center'
}]
});
Ext.create('anr.panels.report',{
renderTo: Ext.getBody()
});
I'm creating a toolbar then later adding it to a Panel in ExtJS. It looks great except in IE7 where it has a much larger height than other browsers. ExtJS is hardcoding the height in an inline CSS style. Some of the menus are created before the toolbar...
var menu = Ext.create('Ext.menu.Menu', {
id: 'mainMenu',
style: {
overflow: 'visible'
},
items: [
{
text: 'choice1'
},{
text: 'choice2'
},{
text: 'choice3'
}]
});
var tb = Ext.create('Ext.toolbar.Toolbar');
tb.suspendLayouts();
tb.add({
text:'Choice 1',
iconCls: 'bmenu',
menu: menu
},{
xtype: 'tbfill'
},{
xtype: 'tbtext',
text: 'Last name'
});
menu.add(' ');
tb.add('-', {
iconCls: 'icon-help',
clickEvent: 'mousedown'
});
tb.resumeLayouts(true);
var viewport = new Ext.Viewport({
layout: 'border',
renderTo: Ext.getBody(),
items: [{
region: 'north',
id: 'North',
items: [{
region: 'center',
style: {
overflow: 'visible'
},
}, tb]
},{
region: 'west',
id: 'West',
xtype: 'panel',
layout: 'vbox',
collapsible: true,
split: true,
width: 200,
items: [{
xtype: 'panel',
id: 'upperWest',
width: 200,
flex: 1,
html: myAlerts
},{
xtype: 'panel',
id: 'lowerWest',
width: 200,
flex: 3,
html: quickView
}
]
]
},{
region: 'center',
id: 'center',
height: '100%',
minheight: 200,
minwidth: 200,
layout: 'border',
border: false,
autoScroll:true,
tbar: [
{xtype: 'tbfill'},
{
xtype: 'combo',
height: 20,
editable: false,
store: [
'choice1',
'choice2',
'choice3',
],
value: 'choice1'
},
{xtype: 'tbfill'}
],
items: [{
region: 'east',
id: 'center-east',
height: '100%',
minheight: 200,
width: 200,
items: barChartPanel
},{
region: 'center',
id: 'center-center',
layout: 'fit',
baseCls:'x-plain',
items: columnChartPanel
}]
},{
region: 'east',
id: 'moreOptions',
xtype: 'panel',
title: 'More Options',
collapsible: true,
split: true,
width: 200,
items: [
{xtype: 'panel',
id: 'rightPanel1',
collapsible: true,
collapsed: true,
}
]
},{
region: 'south',
xtype: 'container',
}]
});
Found the solution. HTML 5 Boilerplate included a CSS property that was adding bottom padding to some elements. This was causing ExtJS to also add top padding to the toolbar. I removed the CSS element and the issue went away