I am placing Ext JS Grid Panel in a iFrame. Do anybody know how can I place it in the center of the iFrame.
Currently It look like this -
I want it to be like this -
The contents of your IFrame can use a border layout as above or no layout, like this:
var viewPort = new Ext.Viewport({
renderTo:'body',
width: 400,
height: 400,
items:[new Ext.Panel({
title: 'hi',
width: 200,
height: 200,
style: 'margin:0 auto;margin-top:100px;'
})]
});
In the examples site there is an example that does this you may want to look at.
layout:'ux.center',
items: {
title: 'Centered Panel',
widthRatio: 0.75,
html: 'Some content'
}
Another way, not as elegant, is a cludge of VBox and HBox layouts but is pure ExtJS and doesn't rely on UX:
Ext.create('Ext.container.Viewport',{
style: 'background-color: white;',
layout: {
type: 'vbox',
align : 'stretch',
pack : 'start',
},
items: [{
flex: 1,
border: false
},{
height: 200,
border: false,
layout: {
type: 'hbox',
pack: 'start',
align: 'stretch'
},
items: [{
flex: 1,
border: false
},{
html:'Centered Panel',
width: 400
},{
flex: 1,
border: false
}]
},{
flex: 1,
border: false
}]
//items: [login_panel],
});
simply use:
this.center()
where as "this" is the object you want to put in the center (let's say grid).
Something like
grid:
region: center;
panel:
layout: border;
css: "padding: 40px"
Related
I have the following application that contains two panels. The height of the first one set to 75% of the screen area and the second panel set to take up the bottom 25% of the screen. I have been working on this for a couple hours and I the button contained in the second panel that is supposed to be taking up the bottom 25% of the screen always shows up at the top. I am new to Sencha and JS any help would be appreciated:
Ext.application({
name : 'MyApp',
launch : function()
{
Ext.onReady(function ()
{
var panel = Ext.create('Ext.panel.Panel', {
title: 'Test 2',
autoScroll: true,
forceFit: true,
layout: { type: 'vbox', align: 'fit', padding: 5},
items:
[
{ xtype: 'panel', height: '75%', layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: '25%', layout: { type: 'vbox', align: 'fit', padding: 5}, items:[ { itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' } ]}
]
});
var viewport = Ext.create('Ext.container.Viewport', {
layout: 'fit',
items: [panel]
});
});
}
});
You can try use the flex property for the panels, and instead of using percentages, set the panel 1 to fit to entire height and the panel 2 to a specific height, just like the following code:
layout: { type: 'vbox', align: 'stretch', padding: 5},
items:
[
{ xtype: 'panel', flex: 1, layout: { type: 'vbox', align: 'fit', padding: 5}},
{ xtype: 'panel', height: 100, layout: { type: 'vbox', align: 'fit', padding: 5},
items:[
{ itemId: 'btnNewMission', xtype: 'button', height: 25, width: 125, text: 'New Mission' }
]}
]
You can check the following example: http://jsfiddle.net/rx7Lfo55/
I want to create a popup pdf viewer with ext js.
I have tried some panel examples like :
Ext.onReady(function() {
Ext.widget('panel', {
title: 'My PDF',
width: 600,
height: 400,
items: {
xtype: 'component',
autoEl: {
tag: 'iframe',
style: 'height: 100%; width: 100%; border: none',
src: './test.pdf'
}
},
renderTo: 'selection'
});
});
I want Some think similar to this
the difference between my need and this one is that i want a close and print button on the top right og the screen. and i dont need a pagination
Any leads ?
Thanks in advance :)
Try This...
var showss = Ext.create('Ext.window.Window' {
title: 'PDF Content',
width: 400,
height: 600,
modal : true,
closeAction: 'hide',
items: [{
xtype: 'component',
html : '<iframe src="./test.pdf" width="100%" height="100%"></iframe>',
}]
});
showss.show();
I am working on ExtJs collapsible panel in table layout.
Whenever I open the page the panel comes up perfectly fine (width wise).
Please check the below images
But when I collapse the panel, the width changes!
See the below image:
A sample code to replicate this issue:
Ext.create('Ext.panel.Panel', {
title: 'Car Simple Tree',
renderTo: Ext.getBody(),
layout: {
type: 'table',
columns: 2
},
items: [{
xtype: 'panel',
title: 'panel title',
collapsible: true,
titleCollapse: true,
bodyStyle: {
background: '#D9E5F3',
borderColor: '#99BCE8',
borderWidth: '1px'
},
scrollable: true,
autoScroll: true,
layout: {
pack: 'center',
type: 'hbox'
},
rowspan: 1,
colspan: 2,
width: '100%',
items: [{
text: 'Save',
xtype: 'button',
padding: 5
}]
}, {
html: 'Cell C content',
cellCls: 'highlight'
}, {
html: 'Cell D content'
}]
});
I have also created a fiddle with the same code.
JSFiddle Demo
Please help me in resolving this issue.
I want the width of the panel to remain fixed whether it is collapsed or not.
But I WANT to set width in the terms of percentage and not fixed absolute number.
To set the column width to '100%' use tableAttrs
layout: {
type: 'table',
columns: 2,
tableAttrs: {
style: {
width: '100%'
}
}
}
Also 'scrollable' and 'autoScroll' need not to be set to true since the column width will be '100%'
Question is simple.
I have a home screen where the north region has to display two textfields and one button to enable user to connect.
I have this code.
Ext.create('Ext.container.Viewport', {
layout: 'anchor',
id: 'homescreen',
items: [
{
layout: 'border',
border: false,
height: 160,
anchor: '100%',
items: [
{
region: 'west',
// some codes here
},
{
xtype: 'container',
width: '70%',
region: 'east',
layout:
{
type: 'table',
columns: 1,
tdAttrs:
{
style: 'padding: 5px 15px 5px 15px;',
align: 'middle',
},
defaults:
{
width: 150,
textAlign: 'right'
},
},
items: [
{
xtype: 'textfield',
//fieldLabel: 'login',
labelWidth:50,
emptyText: 'Utilisateur',
margin: '18 0 0 0',
},
{
xtype: 'textfield',
//fieldLabel: 'mot de passe',
labelWidth:100,
emptyText: 'Mot de passe',
},
{
xtype: 'button',
html: 'Connexion',
scale: 'large',
},
]
}]
},
As you can see, all the textfields and the button are aligned vertically on one column.
But problem is that they are displayed on the left side of the container. How can I display them on the right (without using css) ?
= align them horizontally.
VBox layout would probably be more appropriated to your use case. It stacks component vertically and lets you control horizontal and vertical alignment of the resulting block.
Try the following layout, for example:
layout: {
type: 'vbox'
,align: 'center' // or 'right'
,pack: 'center' // controls vertical align
,defaultMargins: 5
}
I want the following layout (the chart count in the top right is dynamic):
I tried to take a border-layout for the main container. Chart1 is region: 'west' and the rest is in region: 'center'.
In the center, I got a vbox container, with 2 containers, one for the charts (top) and one is the grid (bottom)
The Problem is now, that these 2 containers want a fixed width, or else they get a zero width...
Also I want to have all the containers to be fluid, so I can resize everything without getting empty spaces.
I read about using flex: 1 if I want some containers in a vbox to to get a 100% width, but this didn't work. It just made the 2 containers in the vbox use the same height.
Any ideas?
How about something like this (quickly drawn in the architect):
Ext.define('MyApp.view.MyWindow', {
extend: 'Ext.window.Window',
height: 600,
width: 1000,
layout: {
align: 'stretch',
type: 'hbox'
},
title: 'My Window',
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'fit'
},
items: [{
xtype: 'chart'
}]
}, {
xtype: 'container',
flex: 4,
layout: {
align: 'stretch',
type: 'vbox'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
align: 'stretch',
type: 'hbox'
},
items: [{
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}, {
xtype: 'chart',
flex: 1,
}]
}, {
xtype: 'gridpanel',
flex: 1,
title: 'My Grid Panel',
}]
}]
});
me.callParent(arguments);
}
});
Although that way the Flex value of the second container has to account for the amount of charts you're displaying horizontally.
Have you tried table layout? It's quite easy to create such layout with it. Example:
Ext.onReady(function(){
Ext.create('Ext.Viewport', {
renderTo: Ext.getBody(),
style: 'border: 1px solid red',
layout: {
type: 'table',
columns: 5,
tdAttrs: {
style: 'padding: 20px; border: 1px solid blue;'
}
},
defaults: {
bodyStyle: 'border: 1px solid red'
},
items: [
{ xtype: 'panel', html: 'Chart1', rowspan: 2 },
{ xtype: 'panel', html: 'Chart2' },
{ xtype: 'panel', html: 'Chart3' },
{ xtype: 'panel', html: 'Chart4' },
{ xtype: 'panel', html: 'Chart5' },
{ xtype: 'panel', html: 'Grid', colspan: 4 }
]
});
});
Working sample: http://jsbin.com/ojijax/1/
To have dynamic layout IMO the best solution is to use hbox and vbox layouts.
For example you can wrap charts from 2 to n into one container, let's say chartPanel - this will have hbox layout. Then wrap chartPanel and grid into another container - panel with vbox layout. Then again wrap chart1 with panel with hbox layout. Then you must set align: stretch for each box layout, and proper flex to divide screen equaly.
Working sample: http://jsfiddle.net/75T7h/
I think you are loading chart2, 3, 4 , 5 in a for loop using panel.add option of extjs (better way).
If so then keep a count of these panels (here 4) and for each panel while assigning width you give like
width:(1/countOfchrtLIst2345) * grid.getWidth(),
So whatever count comes it will divide available width between all these horizontal panels within your top vbox and allocates.
In your example it assigns
(1/4) * 200
(thinking grid has width of 200)