How to tell extjs4 stretch just one element in hbox layout?
For example I have the following layout:
{
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
flex: 1,
// GRID, needs to be stretched
}, {
// button, don't stretch
}, {
// another button, don't stretch
}]
}
In the code above I have all elements (including buttons) are stretched. Is it possible in box layouts?
I can, of course, wrap buttons in the hbox container, but I don't like this solution.
One workaround you could use is to give the buttons a maxHeight, since constrains always "win".
Ext.onReady(function(){
Ext.create('Ext.panel.Panel', {
width: 400,
height: 300,
renderTo: document.body,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
flex: 1,
title: 'A panel'
}, {
xtype: 'button',
text: 'B1',
maxHeight: 25
}, {
xtype: 'button',
text: 'B2',
maxHeight: 25
}]
})
});
Related
I'm creating a container that is 3000px wide with three subcontainers, each with flex:1.
I made the top container horizontally scrollable. However, when I drag to the right, I can see my third box (with word three) but the window snaps back once I release.
I'd like the content on the right to remain visible after I release Sencha Fiddle.
Source:
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: "Sencha",
launch: function() {
var tabPanel = Ext.create('Ext.tab.Panel', {
layout: 'card',
padding: 2,
tabBarPosition: 'bottom',
items: [{
id: 'tab1',
title: 'Home',
layout: 'hbox',
xtype: 'container',
width: 3000,
scrollable: {
direction: 'horizontal'
},
items: [{
xtype: 'panel',
layout: 'vbox',
flex: 1,
items: [{
html: "vb1",
flex: 1
}, {
html: "vb2",
flex: 1
}]
}, {
html: "two",
flex: 1
}, {
html: 'three',
flex: 1
}],
iconCls: 'home'
}]
});
Ext.Viewport.add(tabPanel);
}
});
I can't see your fiddle, but w/out writing code I think what you want is a panel with a vbox that contains two panels with layout : 'Card'.
Then you can drop any number of items into the panel and Sencha will do the rest for you.
Please let me know if this doesn't work and I'll try and find time to write you some code.
Good luck, Brad
I'm trying to build an interface that has a header bar with a logo centered in the top. Here's the code I'm using. The image doesn't show. Upon inspecting the elements at run time, element is showing with a height of '0' instead of using the 100% to match the height of the containing element.
Ext.define("RFN.view.Main", {
extend: 'Ext.TabPanel',
config: {
tabBarPosition: 'bottom',
items: [
{
title: 'Calculate',
iconCls: 'home',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[
{
xtype: 'image',
src: 'resources/images/logo.png',
height: '100%'
}
],
flex: 1
},
{
xtype: 'panel',
style: 'background-color: #999999;',
flex:4
}
]
},
{
title: 'Compare',
iconCls: 'chart2',
//styleHtmlContent: true,
//scrollable: true,
layout: 'vbox',
items:[
{
style: 'background-color: #174a7c;',
flex: 1
},
{
style: 'background-color: #999999;',
flex:4
}
]
}
]
}
});
Just add a layout config on the panel that contains the image. You can then remove the height config on you image as the layout make the inner item fit the whole height and width automatically :
...
xtype: 'panel',
style: 'background-color: #174a7c;text-align:center;',
items:[{
xtype: 'image',
src: 'resources/images/logo.png',
}],
flex: 1
...
Hope this helps
Or you can do what I did and have a layout of vbox, the header had a flex of 0.3 and my tabpanel 0.7. The item that was 0.3 was a panel, and in the class config (cls) I had my CSS class name e.g. Header. In my CSS class .header I had set the background and logo. Hope this helps...
There is a form panel, and it acts like a container. Then i have another form panel, where i am adding a textfield and a button. I need this form panel to be in the center of the screen. And the button bottom of the textbox (I should be able to position it where ever in the form. Like Absolute layout).
My code is as follows; and it doesn't work the way i want it to. can some one look into this
Ext.define('MyApp.view.MyView', {
extend: 'Ext.form.Panel',
alias: 'widget.myview',
frame: true,
height: 800,
hidden: false,
hideMode: 'visibility',
id: 'myviewid',
autoScroll: false,
bodyPadding: 5,
initComponent: function () {
var me = this;
Ext.applyIf(me, {
items: [{
xtype: 'form',
height: 330,
width: 400,
layout: {
type: 'absolute'
},
bodyPadding: 10,
title: 'Care Fusion User Login',
anchor: '250 250',
items: [{
xtype: 'textfield',
id: 'name',
width: 233,
name: 'name',
fieldLabel: 'Nmae',
growMax: 200,
x: 10,
y: 30
} {
xtype: 'button',
height: 30,
width: 256,
text: 'Click',
x: 240,
y: 110
}]
}]
});
me.callParent(arguments);
}
});
Try to use following layout in your outer container:
layout: {
align: 'middle',
pack: 'center',
type: 'hbox'
},
then you inner form will be placed in the center of this outer form.
I am using Sencha Touch to create a newletter layout. I start with a vbox panel (P1). Within this panel is a hbox panel (P1Content) that has "left column", spacer and "right column" panels. Both columns are vbox and contain panels themselves with content. I then try to add another panel underneath P1Content (P1Bottom). Here's the problem. P1Bottom overlaps with P1Content's content. I used Web Inspector and discovered that Sencha Touch set the height of Panel A's to be 0px. If I set the height of P1Content to a certain value (e.g. 1000px), it's fine. However, I can't depend on a fixed value: The content of the panels is dependent on the user's selectio. I want Sencha Touch to calculate the height like it does with its other elements.
What do I do?
var P1LeftColumn = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
cls: 'columnleft',
flex: 25,
items: [A,B]
});
var P1RightColumn = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
cls: 'columnright',
flex: 25,
items: [
D,
{ height: 20 },
E,
{ height: 20 },
F,
{ height: 20 },
G
]
});
var P1Content = new Ext.Panel({
layout: { type: 'hbox', align: 'stretch' },
// height: '1000px', Can't do this because the height is dynamic depending on the user's selection
items: [
P1LeftColumn,
{ flex: 1 },
P1RightColumn
]
});
var P1Bottom = new Ext.Panel({
html: 'This should appear below the columns but overlaps them instead.'
});
var P1 = new Ext.Panel({
layout: { type: 'vbox', align: 'stretch' },
items: [P1Banner, P1Header, P1Content, P1Bottom]
});
From a glance it seems you need to put flex in the panels config option
Layout:{ type: 'hbox', align: 'stretch' },
flex:1,
items:[]
I'm trying to dynamically add a component to a container with the hbox layout specified
and have that container re-size itself to accommodate the new component. Currently the
new component is added, but the new and old components are re-sized / or tiled in the
container and the container maintains its size.
Here is a demonstration of the issue I'm having on jsfiddle.
Here is the relevant extjs4 javascript for the demo:
Ext.onReady(function(){
Ext.create ('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
items: [
{
xtype: 'container',
layout: 'hbox',
padding : 5,
items: [
{
xtype: 'container',
id: 'textfieldgroup',
flex: 1,
height: '100%',
border: false,
layout: {
type: 'vbox',
},
defaults: {
flex: 1,
},
items: [
{
xtype: 'textfield',
emptyText: 'type here',
},
],
},
{
xtype: 'button',
flex: .1,
text: '+',
listeners: {
'click' : function () {
var textFieldGroup =
Ext.ComponentQuery.query ('#textfieldgroup')[0];
var newTextField = Ext.widget ('textfield');
textFieldGroup.add (newTextField);
},
}
}
]
}
],
renderTo: Ext.getBody ()
});
});
I have found a suitable solution and my reasoning is that you cannot have a vbox dynamically expand within an hbox container. The added benefit is that this method enables you get rid of one level of nesting. Also using the layout property autoSize: true enables the vbox container to expand and dynamically re-size itself.
Ext.onReady(function() {
Ext.create('Ext.panel.Panel', {
title: 'test',
width: 300,
height: 300,
layout: 'vbox',
items: [
{
xtype: 'fieldset',
flex: 1,
title: 'Group of fields',
width: '100%',
items: [
{
xtype: 'container',
layout: 'hbox',
width: '100%',
items: [
{
flex: 1,
xtype: 'label',
text: 'Fields',
},
{
xtype: 'button',
flex: 1,
text: '+',
listeners: {
'click': function() {
var textFieldGroup =
Ext.ComponentQuery.query('#textfieldgroup')[0];
var newTextField = Ext.widget('textfield');
textFieldGroup.add(newTextField);
},
}}
]
},
{
xtype: 'container',
layout: {
type: 'vbox',
autoSize: true,
},
id: 'textfieldgroup',
defaults : {
// flex: 1,
},
items : [
{
xtype: 'textfield',
emptyText: 'type here',
}
]
}
]}
],
renderTo: Ext.getBody()
});
});