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...
Related
I'm trying to display a "list" of containers: I mean I created a container ( I'll call it container A ) to display data:
ID docked on the left of the container, name on top, task name ( for example ) at bottom and date docked on the right.
Next I try to display this containers in another container ( container B): some containers inside a bigger container so I can display the data.
But I need to select a container A if I want to delete or edit it. How can I do it?
Thank you very much.
Edit:
Code: "container A" (.../app/view/Cliente.js)
Ext.define('proyecto.view.Cliente', {
extend: 'Ext.Container',
xtype: 'cliente',
requires: ['Ext.TitleBar'],
config: {
title: 'Cliente',
iconCls: 'info',
xtype: 'container',
layout: 'vbox',
margin: 10,
padding: 5, border: 15,
items: [
{
docked: 'left',
xtype: 'container',
width: 100,
html: 'ID_cliente',
style: 'background-color: #00CED1'
},
{
xtype: 'container',
flex: 2,
html: 'Nombre',
style: 'background-color: #6495ED'
},
{
xtype: 'container',
flex: 1,
html: '<DIV ALIGN=right><span style="background-color:#4169E1">Asignaciones</span></DIV>',
},
]
}});
Code: "container B" (.../app/view/ListaClientes.js)
Ext.define('proyecto.view.ListaClientes', {
extend: 'Ext.Container',
xtype: 'listaclientes',
requires: ['Ext.TitleBar', 'proyecto.view.Cliente'],
config: {
title: 'Lista de Clientes',
iconCls: 'team',
scrollable: true,
items: [
{
xtype: 'toolbar',
title: 'Lista de clientes',
docked: 'top',
items: [
{
text: 'Nuevo'/*,
action: 'nuevocliente'*/
},
{
text: 'Editar'/*,
action: 'editarcliente',
enableOnSelection: true,
disabled: true */
},
{
xtype: 'spacer'
},
{
text: 'Eliminar'/*,
action: 'eliminarcliente',
enableOnSelection: true,
disabled: true */
}
]
},
{ //example visualization
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
},
{
xtype: 'cliente',
height: 80,
}
]
}});
Screen Container B: I can't upload the screen here, I'm newbie :(
http://s7.postimg.org/q0gppq8h7/Container_B.jpg
I would assume the container you mentioned is not a generic container in HTML form concept but a real class in sencha touch.
I would recommend you to have a look how to use the component query in sencha touch framework, as that is the most powerful and basic search utility in the framework. if you organise your object properly, it can get anything for you easily. if you from css & jquery selector background, you feel you were home when checking how to use
have a look here:
http://docs.sencha.com/touch/2.3.1/#!/api/Ext.ComponentQuery
if you also interested with the jquery type of search which is at the dom level, here is a good example.
http://docs.sencha.com/core/manual/content/element.html
also, some similar feature offered in:
docs.sencha.com/touch/2.3.1/#!/api/Ext-method-getCmp
I use the 2.3 as an example, but these features exist since earlier release. Hopefully these can help.
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 am using Extjs 4.1.1
I have panel on which I have added toolbar at bottom side.
This toolbar has 3 items, I want to aling first item in first row, and rest two items in next row, i.e. one below others.
as shown in the image, I want to align the items as shown above to the Red Rectangle.
My code is as given below.
Please suggest How can I do that?
my code is like this
dockedItems: [
{
xtype: 'toolbar',
dock: 'bottom',
height:60,
items: [
{
xtype: 'tbtext',
id:'costId',
text : "Total Cost <br> $66,000",
height : 40
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'saveButton',
text: 'Add to BOM',
handler: function() {
saveProduct();
}
},
{
xtype: 'button',
autoAlign: 'bottom',
id: 'cancelButton',
text: 'Cancel',
handler: function() {
cancel();
}
}
]
}],
One possible solution would be adding two bottom toolbars to the panel. Just like this:
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [{
text: 'Add to BoM',
cls: 'add-to-bom-button'
}, {
text: 'Cancel',
cls: 'cancel-button'
}]
}, {
xtype: 'toolbar',
dock: 'bottom',
border: false,
style: {
background: 'white'
},
items: [costContainer]
}]
where costContainer is
var costContainer = Ext.create('Ext.container.Container', {
border: false,
layout: 'vbox',
items: [{
xtype: 'label',
html: 'Total Cost',
cls: 'total-cost-label'
}, {
xtype: 'label',
html: '$ 66,000',
cls: 'price-label'
}]
});
I think this example looks like what you are looking for, just have to fix the css.
http://jsfiddle.net/alexrom7/LHK39/3/
What I'm trying to do here is to use a card layout within the panel of a carousel. But it seems impossible that it's not common to create a card layout and the carousel is actually one of the card-layout-like container. So I wonder if it can be achieved in Sencha Touch 2.
Here is my main view, a plain carousel container:
Ext.define("myapp.view.Main", {
extend: 'Ext.carousel.Carousel',
config: {
defaults: {
styleHtmlContent : true
},
activeItem: 0,
items: [
{
xtype: 'firstview'
},
{
xtype: 'secondview'
},
{
xtype: 'thirdview'
}
]
}
});
and here is my 'firstview', which extends the Ext.Panel as part of the carousel container:
Ext.define("myapp.view.Compose", {
extend: 'Ext.Panel',
xtype: 'firstview',
requires: [
'Ext.form.FieldSet',
'Ext.TitleBar',
'Ext.form.Text',
'Ext.Button'
],
config: {
styleHtmlContent: true,
scrollable: true,
layout: 'vbox',
items: [
{ // title bar
xtype: 'titlebar',
docked: 'top',
title: 'a Title here'
},
{
xtype: 'toolbar',
docked: 'top',
layout: {
type: 'vbox',
align: 'center',
pack: 'center'
},
items: [
{ // controll button set - to change view for composing different kinds of messages
xtype: 'segmentedbutton',
allowDepress: true,
allowMultiple: false,
items: [
{
text: 'subview-1',
pressed: true
},
{
text: 'subview-2'
},
{
text: 'subview-3'
}
]
}
]
},
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
config: {
height: '100%',
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
}
]
}
});
as you can see, there is a card layout within this panel. But as a matter of fact nothing is not going to display.
Of course, I can find another way out to achieve some thing similar here, but I just want to know is it impossible to embed a card container into a card-layout-like container, for example, 'tabPanel' or 'carousel' in sencha touch 2?
Hey in the Compose widget replace the the part with id:'id_compose_card'
with this
{
xtype: 'container',
id: 'id_compose_card',
layout: {
type: 'card',
align: 'center',
pack: 'top'
},
flex: 1,
items: [
{
html: 'card 1'
},
{
html: 'card 2'
}
]
}
I just took out the parts inside the config object and put them outside. Im getting this feeling that u cant nest a config inside another config object for a class definition. A lot of people are having issue and this seems to be the problem. You might want to confirm this on their forum.
Then I also replaced the attribute
height: '100%',
with this
flex:1
This will tell the vbox layout to make your component fill the remaining space.
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',
}
]