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'
}]
}
});
Related
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.
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
I have application using ExtJs 3.4.
I have this construction:
westPanel-TabPanel:
var westPanel = new Ext.TabPanel({
id: "west",
//xtype: "tabpanel",
//layout:'fit',
activeTab: 0,
region: "west",
border: false,
width: 278,
split: true,
collapseMode: "mini",
items: [mapList,structure,cadastr,search]
});
Search - FormPanel:
var search = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: 'Поиск',
bodyStyle:'padding:5px 5px 0',
//width: 600,
//layout:'fit',
items: [{
xtype:'textfield',
fieldLabel: 'Диспечерское наименование',
name: 'name_dispather',
anchor:'100%',
enableKeyEvents: true,
listeners: {
'keyup': function(e) {
if(e.getValue().length==4){
searchStore.load({params:{'name':e.getValue()}});
}
}
}
},searchTab]
});
SearchTab - GridPanel:
var searchTab = new Ext.ux.grid.livegrid.GridPanel({
store: searchStore,
region: 'center',
cm: searchCm,
layout: 'fit',
selModel: new Ext.ux.grid.livegrid.RowSelectionModel(),
stripeRows : true,
view: myView,
height: 390,
loadMask: true,
id: 'searchTab',
title:'Найденные объекты',
autoScroll: true,
});
And i have a problem:
Have to make last column's width to whole panel's width?
UPDATE
I try autoExpandColumn. its works but its not idial:
How to fix it?
You can achieve this with the flex config.
You can do it on one column only:
columns: [{text: "Column A", dataIndex: "field_A", flex: 1}]
Or you can do it as default on all the columns:
columns: {
items: [
{
text: "Column A"
dataIndex: "field_A"
},{
text: "Column B",
dataIndex: "field_B"
},
...
],
defaults: {
flex: 1
}
}
Try with:
autoExpandColumn : String
The id of a column in this grid that should expand to fill unused space.
This config option you have to provide for your searchTab (I mean the grid panel).
EDITED:
viewConfig:{
scrollOffset: 0,
forceFit: true
},
This will remove that gap left for scrollbar. This you need to mention for your searchTab (I mean the grid panel).
I have 3 extJs Windows. Each have some form control and then two tabs that display chart. Currently all windows appear at the same place and i have to drag them to make them stand in a row like this | | | . How can i create a 3 columns on screen and place each window in one of them. Please find the code of one of the window below. And yes i have seen this link
http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/layout/table.html but it doesnt help my cause. None of the content is displayed if i create 3 column layout like the what's mentioned in the link. Please assume that all of windows have the same code and suggest a way. One more thing, i have closable, and maximizable feature in all of the windows.Thanks.
var win = Ext.create('Ext.Window', {
id: 'r1',
width: eachWindowWidth,
height: eachWindowHeight,
hidden: false,
maximizable: true,
title: 'Registered Hosts',
renderTo: Ext.getBody(),
tbar: [{
xtype: 'combo',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: "label",
width: 20,
fieldLabel: text,
name: 'txt',
text: 'to'
}, {
xtype: 'combo',
id: 'c22devices',
width: 50,
store: optionRegistered,
mode: 'local',
fieldLabel: '',
name: 'answer',
anchor: '90%',
displayField: 'answer',
valueField: 'id'
}, {
xtype: 'datefield',
id: 'cl22devices',
width: 90,
name: 'time',
fieldLabel: '',
anchor: '90%'
}, {
xtype: 'button',
text: 'Ok'
}],
items: [
{
xtype: "label",
fieldLabel: text,
name: 'txt',
text: text
}, {
xtype: 'tabpanel',
id: "tabs1",
activeTab: 0,
width: eachTabWidth,
height: eachTabHeight,
plain: true,
defaults: {
autoScroll: true,
bodyPadding: 10
},
items: [{
title: 'Normal Tab',
items: [{
id: 'chartCmp1',
xtype: 'chart',
height: 300,
width: 300,
style: 'background:#fff',
animate: true,
shadow: true,
store: storeRouge,
axes: [{
type: 'Numeric',
position: 'left',
fields: ['total'],
label: {
renderer: Ext.util.Format.numberRenderer('0,0')
},
grid: true,
minimum: 0
}, {
type: 'Category',
position: 'bottom',
grid: true,
fields: ['date'],
}],
series: [{
type: 'column',
axis: 'left',
highlight: true,
tips: {
trackMouse: true,
width: 140,
height: 28,
renderer: function (storeItem, item) {
this.setTitle(storeItem.get('date') + ': ' + storeItem.get('total') + ' $');
}
},
label: {
display: 'insideEnd',
'text-anchor': 'middle',
field: 'total',
renderer: Ext.util.Format.numberRenderer('0'),
orientation: 'vertical',
color: '#333'
},
xField: 'date',
yField: 'total'
}]
}]
}, {
title: 'Table View',
xtype: 'grid',
id: "gridChart1",
width: 200,
height: 200,
collapsible: false,
store: storeRouge,
multiSelect: true,
viewConfig: {
emptyText: 'No information to display'
},
columns: [{
text: 'Devices',
flex: 50,
dataIndex: 'date'
}, {
text: 'Pass',
flex: 50,
dataIndex: 'total'
}]
}]
}],
listeners: {
resize: function () {
Ext.getCmp("tabs1").setWidth(this.width);
Ext.getCmp("tabs1").setHeight(this.height);
Ext.getCmp("chartCmp1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
Ext.getCmp("gridChart1").setWidth(this.width * 100 / 100);
}
}
});
The problem is, the Ext.Window while being descendand of Ext.Panel does not abide by the rules of the layout like normal Ext.Panels do, it floats by itself and is constrained only by the limits of the DOM element they're rendered to (body by default).
This means that you'll have to jump some loops to position and layout the windows manually. You can also try to create some descendand class from Ext.WindowGroup to help you manage your windows and keep them nice and tidy.
I am using http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/portal/portal.html to build a portal. Obviously, i have custom windows inside it that adjust their height/width as in the provided link. In one of the windows i have got a chart and a grid that i want to place side by side in a row. But this approach requires me to provide height/width for graph.If i do this the chart doesnt adjust its height/width if i play with the height and width of parent container as in the example.Please guide how can i accomplish this.I am using hbox layout with alight to stretch. Please find the code below.
Ext.apply(this,{layout: {
type: 'hbox',
align: 'stretch'
}
, width:600,height:300,items:
[
{
xtype: 'chart',
animate: true,
shadow: true,
height:200,
width:200,
store: Ext.create('Ext.data.JsonStore', {
fields: ['year', 'comedy', 'action', 'drama', 'thriller'],
data: [
{year: 2005, action: 23890000},
{year: 2006, action: 38900000},
{year: 2007, action: 50410000},
{year: 2008, action: 70000000}
]
}),
legend: {
position: 'right'
},
axes: [{
type: 'Category',
position: 'bottom',
fields: ['action'],
}, {
type: 'Numeric',
position: 'left',
fields: ['year'],
title: false
}],
series: [{
type: 'bar',
axis: 'top',
gutter: 80,
xField: 'year',
yField: ['action'],
tips: {
}
}]
},{xtype:'grid',
collapsible:false,store: Ext.create('Ext.data.ArrayStore', {
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'}
],
data: myData
}), multiSelect: true,viewConfig: {emptyText: 'No information to display'},
columns: [{
text : 'Company',
flex : 1,
sortable : false,
dataIndex: 'company'
},
{
text : 'Price',
width : 75,
sortable : true,
renderer : 'usMoney',
dataIndex: 'price'
}]
}]
});
You shouldn't have to put a width/height on the chart or grid. Just put a 'flex' value on each, e.g., flex: 1 for them both to have the same width in the hbox container.