I'm completely new to Sencha Touch and can't seem to find an answer to what I'm trying to do. I currently have a List view that shows the time schedule of an event. What I want to do is have a block above this list that shows a map of the venue location.
Here is my current code:
Main.js
Ext.define('eventApp.view.Home', {
extend: 'Ext.List',
xtype: 'schedulepanel',
id: 'sched',
config: {
title: '<span class="logo"></span>',
iconCls: 'time',
grouped: true,
itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div>',
store: 'ScheduleList',
onItemDisclosure: true
}
});
Any help regarding this would be massively appreciated. If you any more code then just let me know.
You should use vbox layout to break UI into 2 vertical blocks like this where top half will have map and bottom half will have list:
Ext.define('eventApp.view.Home', {
extend: 'Ext.Panel',
alias: 'widget.schedulepanel',
id: 'sched',
config : {
layout : 'vbox',
items : [{
xtype : 'panel',
flex : 1,
items : [{
xtype: 'map',
useCurrentLocation: true
}]
}, {
xtype : 'panel',
flex : 1,
items : [{
iconCls: 'time',
grouped: true,
itemTpl: '<div class="white-circle">{time}</div> <div class="list-title">{title}</div> <div class="list-desc">{description}</div>',
store: 'ScheduleList',
onItemDisclosure: true
}]
}]
}
});
PS I haven't tested this code but that's the idea.
Related
Lately im trying to learn ST2 myself, and then bug things happend.
I create a Ext.Component view, and then i put it to a parent view which extends Ext.Container.
Unfortunately, there is nothing but air rendered in my page. Some guys help me ? Much thanx. Here is my CODES below.
app.js
Ext.application({
name: 'myAPP',
requires: [
'Ext.MessageBox'
],
models: [
'Goods'
],
views: [
'Viewport',
'GoodsList',
'GoodsListItem'
],
controllers: [],
stores: [
'GoodsList'
],
// some basic codes...
});
Viewport.js - view
Ext.define('myAPP.view.Viewport', {
extend: 'Ext.tab.Panel',
xtype: 'viewport',
config: {
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{
title: 'Series',
iconCls: 'list',
xtype: 'goodslist'
}
]
}
});
GoodsList.js - view
Ext.define('myAPP.view.GoodsList', {
extend: 'Ext.Container',
requires: [
'Ext.TitleBar',
'myAPP.view.GoodsListItem'
],
xtype: 'goodslist',
config: {
layout: {
type: 'fit'
},
items: [
{
xtype: 'titlebar',
title: 'GoodsList',
docked: 'top',
items: [
{
iconCls: 'more',
align: 'right'
}
]
},
{
xtype: 'goodslistitem'
}
]
}
});
GoodsListItem.js - view
Ext.define('myAPP.view.GoodsListItem', {
extend: 'Ext.Component',
xtype: 'goodslistitem',
config: {
store: 'goodsliststore',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="s-row">',
'<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
'<img src="{thumb}" />',
'<h1>{#}. {pname}</h1>',
'{price}',
'</div>',
'</div>',
'</tpl>'
)
}
});
GoodsList.js - store
Ext.define('myAPP.store.GoodsList', {
extend: 'Ext.data.Store',
config: {
model: 'myAPP.model.Goods',
storeId: 'goodsliststore',
data: [
{
pname: 'Goods',
price: '5RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '15RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '25RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
},
{
pname: 'Goods',
price: '35RMB',
thumb: 'http://qlogo4.store.qq.com/qzone/181830631/181830631/100?1317298327'
}
]
}
});
Goods.js - model
Ext.define('myAPP.model.Goods', {
extend: 'Ext.data.Model',
config: {
fields: [
{ name: 'pname', type: 'string' },
{ name: 'price', type: 'int' },
{ name: 'thumb', type: 'string' }
]
}
});
ST Version - Touch 2.1.1
It seems you are missing some of the basics concepts for working with lists in Sencha Touch.
Your GoodsList view doesn't actually have an Ext.dataview.List, so that's why you don't see anything.
Replace the element:
{
xtype: 'goodslistitem'
}
with a list component, something like:
{
xtype: 'list'
}
Now let's put it fullscreen and let's use the XTemplate you defined in GoodsListItem.js as the itemTpl for your list:
{
xtype: 'list',
fullscreen: true,
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="s-row">',
'<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
'<img src="{thumb}" />',
'<h1>{#}. {pname}</h1>',
'{price}',
'</div>',
'</div>',
'</tpl>'
)
}
You can actually delete your GoodsListItem.js view.
If you really want to go with a separate list item that can use components layout, you should set the defaultType configuration, but this has worse performance and adds a level of complexity. Check the guide on Using Dataviews if you are interested.
Note: I am assuming your Ext.XTemplate syntax is correct.
[EDIT] My code probably won't work as it is: check this question about using XTemplate as itemTpl
Last we have to say Sencha Touch which Store to bind to the list, this is done through the store configuration:
{
xtype: 'list',
fullscreen: true,
itemTpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="s-row">',
'<div class="s-col {[xindex % 2 === 0 ? "s-c2" : "s-c1"]}">',
'<img src="{thumb}" />',
'<h1>{#}. {pname}</h1>',
'{price}',
'</div>',
'</div>',
'</tpl>'
),
store: 'GoodsList'
}
This should point you on the right track. If you ask me, you are trying to accomplish something quite complex from scratch, I would suggest you to make your way to this starting with a basic list example:
Ext.create('Ext.List', {
fullscreen: true,
itemTpl: '{title}',
data: [
{ title: 'Item 1' },
{ title: 'Item 2' },
{ title: 'Item 3' },
{ title: 'Item 4' }
]
});
Then adding in steps more complex stuff, like binding to an Ext.data.Store, using an Ext.Template as itemTpl, then an Ext.XTemplate
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
I'm using Sencha Touch 2.0.1. I'm trying to get a reference to some HTML in a Container. (My objective is to read the width of the object, and shrink the font size if necessary so it fits nicely).
Here's my code:
Ext.define("SFCT.view.Flashcard", {
extend: 'Ext.Container',
xtype: 'flashcardpanel',
requires: [
'Ext.TitleBar'
],
config: {
itemId: 'mainScreen',
title: 'Flashcards',
layout: 'fit',
items: [
{
xtype: 'container',
layout: {
type: 'vbox',
pack: 'center'
},
items: [
{
xtype: 'container',
itemId: 'wordContainer'
}
],
style: 'text-align: center'
},
{
xtype: 'button',
docked: 'right',
text: 'Next',
action: 'next'
}
]
},
updateWord: function(newWord) {
var s = '<div style="font-size: 72px">' + newWord+ '</div>';
var c = Ext.ComponentQuery.query('#wordContainer')[0];
console.log(c.getHtml());
c.setHtml(s);
}
});
If I use Ext.Container.getHtml() as shown above, it returns the HTML as a string. But I'm looking for a reference to the div element itself, so that I can get its width.
Any ideas how I can do that?
Thanks.
If I'm not mistaken
c.element
Should get you a reference to the wrapped element.
I add a dataview in an carousel form and it shows up as a list. Then I delete several items of the dataview, but the list in carousel view doesn't change. What should I do to refresh the view?
I have tried several methods such as 'remove()', 'removeAll()', 'destroy()', 'refresh()', but it has no effect.
Model:
Ext.define('Chihiro.model.User', {
extend: 'Ext.data.Model',
config: {
fields: [ 'id', 'name', 'nickname', 'signiture', 'gender', 'birthday', 'school', 'job', 'portrait', 'interests', 'dis'],
proxy: {
type: 'localstorage',
id: 'friends'
},
autoLoad: true
}
});
dataview:
Ext.define('Chihiro.view.userlist.List', {
extend: 'Ext.DataView',
xtype: 'userlist',
store: {
model: 'Chihiro.model.User'
},
config: {
ui:'loans',
useComponents: true,
defaultType: 'listitem',
emptyText: '<div style="margin-top: 20px; text-align: center">没有找到任何人哦</div>',
deselectOnContainerClick: false
}
});
Panel:
Ext.define('Chihiro.view.contact.List', {
extend: 'Ext.Carousel',
xtype: 'contactpanel',
id: 'contactnavigationview',
layout: 'vbox',
config: {
fullscreen: true,
//autoDestroy: false,
scrollable: true,
//defaultBackButtonText: '返回',
items: [
{
xtype: 'titlebar',
docked: 'top',
title: '好友'
}
]
}
});
You will need to re-load the store in order to refresh the dataview.
Methods like remove(), removeAll(), destroy() and refresh() will definitely won't have any effect.
When you change the items inside a store, you need to call load() method on your datastore. This will essentially refresh your dataview.
yourStoreForDataView.load();
Useful Post : Sencha-touch : refresh list : store
I have a panel inside a panel as an item, along with other docked items.
For some reason it is not showing up.
These are stuffs to add to main panel:
MarketMakerApp.views.businessInfo = new Ext.Panel({
id: 'businessInfo',
layout: 'fit',
html: '<br /><br /><br /><div>{ id } </div>' + '<div>{ title }</div>'
//html: 'This is the business info view'
});
MarketMakerApp.views.businessTabbar = new Ext.TabBar({
dock: 'bottom',
ui: 'dark',
items: [
{
text: '1',
iconCls: 'info',
hander: function() {
MarketMakerApp.views.viewport.setActiveItem('businessInfo', {type: 'slide', direction: 'left' });
}
},
{
text: '2',
iconCls: 'star',
hander: function() {
this.add( MarketMakerApp.views.businessInfo);
this.setActiveItem(2);
}
},
{
text: '3',
iconCls: 'map',
hander: function() {
}
}
]
});
And the main panel is this:
MarketMakerApp.views.businessContainer = new Ext.Panel({
id: 'businessContainer',
layout: 'fit',
dockedItems: [
MarketMakerApp.views.businessTypeListToolbar,
MarketMakerApp.views.businessTabbar
],
items: [ MarketMakerApp.views.businessInfo]
});
The tabbar and toolbar are showing up fine, but I can't see the businessInfo panel.
Any suggestions would be appreciated.
p.s. I struggled with Tabpanel far too long to give up and just using tabbar now.
I haven't had any success in creating Panels (or whatever your view is) programmatically like that. Here's some code that does work w/that approach though.
Add an initComponent function to your businessContainer like the following instead of setting the items on the businessContainer panel:
initComponent: function(){
Ext.apply(this, {
items: [
MarketMakerApp.views.businessInfo
]
});
MarketMakerApp.views.businessContainer.superclass.initComponent.apply(this, arguments);
}