Scrolling and resizing with ExtJs - javascript

I have a problem with ExtJs sizes and scrolling. Here is a simple example: https://fiddle.sencha.com/#fiddle/ucd
Ext.onReady(function() {
var win = new Ext.Window({
id: 'win',
layout: 'fit',
closable: true,
bodyPadding: 5,
renderTo: Ext.getBody(),
items: {
xtype: "form",
defaultAnchor: "100%",
items: [{
xtype: "panel",
layout: "fit",
overflowY: "scroll",
//overflowY: "auto",
layout: 'hbox',
items: [{
xtype: "fieldset",
margin: 5,
padding: 5,
labelWidth: 140,
defaultAnchor: "100%",
collapsible: true,
title: "groupbox",
items: [{
itemId: "SNAME",
xtype: "textfield",
margin: 5,
fieldLabel: "Name:",
}],
}],
}]
}
});
win.show();
});
Problem:
It's a side issue. I don't understand, why overflowY: 'auto' won't work. It works in my local project, and in this Fiddle scrolling behaves as hidden. May I be need to call doLayout() or something on resize event. So I did overflow: "scroll".
You can see that ExtJs doesn't leave place for the scrollbar and it cover the fieldset. Why? How resolve this?
In my local project overflow: 'auto' works. And scrollbars always appears, because innerct panel div have same size as body div panel. So scrolling behaves as on set overflow: 'scroll'. And fieldset right border is hidden by scroll.

You are way overnesting. You are putting a container in a container in a container and all with there own layout calculations. Besides that your dom (which is always expensive to render) is way to big, the layout manager of ExtJs is way to busy and I can't tell what is going wrong because all of this.
Take a look at this code. It has exactly the same result, is much cleaner and your dom is much smaller.
Ext.onReady(function() {
new Ext.form.Panel({
id: 'form',
closable: true,
floating: true,
bodyPadding: 10,
width: 500,
items: [{
xtype: "fieldset",
padding: 5,
labelWidth: 140,
layout: 'anchor',
defaults: {
xtype: "textfield",
anchor: '100%',
margin: 5
},
collapsible: true,
title: "groupbox",
items: [{
name: "SNAME",
fieldLabel: "Name:"
}]
}],
renderTo: Ext.getBody()
});
});

Related

ExtJS Vertical Scroll Bar is not fitting for long json data

I have a Ext window in that having two items container and fieldset. For container and fieldset I am geting data in form of html from server.
If this data is big, scrollbar appears not navigate the text completly.
How can I configure a vertical scrollbar properly in this panel ?
My sample code is :
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
autoScroll: true,
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})
The problem is that you are setting fixed width and height to the fieldset. If you want to have the scrollbar only when the content exceed the window size you first need to set the fieldset size as flex.
Use vbox layout in form
Replace fixed height: 580 and width: 880 with flex: 1 in fieldset
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/30f9
Fieldset is not meant to be a form element(displaying html), It is meant to be a container for grouping sets of fields.
Creating a fieldset with child item text area or text field
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
collapsed: true,
overflowY: 'scroll',
items: [
{
xtype: 'textfield',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
itemId: 'errorDesc',
name: 'errorDesc',
fieldLabel: 'Error Desc',
value: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}
}]
}
})
The height of the parent container i.e "Ext.window.Window" is fixed at 600. You can try giving it at '100%' increasing its height.
Ext.create('Ext.form.Panel', {
title: 'Simple Form with FieldSets',
labelWidth: 75, // label settings here cascade unless overridden
url: 'save-form.php',
frame: true,
bodyStyle: 'padding:5px 5px 0',
width: 550,
renderTo: Ext.getBody(),
layout: 'column', // arrange fieldsets side by side
items: [{
// Fieldset in Column 1 - collapsible via toggle button
xtype:'fieldset',
columnWidth: 0.5,
title: 'Fieldset 1',
collapsible: true,
defaultType: 'textfield',
defaults: {anchor: '100%'},
layout: 'anchor',
items :[{
xtype:'container',
html: Ext.String.htmlEncode("<input type=\"text\"> Hello </input>")
}, {
fieldLabel: 'Field 2',
name: 'field2'
}]
}]});
Here height is not specified and parent container's height will be based on the items it holds.
You can try this it works:
Ext.create('Ext.window.Window', {
title: 'DataSet',
bodyPadding: 5,
modal: true,
height: 600,
width: 900,
layout: 'fit',
items: {
xtype: 'form',
items: [{
xtype: 'container',
html: jsonData.R.ErrorMsg || ''
}, {
xtype: 'fieldset',
padding: '5 0 10 0',
collapsible: true,
title: 'Description',
height: 580,
width: 880,
collapsed: true,
overflowY: 'scroll',
html: Ext.String.htmlEncode(jsonData.R.ErrorDesc) || ''
}]
}
})

ExtJS Window with multiple grids and combined hbox/vbox layout renders very slow on Internet Explorer

I have a window on which I want to put 4 grids like this
Grid1 Grid2
Grid3 Grid4
and I want the grids to auto resize on window resize.
It is simple to do this with combined hbox/vbox layout like I did in the example above:
Ext.onReady(function () {
var me = this;
me.store = Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
me.g1 = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
flex: 1,
store: me.store,
columns: [
{ header: 'Name', dataIndex: 'name' },
{ header: 'Email', dataIndex: 'email', flex: 1 },
{ header: 'Phone', dataIndex: 'phone' }
]
})
//g2,g3,g4 same with g1
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: 'fit',
items: [{
xtype: 'container',
layout: 'fit',
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: 'hbox',
items:[ me.g3, me.g4]
}]
}]
}]
}).show()
});
Everything works fine on chrome (the window opens in 1 sec), but on Internet Explorer, the window renders between 3-5 seconds, which is too much.
I also tried to float those 4 grids right and left and it rendered much better on IE, but that way I lose auto scroll on grids (unless I put each one in a fit container...) and when i click a record the grid goes up a number of pixels (~20px)
Any ideas on how to do this to work good on IE as well, without those 3-5 secs of rendering?
I am using ExtJs 4.0.7.
PS: The problem is not the loading of grid stores, they come on callback.
You definitely have more nesting than you need, which can significantly slow down the layout. Try getting rid of the 2 outer containers so it looks more like this:
Ext.create('Ext.window.Window', {
title: 'Hello',
height: 400,
width: 600,
maximizable: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items:[{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g1, me.g2]
},{
flex: 1,
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
items:[me.g3, me.g4]
}]
}).show()
You might also consider initializing your window as hidden, then just show/hide it as you need it instead of re-creating it each time.

How do I center a button on a table and have that table fill a container in ExtJS?

I am new to ExtJS and I am having trouble centering a button in a container. I am basing my code off of the documentation on the Sencha website; however, I don't see a clear explanation for centering. below is what I have so far:
items: [{
html: content,
title: 'Navigation',
autoScroll: true,
border: false,
iconCls: 'nav'
}, {
title: 'Other',
border: false,
autoScroll: true,
iconCls: 'settings',
items: [{
xtype: 'container',
layout: {
type: 'table',
columns: 1,
tdAttrs: {
style: {
layout: 'fit',
padding: '5px 10px',
background: 'red'
}
}
},
items: [{
xtype: 'button',
width: '100%',
glyph: 72,
text: 'Logoff',
scale: 'large',
iconAlign: 'top',
buttonAlign: 'center'
}]
}]
}]
Here's a screenshot of my current website.
As you can see, it is left aligned and no matter what I try, I can't seem to center it in the column.
There is a user extension for centered layout, but you can also achieve it with the following vbox layout config:
layout: {
align: 'center',
pack: 'center',
type: 'vbox'
}
Sometimes css overide itself, for be very basic but quick just add somes
Inline and before your element. It's just the html code of a blank character..
You can add you own CSS class to button using cls property, like below
items: [{
xtype: 'button',
width: '100%',
glyph: 72,
text: 'Logoff',
scale: 'large',
iconAlign: 'top',
buttonAlign: 'center',
cls: 'yourclassName'
}]
Then define CSS class yourClassName
Hope this helps

Ext JS tabpanel won't fit window size

Someone wants a panel done in Ext JS to dynamically fit the window size. I'm not familiar with Ext, but after hours of searching, I haven't found a working solution. Here is the code that is expected to be fixed:
var histotab = Ext.createWidget('tabpanel', {
activeTab: 0,
width : 2000,
height : "50%",
defaults :{
bodyPadding: 10
},
items: [
{
id: 'chartCmp',
title: 'By Year',
xtype: 'chart',
style: 'background:#fff',
layout:'fit',
animate: true,
shadow: true,
store:SOD.storeHistogram,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['countoffiles'],
label: {
font: '8px Arial'
},
Any suggestions are greatly appreciated.
Use the Ext.container.Viewport class with a fit layout. The viewport always sizes itself to the document view size.
Ext.widget('viewport', {
layout: 'fit',
items: {
xtype: 'tabpanel',
items: [{
title: 'Foo',
html: 'First tab'
}]
}
});

ExtJS 3.4 vbox layout is not rendering correctly

I'm trying to render a GridPanel, and two regular Panels in a vbox layout (will update the Panels based on user actions later).
http://jsfiddle.net/auVez/
I have the store working OK
var store = new Ext.data.ArrayStore({
autoDestroy: true,
storeId: 'myStore',
fields: [
{name: 'categoryId', type: 'int'},
{name: 'categoryName', type: 'string'}
]
});
And the GridPanel was working OK before I started working with the vbox...
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header:'Category ID', width: 40, sortable: true, dataIndex: 'categoryId', hidden: true},
{header:'Cat. Name', width: 80, sortable: true, dataIndex: 'categoryName'}
],
flex: 10,
loadMask: true,
stripeRows: true,
viewConfig: { autoFill: true }, //This makes the columns span the screen onLoad
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
I've added a height to the vbox, because I read that it must have one...
var mainPanel = new Ext.Panel({
renderTo: 'myDiv',
frame: true,
layout: 'vbox',
layoutConfig: {
align: 'stretch'
},
height: '200px',
items: [
grid,
{
flex: 5,
title: 'Take Action',
id: 'SelectedItemPanel',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Please select item above to take action upon.'
},
{
flex: 5,
title: 'Preview',
id: 'SelectedItemPanel2',
bodyStyle: {
background: '#ffffff',
padding: '6px 15px 0px 15px'
},
html: 'Magic!'
}
]
});
But it still renders as an, approx, 10px height grey border, and doesn't take up 300px as requested.
I'm guessing I'm missing some overflow declaration or something, but this is frustrating, as I've spent ~4 hours I don't have on trying to get something so simple to work :-(
Hi problem is in height config
give height:300 (remove single quotes s)
see here jsfiddle link

Categories