im new in sencha and have a problem.
I hace a list with information ( name and picture ) and need another with the detail, i follow de example who provide the documentation. My problem is that i can't use the values of the first list. Values like name, photo, etc...
The problem is here:
Ext.define('app.view.ArtistDetail',{
extend: 'Ext.Panel',
xtype: 'artistdetail',
config: {
tpl: tpl,
items: [{
xtype: 'panel',
height: 50,
tpl: '{title}' <-- PROBLEM !!!!
}]
}
});
The tpl: tpl, is like this and show the information correct but i can't get the title in the items section...
var tpl = new Ext.XTemplate(
'<div class="global">',
'<div class="artist-foto">',
'<img src="{field_foto}" />',
'</div>',
'<div class="artist-title">',
'{title}',
'</div>',
'</div>'
);
THx for help !!!
According to: http://docs.sencha.com/touch/2-0/#!/api/Ext.Component
every Ext.Component has configs:
data and tpl that are related between each other.
So you also have to set data config:
{
xtype: 'panel',
id: 'myPanel',
height: 50,
tpl: '{title}',
data: {
title: 'Hello world'
}
}
Also you can set data using controller:
onListItemTap: function(view, index, target, record) {
var myPanel = Ext.getCmp('myPanel');
if (myPanel) {
myPanel.setData(record.data);
Ext.getCmp('viewport').setActiveItem(myPanel);
}
}
Here you set data from your list item to your details panel.
Related
I want a carousel panel in the detailview of a list. I put the carousel with a flex 3 inside a panel. With this code I make sure the tpl inside the panel items will work. But I don't know how to fix the problem with the carousel.
Code for tpl inside panel items:
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData); this.getAt(1).setData(newData);
}
complete code of my WorkDetail.js
Ext.define('Portfolio.view.WorkDetail', {
extend: 'Ext.Panel',
xtype: 'workdetail',
requires: [
'Ext.carousel.Carousel'
],
config: {
xtype: 'panel',
layout: 'hbox',
align: 'stretch',
styleHtmlContent: true,
scrollable: null,
items: [
{
flex:3,
xtype: 'carousel',
// HERE THE TLP WORKS
// tpl: '<img src="{bigImage1}"></img>',
// style: 'background-color: #456370;',
items: [
{
// TPL DON'T WORK
tpl: '<img src="{bigImage1}"></img>',
style: 'background-color: #E84F17;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage2}"></img>',
style: 'background-color: #4DBAB6;'
},
{
// TPL DON'T WORK
tpl: '<img src="{bigImage3}"></img>',
style: 'background-color: #BBB399;',
}
]
},
{
// HERE THE TLP WORKS
flex:1,
tpl: '<p>{workDiscriptionLarge}</p> <p>{workDate}</P> Bekijk de website'
}
]
},
updateData: function(newData, oldData) {
this.down('component').setData(newData);
this.getAt(0).setData(newData);
this.getAt(1).setData(newData);
}
});
this.down('component').setData(newData);
this.getAt(0).setData(newData);
These two lines will target your Carousel item and so won't populate the templates of the sub-items.
this.getAt(1).setData(newData);
This line will target the second item where you see the template working.
You will need to target each of the Carousel items individually and call the setData method of each for the templates to be populated.
// untested :)
var components = this.getAt(0).query('component');
for(var i = 0; i < components.length; i++){
components[i].setData(newData);
}
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.
i am new to sencha touch2. i want display list in a page. binding is happening successful. but i am not able to see data but able to scroll page. please any one can help me. i facing this issue. thank you.
My code is here:
Ext.define("Sencha.view.ProjectListView", {
extend: 'Ext.form.Panel',
xtype: 'projectListepage',
id: 'projectListepage',
requires: [
'Ext.data.JsonP'
],
config: {
scrollable: true,
items: [{
xtype: 'panel',
id: 'JSONP'
},
{
docked: 'top',
xtype: 'toolbar',
flex: 3,
items: [{
text: 'Project Deatils',
handler: function () {
var list = Ext.getCmp('JSONP'),
tpl = new Ext.XTemplate([
'<tpl for=".">',
'<img src="{MainImageUrl}"/><label>{ProjectName}</label><p class="temp_low">{ShortDescription}</p>', //
'</tpl>',
]);
Ext.data.JsonP.request({
url: 'http://localhost:53985/PropertyService.svc/GetAllProject',
callbackKey: 'callback',
params: {
},
callback: function (success, request) {
var project = request;
if (project) {
list.updateHtml(tpl.applyTemplate(project));
}
else {
alert('There was an error retrieving the weather.');
}
}
});
}
}]
}]
}
});
I do not see anywhere in your code sample where you are creating a list. You need to extend 'Ext.List' or use xtype:'list'. There are a few simple examples in the sencha touch 2 docs on how to create a list. http://docs.sencha.com/touch/2-0/#!/api/Ext.dataview.List
I need a list of names to display within a sheet in sencha touch. The sheet will display all other child items, but not the list. Am I doing something wrong, or does this simply not work? Here is the code:
myList = Ext.create('Ext.dataview.List', {
store: myStore,
itemTpl: '{firstName}, {lastName}'
});
mySheet = Ext.create('Ext.Sheet', {
items: myList
});
Ext.create('Ext.Panel', {
fullscreen: true,
items: [
mySheet,
{
xtype: 'button',
text: 'Click Me',
handler: function() {
mySheet.show();
}
}
]
});
Thanks in advance!
give it height=300. as per your requriment.
#jeremygerrits is almost correct.
IMO fit won't work as it will fit all the components.
My solution is to use vbox/hbox on the view container. Then on the components that get added, just add flex: 1.
e.g. container:
Ext.define('Tm.view.MyContainer', {
extend: 'Ext.Container',
xtype: 'holder',
config: {
fullscreen: true,
layout: 'vbox'
}
});
and component:
Ext.define('Tm.view.MyComponent', {
extend: 'Ext.dataview.List',
xtype: 'newc',
config: {
flex: 1,
itemTpl: '{option_text}'
}
});
and in controller (assuming container ref been set):
tpl = Ext.create('Tm.view.MyComponent');
tpl.setData(data);
this.getMyContainer().add(tpl);
Then any component added displays correctly.
Try adding a layout to your panel config:
layout: 'fit'
This should make the list fill the rest of the space.
So I have this handler which puts my 'statistics' card into view and loads the statistics store (I can see in chrome that an ajax request is sent to the server and the statistics are getting sent back in the correct json format - so that isn't the issue)
handler: function(){
myapp.mainPanel.setActiveItem(myapp.cards.statistics, { type: "slide", direction: "left" });
myapp.stores.statistics.load();
}
Here is my statistics card:
myapp.cards.statistics = new Ext.Panel({
scroll: 'vertical',
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
title: 'Statistics',
items: [{
xtype:"button",
text:"Back",
handler:function(){
myapp.mainPanel.setActiveItem(myapp.cards.home, { type: "slide", direction: "right" });
}
}]}],
items: [
],
store: myapp.stores.statistics,
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div style="border-top: 1px solid grey;" >',
'<ul>',
'<tpl if="price">',
'<li>{price}:</li>',
'</tpl>',
'</ul>',
'</div>',
'</tpl>')
});
Here is my model which I define much earlier in the code near the beginning of setup:
Ext.regModel('statistics', {
fields: [
{name: 'price', type: 'string'},
]
});
My aim is for the store to have all the stats loaded into it and the panel to show them all via the populated template. Many thanks.
Edit: the store:
myapp.stores.statistics = new Ext.data.Store({
model: "statistics",
url : "statistics.php",
proxy: {
type: "ajax",
reader: {
type: "json"
}
},
});
Edit2: Here is what happens in my statistics.php file:
<?php
echo '[{"price": "333"}]';
?>