Sencha Touch 2 - embed a Component with xtype in items but not work - sencha-touch-2

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

Related

Why navigation bar have different sizes ? - Sencha Touch

I have 3 view are "Home,Category,Info".
This Home panel :
This Category panel :
And This List panel :
In list panel.The navigation bar has different sizes of Home panel and Category panel.
How do I fix ?
Thank you.
----Update----
Code Home view:
Ext.define('Catalog.view.Home', {
extend: 'Ext.navigation.View',
xtype: 'homepanel',
config: {
// activeItem: 1,
id: 'mynavigationview',
navigationBar: {
items: [
{
xtype: 'button',
text: 'Categories',
id: 'category',
translate: true,
translationKey: 'navigationbar.category',
align: 'left',
action : 'Categories',
// handler: function(me) {
// var bar = me.up('navigationview').getNavigationBar();
// // bar[bar._hidden ? 'show' : 'hide']();
// }
}
]
},
title: 'All',
iconCls: 'list',
cls: 'home',
styleHtmlContent: true,
tabBarPosition: 'bottom',
items:[
{
title: "All Apps",
xtype: 'list',
id:'Applist',
itemTpl: new Ext.XTemplate(
'<img src="http://61.47.41.108:9999/system/appinfos/appicons/000/000/{id}/original/{appicon_file_name}" width="50" heigh="50" style="float:left;clear:both;"></img>',
'<div style="margin-left: 60px;word-wrap: break-word;width:80%;">',
'<span style="font-size:16px;">{name}</span><br>',
'<span style="font-size:13px;color:#7C7C7C;" id="catname">{categoryname}</span>',
'</div>'
),
store: {
autoLoad: true,
fields: ['id','name','created_at','appicon_file_name','categoryid','categoryname','url_ios','url_android','gallery','description'],
sorters: [{
property:'created_at',
direction:'DESC'
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/appinfos.json',
reader:{
type: 'json',
rootProperty:'appinfos'
}
}
}
}
]
}
});
Code List view:
Ext.define('Catalog.view.Navigation', {
extend: 'Ext.navigation.View',
xtype: 'navigation',
requires: ['Ext.data.Store'],
config: {
// navigationBar: false,
title: 'Categories',
items: [
{
xtype: 'list',
id: 'Catlist',
itemTpl: '<span style="font-size:16px;" id="cattname">{name}</span>',
store: {
storeId: 'myStore',
autoLoad: true,
fields: ['id','name'],
sorters: [{
property:'name',
}],
proxy: {
type: 'jsonp',
url: 'http://61.47.41.108:9999/categories.json',
reader:{
type: 'json',
rootProperty:'Catalog'
}
}
}
}
]
}
});
It is due to the styles added by styleHtmlContent: true. Try setting it on both the views, or remove it from both.

How to make carousel Infinite with dynamic data(using url) in sencha

Since 2 days, I am trying to create Infinite carousel with desired data but could not get it. I also tried Kitchen Sink (Touch Style). My theme is also same as touch style. I have categories and If I click one category then display associated respective Words , which is more different carousel items.
I don't know how many words are there. but I want to display 7 Words in one swiping view(If i have 35 then i need 5 view), which is carousel items, Just like kitchen sink(Touch style).
Source: http://dev.sencha.com/deploy/touch/examples/production/touchstyle/index.html
and Click Dress and you have to show dressess.
I want to display like this only.
I just displayed categories but could not display category respective words.
What I have done until now:
View/CategoryPage.js
Ext.define('MyApp.view.CategoryPage', {
extend: 'Ext.Container',
alias: "widget.categorypage",
config: {
layout: 'vbox',
items: [
{
xtype:'globalmenu',
},
{
xtype: 'toolbar',
//docked: 'top',
cls:'roundedToolbar',
title: 'Categories',
},
{
xtype:'panel',
flex: 1,
layout: 'fit',
cls: 'category-data',
items:[
{
scrollable: {
direction: 'vertical',
directionLock: true,
},
xtype: 'list',
layout: 'fit',
itemHeight: 20,
store: 'CategoryStore',
itemTpl: [
'<div class="categoryListings">',
'<tpl for="data">',
'<span onClick="catOption({cat_id})">{category_name}</span> ',
//'<span >{category_name}</span> ',
'</tpl>',
'</div>',
].join(''),
listeners: {
itemtap : function(list, index, target, record, event,cat_id) {
//var id = index;
var id = index + 1;
console.log( "iOS" + id);
catOption(id);
}
}
}
]
},
]
}
});
function catOption(id){
console.log("ID--"+id);
var token= '650773253e7f157a93c53d47a866204dedc7c363';
var url = 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words_with_definition/catID/'+id+'/SDSILLYTOKEN/'+token;
var stProxy = Ext.StoreMgr.get("CategoryWordDisplayStore").getProxy();
stProxy.setUrl(url);
Ext.getStore("CategoryWordDisplayStore").load();
Ext.Viewport.remove(Ext.Viewport.animateActiveItem({ xtype: 'categorywordsdisplay' },{type:'slide'}), true);
}
If one of the Category Click then Display respective words,
Ext.define("MyApp.view.CategoryWordDisplayMain", {
extend: 'Ext.Container',
alias: "widget.categorywordsdisplay",
requires:"Ext.dataview.List",
config: {
layout: 'vbox',
items: [
{
xtype: 'globalmenu',
flex: 1,
},//end of top menu
{
xtype:'panel',
scrollable: false,
flex: 3,
layout: 'fit',
items:[
{
flex: 1,
xtype: 'toolbar',
/* title: "Help", */
cls:'roundedToolbar',
title: 'value',
docked: 'top',
itemId:'titleid',
id:'titleid',
},
{
xtype: 'list',
scrollable: true,
itemId: 'demolist',
// html:'Test',
loadingText:"Loading ....",
emptyText: "<div class=\"words-list-empty-text\">No Words found.</div>",
//onItemDisclosure: true,
// grouped: true,
itemTpl: [
'<div>',
'<tpl for="data">',
'<ul class="parabox">',
'<li><h2 class="noStar" onclick = "addtofavourite({word_id})"><b>{name}</b> </h2>',
'<tpl for="definitions">',
'<ul class="para-box-wrapper">',
'<li class="{rating}"><div class="paragraph-def" onclick = "ratingStar({def_id})">','{defintion}',
'<span class="authorBox"><i>Author: {author}</i></span>',
'</li>' ,
'</div>',
'</ul></li>',
'</tpl>',
'<div class="yesStar" ></div>',
'</ul>',
'</tpl>',
'</div>'
].join(''),
store: 'CategoryWordDisplayStore',
}
]
},//end of menuitems
]
},
initialize : function(){
this.callParent();
var store = Ext.getStore('CategoryWordDisplayStore');
console.log("category ----"+store.getAt(0).getData().name);
this.down('toolbar').setHtml(store.getAt(0).getData().category);
},
});
function home(){
console.log("Home CategoryPage CLick");
Ext.Viewport.remove(Ext.Viewport.getActiveItem(), true);
Ext.Viewport.add([
{ xtype: 'mainmenuview' }
]);
}
Category Display Model
model/CagegoryModel.js
Ext.define('MyApp.model.CategoryModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name: 'cat_id'},
{name: 'category_name'},
],
},
});
and
Ext.define('MyApp.model.CategoryModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category_name',
],
belongsTo: "MyApp.model.CategoryModel"
}
});
Word Display Model After Click Category:
Ext.define('MyApp.model.CategoryDisplayModel', {
extend: 'Ext.data.Model',
requires: ['MyApp.model.CategoryDisplayModelMenu'],
config: {
fields: [
{name:'data', mapping: 'data'},
{name:'name'},
{name: 'category'},
{name: 'author'},
],
}
});
and
Ext.define('MyApp.model.CategoryDisplayModelMenu', {
extend: 'Ext.data.Model',
config: {
fields: [
/*'cat_id',*/
'category',
'name',
],
belongsTo: "MyApp.model.CategoryDisplayModel"
}
Stores:
Category Display Store:
Ext.define('MyApp.store.CategoryStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryModel',
autoLoad:true,
id:'Contacts',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/categories/SDSILLYTOKEN/650773253e7f157a93c53d47a866204dedc7c363',
reader:
{
rootProperty:''
}
}
}
});
});
Word Display Stores:
Ext.define('MyApp.store.CategoryWordDisplayStore',{
extend: 'Ext.data.Store',
config:
{
model: 'MyApp.model.CategoryDisplayModel',
autoLoad:true,
id:'Category',
proxy:
{
type: 'ajax',
url: 'http://alucio.com.np/trunk/dev/sillydic/admin/api/word/searched_words/',
reader:
{
rootProperty:''
}
},
}
});
I have not created any controller yet.
JSON: Category Json and
First Category(catID=1) Word Json If i swip right then cat id change 2 and again swip right then 3 and so on. if I swip left from the 3 cat id, then goto cat id 2.
please hep me out.Thank in Advance.

How to do I insert a form into a view?

I am new to sencha touch and I am having trouble loading a form into a view.
In my app.js I am loading the main view as such
Ext.Viewport.add(Ext.create('app.view.Main'));
My full app.js is as follows
Ext.application({
name: 'app',
requires: [
'Ext.MessageBox',
'Ext.form.FieldSet',
],
views: ['Main'],
launch: function() {
// Initialize the main view
Ext.Viewport.add(Ext.create('PlanPouch.view.Main'));
},
});
My main view is:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
form
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
I took the form from the official documentation and the form doesn't load for some reason. So how can I add the form to my main view?
First let it solve by your approach. Make the following changes & it should work in your system (Running on mine):-
1.) In app.js
Ext.Viewport.add(Ext.create('app.view.Main'));
2). In Main.js
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype: form
}
]
}
});
var form = Ext.create('Ext.form.Panel', {
fullscreen: true,
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
});
But i will not prefer to call the formpanel in the way you are doing. Rather you can follow ARolek answer OR follow this approach :-
1) app.js
Ext.application({
name: "app",
views: ["Main","second"],
launch: function () {
Ext.Viewport.add(Ext.create('app.view.Main'));
}
});
2) Main.js
Ext.define("app.view.Main", {
extend: "Ext.Container",
requires:["app.view.second"],
config:{
fullscreen: true,
layout:
{
type: 'fit'
},
items:[
{
xtype: "form"
}
]
}
});
3) second.js
Ext.define("app.view.second", {
extend: "Ext.form.Panel",
requires:['Ext.form.FieldSet','Ext.Toolbar'],
alias: "widget.form",
config:
{
items:
[
{
xtype: 'fieldset',
title: 'About You',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});
If you want the form to always be in app.view.Main, then simply do:
Ext.define("app.view.Main", {
extend: 'Ext.Container',
config:{
items:[
{
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name: 'name',
label: 'Name'
},
{
xtype: 'emailfield',
name: 'email',
label: 'Email'
},
{
xtype: 'passwordfield',
name: 'password',
label: 'Password'
}
]
}
]
}
});

Sencha Touch 2 Navigation View responding very slowly

I am a newbie to Sencha Touch 2 . I am building an PhoneGap + Sencha Touch 2 application for Android 2.3.4 . I completed developing my application . While testing the app , i found out that the navigation view i used is responding very slow on tap of disclosure item.
I am using a list container view , list view and editor view . The code for them is given below .
The below piece of code works fine but on the tap of disclosure item the incident editor view is shown after 10 secs and i sometimes even don't know whether it was clicked or not .
So i need help in two things :
1.) When i click on disclosure item i should show masking to know that i clicked it atleast
2.) Or speed up the show of incident editor view
ListContainer View :
Ext.define('Sample.view.ListContainer', {
extend: 'Ext.NavigationView',
xtype:'listContainer',
id: 'idListContainer',
config: {
id:'idIncidentListContainer',
items:[
{
xtype:"incidentsList",
cls: "clsHeader"
}
]
}
});
List View:
Ext.define("Sample.view.IncidentsList", {
extend: "Ext.Panel",
xtype: 'incidentsList',
id: 'idIncidentList',
requires:[
'Ext.dataview.List',
'Ext.data.proxy.Memory',
'Ext.data.Store',
],
alias:'widget.incidentslist',
config: {
id: 'idIncidentList',
layout:'fit',
items: [
{
xtype: "toolbar",
docked: "top",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo" ,
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "My Incidents",
},
{ xtype: 'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentsListTitle',
title:"Welcome",
},
]
},
{
xtype: "list",
store: "IncidentStore",
itemId:"incidentsList",
id:"inclist",
loadingText: "Loading Incidents...",
emptyText: "<div class=\"empty-text\">No incidents found.</div>",
onItemDisclosure: true,
itemTpl: Ext.create('Ext.XTemplate',
'<tpl if="TKT_STATUS_NAME == \'CLOSED\'">',
'<div class="vm_statusRed">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'OPENED\'">',
'<div class="vm_statusYellow">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'ASSIGNED\'">',
'<div class="vm_statusOrange">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'PENDING\'">',
'<div class="vm_statusRed">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'RESOLVED\'">',
'<div class="vm_statusOrange">',
'</tpl>',
'<tpl if="TKT_STATUS_NAME == \'REOPEN\'">',
'<div class="vm_statusYellow">',
'</tpl>',
'<div class="vm_dvList"><h4 class="vm_txtName"><span class="vm_listHeader"><label>Inci.#{TKT_ID} by </label><label class="vm_txtFirstName"><i>{FIRST_NAME:ellipsis(15, true)}</i></label></span><div class="date vm_clsDate">{CREATED_ON:date("d-M-y H:i")}</div></h4>',
'<div class="vm_title">{TKT_SUBJECT}</div>',
'<div class="vm_subDesc">{TKT_DESC}</div></div></div>'
)
}],
listeners: [
{
delegate: "#incidentsList",
event: "disclose",
fn: "onIncidentsListDisclose",
loadingText: "Loading ...",
},
]
},
initialize: function() {
this.callParent(arguments);
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
var getIncidentData = localStorage.getItem('userIncidentData');
var parseIncidentData = JSON.parse(getIncidentData);
Ext.getCmp("idIncidentsListTitle").setTitle("Welcome, " + fname);
Ext.getStore("IncidentStore").setData(localStorage.userIncidentData).load();
},
onIncidentsListDisclose: function (list, record, target, index, evt, options) {
console.log("editIncidentCommand");
/*var list = Ext.getCmp('idIncidentList');
list.setMasked({
xtype:'loadmask',
message:'Loading...'
});*/
this.fireEvent('editIncidentCommand', this, record);
}
});
Editor View :
Ext.define("Sample.view.IncidentEditor", {
extend: 'Ext.form.Panel',
xtype: 'incidentsEditor',
id:'incidentsEditorView',
alias: "widget.incidenteditorview",
config: {
scrollable: 'vertical',
id:'idIncidentEditor',
layout:'vbox',
items: [
{
xtype: "toolbar",
docked: "top",
ui:'light',
id:"idHeaderTwo",
cls:"clsHeaderTwo",
items: [
{ xtype: 'title' ,
cls: 'clsLeftTitle',
title: "Incident Details",
},
{xtype: 'spacer'},
{ xtype: 'title' ,
cls: 'clsRightTitle',
id: 'idIncidentEditorTitle',
title:"Welcome",
},
]
},
{ xtype: "fieldset",
items: [
{
xtype: 'textfield',
name: 'TKT_SUBJECT',
label: 'Subject',
labelAlign: 'top',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textareafield',
name: 'TKT_DESC',
label: 'Description',
labelAlign: 'top',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SEV_DESC',
label: 'Impact',
labelWidth:'45%',
cls:'vm_fieldFont',
clearIcon:false,
disabled:true
},
{
xtype: 'textfield',
name: 'SERVICE_NAME',
id:'displayIncident',
cls:'vm_fieldFont',
label: 'IncidentType',
disabled: true,
labelWidth:'45%',
},
{
xtype: 'textfield',
label: 'Category',
name: 'CATEGORY_NAME',
cls:'vm_fieldFont',
id:'getCategory',
labelWidth:'45%',
disabled: true,
},
]
},
],
},
initialize: function() {
var getLoginData = localStorage.getItem('userData');
var parseData = JSON.parse(getLoginData);
var fname = parseData[0].FIRST_NAME;
Ext.getCmp("idIncidentEditorTitle").setTitle("Welcome, " + fname);
//var list = Ext.getCmp('idIncidentList');
//list.unmask();
},
onIncidentsListDisclose: function (list, record, target, index, evt, options) {
console.log("editIncidentCommand");
this.fireEvent('editIncidentCommand', this, record);
}
});
Controller:
Ext.define("Sample.controller.Incidents", {
extend: "Ext.app.Controller",
config: {
refs: {
//lookup for views by xtype
incidentsListView:'incidentslist',
incidentEditorView: 'incidenteditorview',
incidentsList: 'incidentsList',
listContainer:'listContainer'
},
control: {
incidentsListView: {
//commands fired by the Incidents list container.
editIncidentCommand: "onEditIncidentCommand",
},
}
},
//Transitions
slideLeftTransition: { type: 'slide', direction: 'left' },
slideRightTransition: { type: 'slide', direction: 'right' },
//Helper function(generates random integer)
getRandomInt: function (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
},
//Function to get incident details and set them to incidentview
activateIncidentEditor: function (record) {
var incidentContainer = this.getListContainer();
var incidentEditorView = Ext.create("Sample.view.IncidentEditor");
incidentEditorView.setRecord(record); // load() is deprecated.
incidentContainer.push(incidentEditorView);
},
//on edit incident command
onEditIncidentCommand: function (list, record) {
this.activateIncidentEditor(record);
}
});
Please help me guys ... Thanks in Advance ...!!!
I experience the same problems. Coding Sencha Touch 2 in MVC format makes the app's respond super-slow on "old" hardware. Especially Android. It's the drawback of HTML5 vs Native. However they claim the performance would increase when manually building the lib, I experienced almost no improvement.
On Android most performance based issues are related to Animations though. Try setting the show/hide animations to none and see if it improves.
You can also try setting the onBackButtonTap and other events on the controller though. That should improve the page rendering allot.
I had a similar problem, in my case the solution was this:
http://www.sencha.com/forum/showthread.php?184341-Best-practice-to-prevent-App-peformance-from-Slowly-degrading-after-drilling-around&p=900511&posted=1#post900511

Sencha Touch 2 add icons to nestedlist

I am trying to add images to a nested list using the getItemTextTpl method of NestedList. Can you please take a look at the following code and let me know how to fix it? This was developed using Sencha Architect. Thanks for your help.
Ext.define('myapp.view.ListContainer', {
extend: 'Ext.Container',
alias: 'widget.listcontainer',
config: {
layout: {
type: 'fit'
},
tpl: [
''
],
items: [
{
xtype: 'nestedlist',
id: 'myList',
itemId: 'mynestedlist4',
detailCard: {
xtype: 'mytabs'
},
store: 'myStore',
toolbar: {
xtype: 'titlebar',
docked: 'bottom',
ui: 'dark'
}
}
],
listeners: [
{
fn: 'getItemTextTpl',
event: 'getItemTextTpl',
delegate: '#myList'
}
]
},
getItemTextTpl: function(node) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Ext.define('myapp.view.myList', {
extend: 'Ext.dataview.NestedList',
alias: 'widget.mynestedlist',
config: {
id: 'myList',
detailCard: {
xtype: 'mytabs'
},
displayField: 'text',
store: 'myStore'
},
getItemTextTpl: function(recordnode) {
return '<img class="eventIcon" src="http://localhost/images/test.png">';
}
});
Just a quick tip. FontAwesome is a great way to add beautiful icons easily to you application.