2 panels:
Ext.create('Ext.Container', {
fullscreen: true,
layout: 'hbox',
items: [
{
xtype: 'panel',
html: 'message list',
flex: 1,
items: [
{
xtype: 'list',
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
}
]
},
{
xtype: 'panel',
html: 'message preview',
flex: 3
}
]
});
There is no height attribute specified in first panels list object, so it is not available for display. How can i set 100% height in xtype: 'list' ?
You need to give the lists container a layout so it knows to stretch its children (the list).
layout: 'fit'
Using fit will tell your panel to make all children (only the list in your case) to stretch to the size of your panel.
Example of this on Sencha Fiddle.
And here is a great guide on all the available layouts in Sencha Touch 2.0.
Related
I have started to work on Sencha touch a week ago and I still no able to figured out how to create a view. I want to create textfield and listView. Listview shold be shown below the textfield. I am able to show either ListView or textfield as I am able to extend only Ext.panel or Ext.List.
Please help. Please share a link those give details about creating views in Sencha touch.
Ext.define('TrainEnquiry.view.SearchTrains', {
extend: 'Ext.Panel',
alias: "widget.searchtrains",
requires: [ 'Ext.dataview.List','Ext.form.FieldSet','TrainEnquiry.store.Homes'],
config: {
title: 'Train Enquiry',
items: [
{
xtype: 'fieldset',
style:'width:70%; margin:10px',
padding: '10px',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},{
xtype: 'homepagelist',
style: 'margin-Top:100px',
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}
]
}
});
Showing list views when you are also using a containing element (like a panel) is one of the trickiest things in Sencha, in my opinion. It can be done, but you have to set the layout: 'fit' property on the panel. You'll also need to dock your fieldset to the top (assuming you want it at the top, and probably turn that simple title attribute into a titlebar view within the panel. Here's a link to a SenchaFiddle demonstrating an example of how to do this, and some code for you below:
Ext.Viewport.add({
xtype: 'panel',
layout: 'fit',
items: [
{
xtype: 'titlebar',
title: 'Train Enquiry',
docked: 'top'
},
{
xtype: 'fieldset',
docked: 'top',
items: [
{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}
]
},
{
xtype: 'list',
itemTpl: '<div class="myContent">'+
'<div><b>{name}</b> </div>' +
'</div>',
data: [
{ name: 'Item 1' },
{ name: 'Item 2' },
{ name: 'Item 3' },
{ name: 'Item 4' }
]
}
]
});
(By the way next time keep searching, this is the question/answer that most likely would have helped you most: sencha don't seeing the list in a panel)
Avoid using inline styling.
If you want the fieldset to stick to the top of the main panel always and the list to scroll, use layout:'fit' inside the main panel config and add docked: 'top' at the fieldset config.
If you want both of them to scroll, remove main panel layout (which will take layout:'auto'), put scrollable:true in main panel config and add scrollable:false in list config. Like this:
config: {
title: 'Train Enquiry',
scrollable : true,
items: [{
xtype: 'fieldset',
items: [{
xtype: 'textfield',
placeHolder: 'Username',
itemId: 'userNameTextField',
name: 'userNameTextField',
required: true
}]
},{
xtype: 'homepagelist',
scrollable: false, // no scrolling for the list
config: {
itemTpl: '<div class="myContent">'+
'<div><b>{status}</b> </div>' +
'</div>',
store: 'Homes',
onItemDisclosure: true
}
}]
}
Get the code here: http://www.senchafiddle.com/#x8rZo#fRzwt
For some reason my form panel isn't showing. Can anyone help? I'm a newbie so sorry if this is obvious! It was build with Sencha Architect but I can't understand why no fields are showing in the form?...
Ext.define('MyApp.view.Login', {
extend: 'Ext.Container',
config: {
layout: {
type: 'vbox'
},
items: [
{
xtype: 'titlebar',
docked: 'top',
title: 'My Title'
},
{
xtype: 'toolbar',
docked: 'top',
items: [
{
xtype: 'button',
text: 'Call'
},
{
xtype: 'button',
text: 'Email'
}
]
},
{
xtype: 'container',
flex: 1,
border: 2,
items: [
{
xtype: 'formpanel',
styleHtmlContent: true,
items: [
{
xtype: 'fieldset',
title: 'MyFieldSet',
items: [
{
xtype: 'textfield',
label: 'Field'
},
{
xtype: 'textfield',
label: 'Field'
}
]
}
]
}
]
}
]
}
});
To display formpanel (Ext.form.Panel) using Sencha Touch 2.3+ correctly inside other container you need to add scrollable: null property
{
xtype: 'formpanel',
scrollable: null,
items: [
...
]
}
See discussion here
Change the layout of your Login view from vbox to fit. Then set the layout of the container that contains your formpanel to fit also.
Check this link for more info about layouts in Sencha Touch.
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 problem I have been struggling with for quite a while now so hopefully someone can help me out here.
Say you have this DataView object:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
I thought I could use an instance of this DataView on different Panels like this:
var gameInfo = Ext.create('Score.view.GameInfoPanel', {
xtype: 'gameInfo',
scrollable: false,
fullscreen: false,
height: 100,
flex: 2,
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
gameInfo,
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
When would show this panel in Safari I see that the DataView is in the page/panel but it is hidden. The problem is probably that x-item-hidden is set for this DataView instance. After struggling with this for hours I have no clue why this is and how to solve this. The only suggestions I could find is that I should set the height of the DataView and make it not scrollable. All of that does not seem to work. So any feedback would be very much appreciated!
http://www.senchafiddle.com/#2Ig9U
That sample code works just fine.
"I thought I could use an instance of this DataView on different Panels like this:"
This might be a clue. Last time I tried creating and referencing the -same- object in an extjs project I ran into something similar. What you should rather do is use an alias, and instantiate it via a widget.
more or less:
Ext.define('Score.view.GameInfoPanel', {
extend: 'Ext.DataView',
alias:'widget.scoreViewGameInfoPanel', //widgets use lazy loading
config: {
store: {
fields: ['Name', 'Score'],
data: [
{Name: 'test', Score: '1'},
{Name: 'test2', Score: '100'}
]
},
itemTpl: '{Name} - {Score}',
fullscreen: false
}
});
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info',
},
{
xtype: 'panel',
html: 'before',
flex: 1
},
Ext.widget('scoreViewGameInfoPanel',{
//coz sencha hated the
//same object in 2 places last i looked
scrollable: false,
fullscreen: false,
height: 100,
flex: 2
}),
{
xtype: 'panel',
html: 'after',
flex: 3
}
]
}
});
If you actually need the -same- panel in 2 places for selecting and stuff, then I'm not too sure.
It took a while but I finally solved it. There were a few problems with the initial code.
In the definition of the GameInfoPanel the configuration attribute 'fullscreen' should not be used. I am not exactly sure why. But from what I understood is that the view(s) in which this view is used already set this attribute. By setting it again, even when it is set to false, it will hide the view.
Furthermore the 'xtype' attribute should be set. In this case I set it to 'gameinfo'. This is because you then can configure this view in the PlayerView. Also by setting the 'id' you can refer to this instance of the GameInfoPanel in your controller. So the PlayerView looks like this in the end:
Ext.define('Score.view.PlayerView', {
extend: 'Ext.Panel',
xtype: 'playerview',
requires: [
'Score.view.PlayerInfoPanel',
'Score.view.GameInfoPanel'
],
config: {
title: 'Player Info',
iconCls: 'user',
layout: 'vbox',
scrollable: true,
items: [
{
docked: 'top',
xtype: 'toolbar',
id: 'toolbarId',
title: 'Player Info'
},
{
xtype: 'playerinfo',
id: 'currentPlayerInfoId',
flex: 1,
scrollable: false
},
{
xtype: 'gameinfo',
id: 'currentGameInfoId',
flex: 2,
scrollable: false
}
]
}
});
I've got some HTML content that is longer than a full page in height. At the end of this content, I'd like to include a horizontal carousel. Every attempt I make shows the HTML content, but I can't get the carousel to work properly.
Here's where I'm at code-wise...
Ext.create('Ext.Container', {
fullscreen: true,
scrollable: true,
items: [
{
xtype: 'panel',
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
},
{
xtype: 'carousel',
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
}
]
});
Any help greatly appreciated.
I have expirience with Sencha 1.1. I have no idea if your syntax is for 1.1 or 2.
i played a little with your code, and here it goes.
Ext.setup({
onReady: function() {
var panel= new Ext.Panel({
html: '<h1>Lots of content</h1><p>With additional content</p><p>With additional content</p><ul><li>asdf</li><li>asdf</li></ul>',
style: 'background-color: #2E99FC'
});
var carousel = new Ext.Carousel({
flex:1,
items: [
{
html : 'Item 1',
style: 'background-color: #5E99CC'
},
{
html : 'Item 2',
style: 'background-color: #759E60'
},
{
html : 'Item 3',
style: 'background-color: #FF0000'
}
]
});
new Ext.Panel({
fullscreen: true,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [panel, carousel]
});
}
});
The big thing that was missing to you is the flex:1 property. This is why it didin't appear in your screen. Its highly crucial.