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
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.
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. :)
I am working on an MVC app in Sencha Touch 2 and am having trouble getting a list to display in a nested panel.
The structure of the app has a main view which is a tab panel. One of the items in the tab panel is a defined panel, xtype: 'homepanel'.
An item in this panel is the list xtype: 'newslist' that is linked to the appropriate store and model files.
The list does not display unless I change its parent homepanel to a type, Ext.navigation.View.
What am I missing in the definition of homepanel' as a panel that prevents the display of the list?
Ext.define('ACSO.view.Home', {
extend: 'Ext.Panel', //<--works if Ext.navigation.View
xtype: 'homepanel',
requires: [
'Ext.TitleBar',
'ACSO.view.NewsList'
],
config: {
title: 'Home',
iconCls: 'home',
cls: 'home',
scrollable: true,
styleHtmlContent: true,
items: [{
xtype: 'newslist'
}]
}
});
Your Panel has no layout.
I suggest you try to add the following in your panel config:
layout:'fit'
Hope this helps
Try adding layout: 'card' to your panel's config
Layout: fit didn't work out for me.
However, adding layout: 'card to the parent Ext.Panel worked!
The UI component which is within the Ext.Panel is no longer hidden via the display: none !important;.
I am using Sencha Touch in my iPhone app. When I use up to three cards, my carousel works fine. But as soon as I use four cards, there is a bug:
The first and the fourth card are overlapping* until I slide to the second card. After sliding back to the first card again, the fourth card disappeared.
(overlapping = contents of 1st and 4th card are shown. 4th card is in foreground)
What is going on here? I don't understand. Has anyone else met this kinda of error? Is it a real bug or a mistake in my codes?
This is my js:
Ext.setup({
onReady: function() {
// Create a Carousel of Items
var carousel = new Ext.Carousel({
defaults: {
cls: 'card'
},
items: [{
cls: 'tab1',
html: 'Tab 1'
},
{
cls: 'tab2',
html: 'Tab 2'
},
{
cls: 'tab3',
html: 'Tab 3'
},
{
cls: 'tab4',
html: 'Tab 4'
}]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
flex: 1
},
items: [carousel]
});
}
});
EDIT: If you can get a working carousel with 4+ tabs, you would already prove that I have done something wrong.
Couple of possibilities here:
The use of vbox could be confusing it (though this is unlikely). Consider switching your panel configuration to just say:
new Ext.Panel({
layout: 'fit',
items: carousel
});
This could be related to a similar and slightly obscure issue we'd seen in 1.x. Try this:
Open resources/scss/application.scss and move line 23 (#include sencha-carousel;) down 4 lines so that it ends up just after the sencha-layout line
run compass compile to recompile your SASS
If it's the same issue as I saw a while back (no guarantee that it is), this will fix it
So I have a TabPanel defined like so:
panel = new Ext.TabPanel({
fullscreen: true,
cardSwitchAnimation: 'slide',
ui: 'dark',
items: [home, faq, about]
});
The home section is defined like so:
home = new Ext.Component({
title: "Home",
scroll: 'vertical',
tpl: [
'<tpl for="."',
' <div messageId="{message_id}">',
' </div>',
'</tpl>'
]
});
Now, ONLY on the home tab, I want a section right underneath the TabPanel that is going to contain some other elements, specifically, a textbox, button, and two dropdowns.
How can I add them so that the content section still acts the same way and doesn't start until underneath these added elements?
It's not 100% clear what your aim is, but it sounds like you just want to stack two panels on top of each other within your 'home' card as below.... If you need to control how much room each sub-item takes up you need to look at layout properties specifically hbox I think.
home = new Ext.Panel({
title: "Home",
scroll: 'vertical',
items: [
{
html: 'first panel'
},
{
tpl: '<tpl for="."><div messageId="{message_id}"></div></tpl>'
}
]
});
Alternatively you might have been talking about having something like a second toolbar, in which case take a look at dockedItems.