How to have 2 lists in one single panel in sencha touch 2?
I can see the first list if i use
layout:'card'
I tried :
layout: {
type: 'vbox',
align: 'stretch'
}
Please let me know how can i have 2 lists inside the same panel.
You need to use the flex config on each of your list.
You can see and example below here : Sencha Fiddle
Hope it helps
create panel with vbox layout inside it create two panel with fit layout and put every list into respective panle
try this method
Hi #Akshatha you can try this into your Ext.Panel,
...
layout: {
type: 'hbox',
align: 'stretch'
},
items: [
{
xtype: 'list',
width: '40%',
flex: 1,
styleHtmlContent: true,
...
},
{
xtype: 'list',
width: '60%',
flex: 0.5,
styleHtmlContent: true,
...
},
]
...
You can define the width of Panel and you have Ext.List.
I hope help you. :)
Related
i have a view where i have list, now i required a header sub-title for view, which should not get scroll.
If i place a panel inside view it's start scrolling...i need a stickey one. Need help.
config: {
AccountName: '',
AccountNumber: '',
style: 'background-image: -webkit-linear-gradient(bottom, rgb(223,223,223) 60%, rgb(199,199,199) 80%);',
layout: 'vbox',
height: '100%',
scrollable: true,
items: [ .....
]
You should be able to just set the doc property of an item.
For example a docked toolbar component.
items:[
{
xtype: 'toolbar',
docked: 'top'
}
]
The docked property will not be part of the parents (your list) scrollable component.
Im trying to create a carousel where, apart of the active item, the user can preview part of the next and previous items. I made a draw to illustrate it:
I tried things like padding or margin, but anything works.
Here's a carousel to play with: http://jsfiddle.net/XpG8v/
Ext.Viewport.add({
xtype: 'carousel',
height: 300,
width: 300,
items: [{
style: 'background-color: #00ffff;'
},{
style: 'background-color: #ff00ff;'
},{
style: 'background-color: #ffff00;'
}]
});
Thanks!
Simply set the 'itemLength' config to a fixed value, for example:
Ext.Viewport.add({
xtype: 'carousel',
itemLength: 200,
// ...
});
I have two questions regarding component layout using Sencha Touch 2:
How can you right align text in a container?
How can you concatenate different bits of dynamic data intermixed with static data into a component that needs to line wrap?
I have a view that I want to render like this:
Where the "Seen:" text is static and right aligned, and the text on the right is a concatenated string with 3 dynamic pieces of text and two pieces of static text.
I have something that works, but it doesn't feel right.
xtype:'container',
layout:{
type:'hbox'
},
items:[
{
xtype:'container',
flex:1,
layout:{
type:'hbox'
},
items:[
{
xtype:'spacer',
layout:'fill'
},
{
xtype:'label',
layout:'fit',
html:'Seen:'
}
]
},
{
xtype:'label',
name:'contentLabel',
flex:5,
html:'[BUILD A STRING AND SET THE HTML HERE]'
}
]
Right-aligning
So to right-align the text, I basically used an hbox container with a spacer component on the left and a label on the right. There's got to be an easier way.
Concatenating
I am able to build the string that I want to place on the right, but I'd rather have multiple labels that I can map one-to-one with my model. It doesn't feel like MVC for me to have to write code to concatenate strings.
I tried breaking apart the right side into an hbox, but there were problems with line wrapping. Each label wants to render itself individually, so if there were wrapping, it would happen within its own container.
Are there easier ways of doing what I am attempting?
Right aligning: it can be done with the text-align CSS property. In the example below I use the style property for simplicity, but using the cls property would be more flexible - it adds a CSS class to the component, so you can style it in the .sass file.
Concatenating: you can use the standard join() Javascript function. It concatenates all elements of an array into a string using the given separator. In my example dynamic1 and dynamic2 are variables.
So the result code:
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
html: ['static1', 'static2', dynamic1, 'static3', dynamic2].join('')
}
]
EDIT
You can also use the tpl property to define a template that renders data property. You can update it programatically calling container.setData()
xtype: 'container',
layout: {
type: 'hbox'
},
items: [
{
xtype: 'label',
flex: 1,
html: 'Seen:',
style: 'text-align:right'
},
{
xtype: 'container',
flex: 5,
data: {
name: 'Harry Potter',
day: 'Saturday',
date: 'October 21, 2011'
},
tpl: [
'{name} on {day} {date}'
]
}
]
After having a look around for how to make a vertical tabbar dock to the right of a panel for ages, it doesn't seem like something it supports. So I am looking for the best way to manually achieve what I want.
I want to use as much core sencha stuff as possible. I've looked at a few things but am currently tinkering with a vbox panel with buttons as the items, with the idea that I add some extra styling to them to make it look more like a tab from a tab panel.
Forgive me for the vague partial code below, but I have been adding and removing various options and have got a little lost. Hopefully it will give you an idea of how I am trying to achieve a right docked vertical tab panel though.
I'd appreciate pointers on how to steer the UI back towards the look of the TabPanel or an alternative.
Thanks in advance
{
xtype: 'panel',
dock: 'right',
width: 120,
height: '100%',
layout: {
type: 'vbox',
align: 'start'
},
ui: 'light',
defaults: {
xtype: 'button',
margin: '10 10 0 0',
iconMask: true,
ui: 'plain',
color: '#fff'
},
items: [
{
text: 'test',
iconCls: 'time',
},
{
text: 'test2',
iconCls: 'time',
}
],
}
Check the source of Ext.TabBar. It extends Ext.Panel and there isn't much magic/code going on.
You might need to tweak the CSS-side as well.
You seem to be on the right track already, though.
I've tried adding style: float: right to the button but it isn't working.
myapp.cards.home.add({
xtype: 'button',
id: 'previmagebutton',
// text: 'p',
iconCls: 'arrow_left',
iconMask: true,
style: 'float: right'
});
myapp.cards.home = new Ext.Panel({
scroll: 'vertical',
id: "home-card",
layout:{
type:"vbox",
align:"center"
},
items: [header]
});
myapp.mainPanel = new Ext.Panel({
fullscreen: true,
layout: "card",
cardAnimation: 'slide',
items: [myapp.cards.home]
});
I have to use the add method if that is what's causing the problem. Many thanks.
In your myapp.cards.home object you have the layout set up to align:"center".
I've succeeded in creating a floating button by using
floating:true
config on the button. It is a private member, so I'm still looking for an official way.
This should work ::
layout : {
type : 'vbox',
align : 'left'
}
or you can add a spacer if its in the toolbar, or if you stretch the element, then add another hbox element on its side with a flex that occupies as much space that you don't need