I am trying to vertically center some text in an ExtJS Panel. I have this as a kludge but I want to know the right way?
var instructions = new Ext.Panel(
{
height: 40,
items: [
{
html: '<br>To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
}]
});
Here is what I ended up implementing using the answer below:
var instructions = new Ext.Panel(
{
height: 40,
layout: 'hbox',
layoutConfig: {
align: 'middle'
},
items: [
{
xtype: 'displayfield',
value: 'To access an Aircraft Profile, please highlight a row in the table and select the N-Number hyperlink displayed in the summary below the table'
}]
});
I think you should be able to set your panels layout as 'hbox' and use pack 'center' or alternatively nest a container within the panel with hbox layout and pack center.
Related
I have to display a MS World text (about 150 pages) in a ExtJS panel (in modal window I have two tabs, the first is a picture and the second should be the picture description).
I can prepare thix text olso in PDF format but stil have no idea how to do it good.
The iframe tag defines a rectangular region within the document in which the browser can display a separate document.
var panel = Ext.create('Ext.panel.Panel' {
width: 400,
height: 600,
modal : true,
items: [{
xtype: 'component',
html : '<iframe src="give path to your pdf here" width="100%" height="100%"></iframe>',
}]
});
Another solution is xtype: uxiframe. http://docs.sencha.com/extjs/4.1.0/#!/api/Ext.ux.IFrame
var panel = Ext.create('Ext.window.Window', {
width: 400,
height: 600,
modal : true,
layout:'fit',
items: [{
xtype: 'uxiframe',
title: 'myPDF title',
src: 'path to your pdf'
}]
}).show();
For see another way to use this component (with fiddle) take a look at this: https://www.sencha.com/forum/showthread.php?299797-Ext-ux-IFrame
How to show extjs window only in a specific panel. Currently it appears on top of all panels. I have 3 tabs and I am creating and showing window in one of them. I don't want it to be visible when someone changes the tab.
This is a simple what exactly you are looking for
Ext.onReady(function(){
Ext.create('Ext.panel.Panel',{
title:"Main Panel",
layout:'hbox',
width:600,height:300,
tbar:[
{text:"CreatWindow",handler:function(){
Ext.create('Ext.window.Window', {
title: 'Renders Only in Panel1',
height: 100,
width: 100,
renderTo:'panel1'
}).show();
}
}
],
renderTo:document.body,
items:[
{xtype:'panel',title:'panel1',id:"panel1",width:300,height:300},
{xtype:'panel',title:'panel1',id:"panel2",width:300,height:300}
]
});
});
I want to add Ext.button.Split into panel's header instead of title. It must be something like switcher of a panel's content and title of the same panel together.
Is there any option in extjs 4 to do that? Or is there better solution instead of Split button? Unfortunately, switcher in panel header is the key requirement, so it must be placed there.
Below works for me ExtJs 4.2.2
{
xtype: 'panel',
......
header: {
titlePosition: 0,
items: [
{
xtype: 'splitbutton',
}
]
}
}
Add the header object to your panel with your tools and add items for buttons.
Ext.create('Ext.panel.Panel', {
width: 300,
height: 200,
renderTo: Ext.getBody(),
header: {
// if you want your button positioned on the right hand side add
// titlePosition: 0,
items: [{
xtype: 'splitbutton',
text: 'test'
}]
}
});
I am new in developing with sencha touch 2 , i have a container that contains a list of merchants
my container has the following code
Ext.define('WL.view.tablet.Container2', {
extend: 'Ext.Container',
xtype: 'tabletContainer2',
config: {
layout: 'card',
items: [
{
xtype: 'merchants',
docked: 'left',
width: 320,
style: 'border-right: 2px solid #000'
},
{
xtype: 'container',
cls: 'tabletSplash',
flex: 1
}
]
}
});
I want to show a list of merchants products along side with the merchants list when any of the merchants in the list is tapped, the two lists will be displayed side by side
i tried to use the following code to achieve that
var products = Ext.widget('products');
Ext.widget('tabletContainer').setActiveItem(products);
but it isn't working as expected for me , any ideas on how to set an active item inside my container?
I am not sure what products or tabletContainer are in your code but if you want to add any view to certain view with card layout, here is what I would do:
var prods = Ext.getCmp("WL.view.tablet.Products");
Ext.getCmp("tabletSplashId").animateActiveItem(prods, {type: 'slide', direction: 'left', duration : 500});
where tabletSplashId is ID of container in which you want to set this view.
I have the following Ext.TabPanel:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
//layout: 'fit', // makes component disappear
viewConfig: {
forceFit: true //has no effect
},
// height: auto, //error "auto isn't recognized"
items:[{
title: 'Section 1',
html: 'test'
},{
title: 'Section 2',
html: 'test'
},{
title: 'Section 3',
html: 'test'
}]
});
which looks like this:
How can I get the line in the middle to extend down to the bottom so that it fills its parent space vertically?
Here's how the TabPanel is loaded into regionContent:
regionContent = new Ext.Panel({
id: 'contentArea',
region: 'center',
autoScroll: true
});
function clearExtjsComponent(cmp) {
var f;
while(f = cmp.items.first()){
cmp.remove(f, true);
}
}
function replaceComponentContent(cmpParent, cmpContent) {
clearExtjsComponent(cmpParent);
cmpParent.add(cmpContent);
cmpParent.doLayout();
}
replaceComponentContent(regionContent, modules_info_panel);
I see that the height is for this element in the dom is absolute (19px), where is that being set?
Addendum
McStretch, I tried your idea by putting layout: 'fit' in the tabs themselves but the line still is in the same place:
var modules_info_panel = new Ext.TabPanel({
activeTab: 0,
defaults:{autoScroll:true},
items:[{
title: 'Section 1',
layout: 'fit',
html: 'test'
},{
title: 'Section 2',
layout: 'fit',
html: 'test'
},{
title: 'Section 3',
layout: 'fit',
html: 'test'
}]
});
Corrected:
Sorry Edward I was incorrect, you want layout: 'fit' within your regionContent Panel. The updated code changes are below.
Your initial idea of using layout: 'fit' is correct, but you have it in the wrong location. You want the following:
var regionContent = new Ext.Panel({
region : 'center',
autoScroll : true,
layout : 'fit', // added this line
items : []
});
Looks like you are within a border Layout, how do you define the panel that set the border layout ? The center region of a border layout should normally fill the space not remained by the other regions. I did a sample that looks like your layout: http://jsbin.com/ikazo3/6/edit
From the Border Layout documentation:
Any container using the BorderLayout must have a child item with
region:'center'. The child item in the
center region will always be resized
to fill the remaining space not used
by the other regions in the layout.
Any child items with a region of west or east must have width defined
(an integer representing the number of
pixels that the region should take
up).
Any child items with a region of north or south must have height
defined.
The regions of a BorderLayout are fixed at render time and thereafter,
its child Components may not be
removed or added. To add/remove
Components within a BorderLayout, have
them wrapped by an additional
Container which is directly managed by
the BorderLayout. If the region is to
be collapsible, the Container used
directly by the BorderLayout manager
should be a Panel. In the following
example a Container (an Ext.Panel) is
added to the west region: