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
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.
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',
}
]
I jsut can't set up two things side by side correctly. Help me, please
Erhm, be a little more specific as to what you want.
You can always add two items next to each other by adding a wrapper panel with a hbox layout:
{
xtype: 'panel',
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'panel',
html: 'left',
width: 100
},{
xtype: 'sliderfield',
name: 'myslider',
flex: 1
}]
}
hope it helps
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.