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.
Related
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 trying to display a grid but add a panel in between List of customers and the columns Customer Id, active, firstname last name, email address.
I need to add a panel between these 2 componants. And in that panel i will be having different UI elements. How can i do this ?
Well I believe you have just a grid with The title list of costumers, The easiest way is to have a panel and a grid (grid with no title) into another panel with the title.
{
xtype: 'panel',
title: 'List of customers',
layout:'border',
items: [
{
//the panel you want
xtype: 'panel',
region: 'north',
height: 100,
},
{
//your current grid without a title
xtype: 'gridpanel',
region: 'center',
height: 300,
}
]
}
I need to add panel, with title "List if Customers" and vertical layout. In it you need to add two items: your new panel, and that grid (without title). There you will get what yout want.
{
xtype: 'panel',
layout: {
type:"vbox",
pack:"start",
align:"stretch"}
title:"List of Customers",
items: [ ... your new panel and grid .. ]
}
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;.
Please see the demo: http://jsfiddle.net/JeaffreyGilbert/NGrry/1/
How to make content of tab panel fill the center area? The heading should be on the top, below toolbar.
Expected layout: http://dev.sencha.com/deploy/touch/examples/kitchensink/. I think the Source isn't complete, only the tabPanel itself.
Please help.
Usually to do that sort of layout I've had to nest panels and use empty panels with the flex attribute set to 1.
I adjusted your code to show what I mean http://jsfiddle.net/r9c2M/
For example to center the text 'Home' underneath the toolbar title I changed the first tabpanel item to
{
title: 'Home',
layout: 'vbox',
items: [
{layout: 'hbox',
items: [
{flex: 1},
{html: '<h2>Home</h2>'},
{flex: 1}
]},
{flex: 1}
],
iconCls: 'home',
cls: 'card card1'}
Also the tabpanel should just be an item of the main viewport panel, not a dockedItem. That was messing up the layout too.
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