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:[]
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
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
}]
})
});
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...
I have a main panel with layout set to vbox. I want to add TWO separate lists to the panel. I want the two lists to appear vertically stacked, and as they overflow the bottom of the main panel, the panel should simply scroll.
However, lists appear to require to be set in a FIT layout, in order to display. Fit layouts do not permit vertically stacking of items.
Am I missing a feature of the layout system that allows me to tell the list to fully display itself inside a parent with a vbox layout?
Ext.List component's superclass is Ext.DataView and not Ext.Panel.
Hence, you will need to add two list in two separate panels and add those two panels inside a super panel.
Also, you will need to make the layout:'vbox' for the superpanel and make layout:'fit' for the other two child panels
Here's how you can do it.
....
....
var superpanel = new Ext.Panel({
fullscreen: true,
layout: 'vbox', // to vertically stack two list.
items: [
{
xtype: 'panel',
id: 'panel_1',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
flex:1,
id: 'list1',
store: 'samplestore1'
}
]
},
{
xtype: 'panel',
id: 'panel_2',
width: '100%',
layout: 'fit',
items: [
{
xtype: 'list',
id: 'list2',
flex:1,
store: 'samplestore2'
}
]
}
]
});
....
....
var parent = new Ext.Panel({
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'list',
id: 'list_1',
store: 'store1,
flex: 1
},
{
xtype: 'list',
id: 'list_2',
store: 'store2,
flex: 1
}
]
});
put height:'auto' on the list item
items: [
{
xtype: 'list',
height: 'auto'
},
{
xtype: 'list',
height: 'auto',
}
]
I'm trying to create a detailed line item form in my application. I created a subclass of Ext.Panel with three form controls in it. Then I started adding that control to my viewable Panel. Only one ever shows up. The others are set to a height of 0. Here's the code:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [
new Ext.form.Spinner({
width: 150
}),
new Ext.form.Text({
placeHolder: 'Description',
width: 400
}),
new Ext.form.Text({
placeHolder: 'Price',
width: 150
})
]
});
app.views.Forms.Materials = new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem(),
new app.views.Forms.materialsLineItem()
]
});
Hmm it works if you declare your form components using object literals like so:
app.views.Forms.materialsLineItem = Ext.extend(Ext.Panel, {
layout: {
type: 'hbox',
pack: 'center'
},
items: [{
xtype: 'spinnerfield',
width: 150
}, {
xtype: 'textfield',
placeHolder: 'Description',
width: 400
}, {
xtype: 'textfield',
placeHolder: 'Price',
width: 150
}]
});
My guess is that your way only created the fields once and sencha doesn't let you add the same component to multiple containers, so the first two panels didn't actually have anything in them.
If you look at the elements in Chrome's JavaScript console you should see the first two panels are just empty divs.