Related
I want to disable horizontal scroll of panel when someone enter text in text field.
First problem:
Currently problem is when you enter text in any textfield and press right arrow key from keyboard (keyCode = 39) then panel horizontal also move in right direction. I want to diable that when text is entered in textfield.
second Problem
Horizontal scroll moves with key only when click on that panel.
Fiddle : https://fiddle.sencha.com/#view/editor&fiddle/1mjd
Ext.create('Ext.panel.Panel', {
scrollable: 'horizontal',
region: 'center',
layout: 'hbox',
baseCls: '',
containerScroll: true,
items: [{
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}, {
xtype: 'panel',
items: [{
xtype: 'textfield'
}],
width: 300,
height: 400,
margin: '0 0 0 9'
}],
renderTo: Ext.getBody()
});
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,
...
I have a problem like in this topic: Extjs how to make the scrollbar appear?, but too many things are confusing for me.
I need to show a scrollbar as soon as the form is wider than the containing container. Why is autoScroll: true not working?
I will give three different examples, combined with this problem. The most needed - the first ex.
1. https://fiddle.sencha.com/#fiddle/j2c
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'anchor',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
autoScroll: true,
layout: 'anchor',
anchor: "100%",
items: [{
xtype: "container",
padding: 5,
layout: 'anchor',
anchor: "100%",
autoScroll: true,
items: [{
margin: 5,
padding: 5,
width: 850,
xtype: "container",
autoScroll: true,
anchor: "100%",
layout: 'column',
items: [{
columnWidth: 0.7,
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "type:",
labelWidth: 140,
tabIndex: 0,
value: "bd",
}],
layout: "anchor"
}, {
columnWidth: 0.3,
items: [{
itemId: "S2",
margin: 5,
xtype: 'textfield',
anchor: "95%",
fieldLabel: "num:",
labelWidth: 140,
}],
layout: "anchor"
}, ] //panel items
}] // some container items
}] // form items
}] }); win.show();
No scrollbar.
..fiddle.sencha.com/#fiddle/j2f
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
title: 'Form Panel',
bodyPadding: '5 5 0',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'anchor',
fieldDefaults: {
labelAlign: 'top',
msgTarget: 'side'
},
defaults: {
border: false,
xtype: 'panel',
layout: 'anchor'
},
layout: 'hbox',
items: [{
items: [{
xtype:'textfield',
fieldLabel: 'First Name',
anchor: '-5',
name: 'first',
}]
}, {
items: [{
xtype:'textfield',
fieldLabel: 'Last Name',
anchor: '100%',
name: 'last'
}]
}],
}],
}); //Ext.create('Ext.container.Viewport', {});
It works, until commented last line Ext.create('Ext.container.Viewport', {});
If I remove the code inside items Viewport observed the same behavior.
..fiddle.sencha.com/#fiddle/j2g..
Ext.create('Ext.container.Viewport', {
padding: '5',
items: [{
id: 'mainPanelContainer',
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
//width: 600,
items: [{ //outer container
autoScroll: true,
xtype: 'container',
padding: '5',
layout: 'anchor',
width: 600,
items: [{
xtype: 'container',
padding: '5',
layout: 'column',
items: [{
xtype: 'textfield',
fieldLabel: 'text1',
name: 'Name1',
columnWidth: .3
}, {
xtype: 'textfield',
fieldLabel: 'text2',
name: 'Name2',
columnWidth: .7
}], //container items
}], //outer container items
}, ] //form items
}, ]});
Scroll works until width: 600 set in that place, but doesn't work in the commented place.
Sorry for outer code in 2, 3 ex. Some unhandy snippets code.
You shouldn't use 'anchor' layout in case of scroll usage.
As you can see in the fiddle, I used 'fit' layout instead.
If you use ExtJS5 I do not recommend you to use 'autoScroll' config(it's deprecated), use 'scrollable' instead. (http://docs.sencha.com/extjs/5.1/5.1.0-apidocs/#!/api/Ext.Component-cfg-scrollable)
var win = Ext.create("Ext.window.Window", {
renderTo: Ext.getBody(),
title: "Window",
bodyPadding: 5,
layout: 'fit',
items: [{
itemId: "TPMethodContentProvider",
xtype: "form",
layout: 'fit',
width: 600,
items: [{
margin: 10,
padding: 5,
xtype: "container",
scrollable: 'horizontal',
layout: 'hbox',
items: [{
itemId: "S1",
margin: 5,
xtype: 'textfield',
fieldLabel: "type:",
scrollable: 'horizontal',
labelWidth: 140,
tabIndex: 0,
value: "bd",
}, {
itemId: "S2",
margin: 5,
xtype: 'textfield',
scrollable: 'horizontal',
fieldLabel: "num:",
labelWidth: 140,
}] //panel items
}] // form items
}] //win items
});
win.show();
I changed the layout to auto, which did the trick for me. Now it is possible to added/remove panels and the scroll-bar will automatically show/hide.
var workActivityPanel = new Ext.Panel({
region: 'center',
autoScroll: true,
layout: {
type: 'auto',
align: 'stretch'
}
});
I am working in ExtJS4. I am getting stuck at a point where I want to auto height the east region of border layout. Actually my requirement is to automatically increase height of any region based on child elemtents content inside it. I tried a lot but I did not get solution for it. Please give me some suggestion.
In my code I am just testing a simple code containing 5 panels in east region, out of those four panels are displayed. The fifth panel is not displayed, how can I make it visible? I am just using a sample code for reference.
Here is my viewport code :
Ext.define('Am.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
id:'viewportId',
alias:'widget.Viewport',
autoScroll:true,
// closable:true,
items: [
{
region:'north',
items:[
{
xtype:'panel',
flex:.2,
title:'north region',
html:'<p>north region'
}
]//end of items
},
{
region:'west',
id:'westId',
//margins:'0 5 5 5',
flex:.3,
//layout:'accordion',
items:[
{
title:'This day in a history',
xtype:'Content'
}
]//end if items
},// end of region west
{
//title:'center',
region:'center',
id:'centerId',
//html:'center region',
items:[
]//End of itmes
},// end of region center
{
region:'east',
id:'eastId',
//margins:'0 5 0 5',
flex:.3,
//layout:'accordion',
items:[
{
xtype:'panel',
title:'panel1',
html:'hi<br>hello<br>good<br><br><br><br><br>morning<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel2',
html:'hi<br>hello<br>good<br><br><br><br<br>noon<br>nice<br>looking',
},
{
xtype:'panel',
title:'panel3',
html:'hi<br>hello<br>good<br><br><br><br><brafter noon<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel4',
html:'hi<br>hello<br>good<br><br><br><br><br><br><brnigth<br>nice<br>looking'
},
{
xtype:'panel',
title:'panel5',
html:'good bye'
},
]//end if items
},
{
//title:'South',
region:'south',
id:'southId',
items:[{
xtype:'panel',
title:"footer",
html:'footer '
}]
},//mainMenu // used mainMenu when you are using mainMenu variable
]//end if items
});//End of view port
And here is my screen shot output :
Child component panel5 is not displayed. How can I make it visible?
How can I display all panels with this requirement? I want to make auto increase the size of east region based on panel contents.
Please give me some suggestion.
To get a panel to autoresize based on its content
You should set its flex to 0, and make sure other panels have flex that is different from 0. So in the following code, the footer has flex: 0 and the center region has flex: 1; the footer will therefore resize based on its contents. Here's a working JsFiddle:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'Footer',
region:'south',
xtype: 'panel',
margins: '5 0 0 5',
flex: 0, // Notice this.
id: 'footer',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 50
},{
title: '2',
height: 50
}]
},{
title: 'Center Region',
flex: 1, // Notice this.
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
Ext.getCmp('footer').add({
title: '3',
height: 50
});
To get a panel of fixed size to scroll based on its content
Simply add autoScroll: true on the containers (the region panels).
Here's some working code, which you can see in action on this JsFiddle:
Ext.create('Ext.panel.Panel', {
width: 500,
height: 300,
title: 'Border Layout',
layout: 'border',
items: [{
title: 'West Region',
region:'west',
xtype: 'panel',
margins: '5 0 0 5',
width: 200,
id: 'west-region-container',
// Notice the next line
autoScroll: true,
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items:[{
title: '1',
height: 100
},{
title: '2',
height: 100
},{
title: '3',
height: 100
}]
},{
title: 'Center Region',
region: 'center',
xtype: 'panel',
layout: 'fit',
margins: '5 5 0 0'
}],
renderTo: Ext.getBody()
});
You are searching for flex config setting:
items:[{
title: 'panel1',
flex: .3
},{
title: 'panel2',
flex: .3
},{
title: 'panel3',
flex: .4
}]
this works (for your first problem at least):
Ext.define('MyApp.view.ui.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'container',
region: 'center'
},
{
xtype: 'panel',
width: 150,
title: 'My Panel',
region: 'west'
},
{
xtype: 'container',
width: 150,
layout: {
align: 'stretch',
type: 'vbox'
},
region: 'east',
items: [
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
},
{
xtype: 'panel',
title: 'My Panel',
flex: 1
}
]
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'north'
},
{
xtype: 'panel',
height: 50,
title: 'My Panel',
region: 'south'
}
]
});
me.callParent(arguments);
}
});
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