I have my list which is getting data from php service, the data received is in the order I need. But sencha automatically sort my list alphabetically.
Below is my code:
Ext.define('MyList', {
extend: 'Ext.dataview.List',
config: {
grouped: true,
plugins: [
{
xclass: 'Ext.plugin.PullRefresh',
pullRefreshText: 'Pull down to refresh'
},
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: true,
noMoreRecordsText: 'No More Records'
}
]
},
initialize: function () {
this.callParent(arguments);
var store = Ext.create('Ext.data.Store', {
pageParam: 'page',
grouper: {
groupFn: function (record) {
return record.data.group_label;
}
},
model: 'ListItem',
proxy: {
type: 'ajax',
url: '/m/services/activity_list_items.php',
reader: {
type: 'json',
rootProperty: 'root.results'
}
}
});
var template = Ext.create('GenericListItem', {
hascounts: true,
hasicon: true,
varmap: {
descr: 'subtext',
count: 'sub_item_cnt',
itemid: 'itemid',
uniqid: 'uniqid'
}
});
var emptyText = 'Recent Activity Items';
this.setStore(store);
this.setItemTpl(template);
this.setEmptyText(emptyText);
}
});
How can I avoid the auto sorting of list?
Add the following to your store config.
remoteSort : true,
remoteSort defaults to false in sencha. So sencha automatically sorts in the client side. Check the link for more details http://docs.sencha.com/touch/2-0/#!/api/Ext.data.Store-cfg-remoteSort
Just remove this:
grouped: true
from your list config if you don't want a header for each item and compulsory to remove this:
grouper: {
groupFn: function (record) {
return record.data.group_label;
}
}
from your store because basically in your situation grouper property are using for grouping your item alphabetically based on your group_label field. Hope it helps :)
Related
I want to show some details on to Sencha Touch 2.3.1 DataView.
Actual Data to be loaded will come later to the DataView object creation.
I am not using Store proxy, but I have my own existing HTTP Request API for getting the JSON data. So once I get the data, I am creating a DataModel and adding to Store.
When I debug the code, I see it is adding and Store is populated with Data.
Now I am getting the DataView object with Ext.getCmp("") and setting the Store.
When I see the DataView object, I see the store (_store) containing the data (_data) in it.
But still the DataView is not populated with the datails.
Please help me in this context
My DataModel:
Ext.define('AlbumsListDM', {
extend: 'Ext.data.Model',
config: {
fields: [
"user",
"title",
"subtitle",
"image"
]
}
});
My Store:
Ext.define('AlbumsListStore', {
extend: 'Ext.data.Store',
config: {
model: 'AlbumsListDM',
autoLoad: true
}
});
My DataView:
Ext.define(APP_NAME+'.view.AlbumsList', {
extend: 'Ext.DataView',
id: 'viewAlbumsListID',
requires: ['AlbumsListDM'],
config: {
width:'100%',
height:'100%',
layout: 'fit',
items: [{
xtype: 'dataview',
scrollable: true,
inline: true,
cls: 'dataview-inline',
itemTpl: new Ext.XTemplate('<div class="img" style="background-image: url({image});">{title}</div>')
}]
}
});
My Construction of store and updating DataView:
Ext.create('AlbumsListStore', { id: 'AlbumsListStoreID' });
var albumsList = myJsonData;
var albumsListStore = Ext.getStore('AlbumsListStoreID');
var count = albumsList.length;
for(var index = 0; index < count; index++) {
albumsListStore.add(Ext.create('AlbumsListDM', albumsList[index]));
}
var viewAlbumsList = Ext.getCmp("viewAlbumsListID");
viewAlbumsList.setStore(albumsListStore);
Thanks
Siva
I am building a small demo application using Sencha touch:
I have run into an issue with the list display followed by the itemtap even firing.I had this working in a previous application but cannot find out why its not firing in the current application
I have added itemtap methods as listeners, on the view, in the controller, but none of them fire. Any ideas on what I am missing?
Thanks In Advance for your help.
PS
Main.js
Ext.define('KapselApp.view.Main', {
extend: 'Ext.navigation.View',
xtype: 'mainview',
requires: [
'KapselApp.view.ExpApproval',
'KapselApp.view.ExpApproval.Details',
'KapselApp.view.ExpApproval.Confirm'
],
config: {
autoDestroy: false,
navigationBar: {
ui: 'sencha',
items: [
{
xtype: 'button',
id: 'editButton',
text: 'Edit',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
},
{
xtype: 'button',
id: 'saveButton',
text: 'Save',
ui: 'sencha',
align: 'right',
hidden: true,
hideAnimation: Ext.os.is.Android ? false : {
type: 'fadeOut',
duration: 200
},
showAnimation: Ext.os.is.Android ? false : {
type: 'fadeIn',
duration: 200
}
}
]
},
items: [
{ xtype: 'expApprovals' }
]
}
});
ExpApproval.view
Ext.define('KapselApp.view.ExpApproval', {
extend: 'Ext.dataview.List',
xtype: 'expApprovals',
config: {
title: 'Expense Approval',
cls: 'x-ExpApprovals',
items: [{
xtype: 'list',
//id: 'expApproval',
store: expApprovals,
itemTpl: ['<div class="headshot" style="background-image:url(ExpType.Images/blue_btn_left.png);"></div>',
'From:{UserName} {WorkItem}',
'<div>Subject:{SUBJECT}</div>'
],
listeners: {
itemtap: function(view, index, item, e){
alert ('itemtap 1');
}
}
}],
itemtap: function(me, index, target, record){
alert ('itemtap');
//do other logic here
}
},
initialize: function() {
console.log ('KapselApp.view.ExpApproval:initialize: ');
}
});
Controller
Ext.define('KapselApp.controller.ExpApprovalApplication', {
extend: 'Ext.app.Controller',
config: {
refs: {
main: 'mainview',
editButton: '#editButton',
expApprovalDetails: 'expapproval-details',
expApprovalList: 'expApprovals',
confirmExpApprovals: 'expapproval-confirm',
contacts: 'contacts',
showContact: 'contact-show',
editContact: 'contact-edit',
saveButton: '#saveButton'
},
control: {
main: {
push: 'onMainPush',
pop: 'onMainPop'
},
editButton: {
tap: 'onContactEdit'
},
expApprovalList: {
itemtap: 'onExpApprovalsSelect'
},
saveButton: {
tap: 'onContactSave'
},
editContact: {
change: 'onContactChange'
},
'expApproval list' : {itemtap: 'onExpApprovalsSelect'},
}
},
onExpApprovalsSelect: function(list, index, node, record) {
alert ('onExpApprovalsSelect');
}
}
Ok .. found the sollution to your problem. You made the same mistake as I did. you overrode the initialize method in the list view without calling in the initiallize method "this.callParent()". By adding this in my code events started firing. I am sure it will work in yours.
So your List initialize handler should look something like this:
initialize: function(){
console.log('eventsView being initialized.');
this.callParent();
},
You can still use the code bellow to check which events are being fired for debugging in similar situations.
---- Previous post ----
I am facing a similar issue. I am extending Ext.dataview.List and have a controller capture the itemtap event but the event does not seem to be firing.
I tried adding the following code to capture all the events being fired... The list seems to fire the show event and the scroll events but no other such as itemtap, etc ...
Ext.define('Override.mixin.Observable', {
override : 'Ext.mixin.Observable',
fireEvent : function(eventName, args) {
console.log('Event:', eventName, args);
this.callOverridden(arguments);
//debugger;
},
fireAction : function(eventName) {
console.log('Action:',eventName);
this.callOverridden(arguments);
}
});
Try adding this code and see if you are getting the itemtap events.
Let me know if you make any progress.
When Taping items the listener is getting invoked but the value is null. My Code:
Ext.define('tablet.SelectCategories', {
extend: 'Ext.navigation.View',
xtype: 'selectcategorypanel',
id: 'SelectCategories',
requires:[
],
initialize:function(){
this.callParent();
var jsonObject = Ext.create('Tablet')
.make_webservice_call_post('get_categories');
Ext.getCmp('select_category_list')
.setData(jsonObject.info);
console.log(jsonObject.info);
},
config: {
//title : 'Select Categories',
//iconCls: 'team',
//styleHtmlContent: true,
// scrollable: true,
layout: {
type: 'card'
},
items: [
{
fullscreen: true,
mode: 'MULTI',
xtype: 'list',
itemTpl: '{name}',
autoLoad: true,
id:'select_category_list',
store: {
fields: ['active','created','description','name']
},
listeners: {
itemtap: function (list, records) {
console.log('Sel');
console.log(records.name);
var names = [];
Ext.Array.each(records, function (item) {
names.push('<li>' + item.data.name + '</li>');
}); // each()
Ext.Msg.alert('You selected ' + records.length + ' item(s)',
'<ul>' + names.join('') + '</ul>');
} // selectionchange
}
// handler:self.itemClick
}
Getting undefined in console.log(records.name);
Your method signature for itemtap is also wrong. It should be -
itemtap: function(list, index, target, record) {
console.log('Item tapped');
console.log(record.get('name'));
// and your rest of the code.
}
Check the documentation for the itemtap event here, and read up more about stores here.
I am using sencha touch 2.
My App.js file (summed up)
Ext.application({
launch: function() {
// ...
var list = Ext.create('Ext.List', {
itemTpl : '<img src="{icon}"/>{title}<br/>{description}',
store: store,
listeners: {
select: function(view, record) {
var customView = Ext.create(record.get('view'));
navView.push(customView);
view.deselectAll();
}
}
});
//----------------------------------------------------------------------
var navView = Ext.create('Ext.NavigationView', {
navigationBar:{
items: [{
text:'refresh',
align: 'right'
}]
},
items: [list]
});
//----------------------------------------------------------------------
Ext.Viewport.add(navView);
}
});
When i am loading a view within my navigation view, everything is ok appart when it conains a list.
There is a view with a list in it.
The subpanel is rendered, but not the list view (the list view has been tested and is of course rendering in a different context)
Ext.define('ts.views.jobs', {
extend: 'Ext.Panel',
layout:'fit',
config:{
title:'Jobs'
},
initialize: function() {
this.callParent();
var jobsStore = Ext.create('Ext.data.Store', {
model: 'ts.model.job',
data: [{
key2: 'key1'
}, {
key2:'key2'
},
{
key2:'key3'
}
]
});
var jobsList = Ext.create('Ext.List', {
xtype: 'jobsList',
ui: 'round',
itemTpl : 'ok{key}',
store: jobsStore
});
var panel = Ext.create('Ext.Panel', {
html: 'Testing'
});
this.add([jobsList,panel]);
}
});
What am i doing wrong ?
* is it a navigationview bug ?
* am i not initializing properly in my subview ?
Thx for your help.
This was cross posted to the sencha touch forums: http://www.sencha.com/forum/showthread.php?184492-List-pushed-in-navigation-view-is-not-rendered and the answer accepted was:
layout config needs to be within the config object.
I try to get an editable list with this code:
var isEditing = false;
new Ext.Application({
launch: function(){
new Ext.Panel({
//layout: 'card',
fullscreen: true,
items: new Ext.List({
id: 'myList',
store: new Ext.data.Store({
fields: ['myName'],
data: [{ myName: 1 }, { myName: 2 }, { myName: 3}]
}),
itemSelector: '.x-list-item',
multiSelect: true,
itemTpl: '<span class="name">{myName}</span>',
tpl: new Ext.XTemplate(
'<tpl for=".">' +
'<div class="x-list-item">' +
'<tpl if="this.isEditing()">' +
'<img src="images/delete.gif" ' +
'onclick="Ext.getCmp(\'myList\').myDeleteItem({[xindex-1]})" ' +
'style="vertical-align: middle; margin-right: 15px;"/>' +
'</tpl>' +
'{myName}</div>' +
'</tpl>',
{
compiled: true,
isEditing: function () {
console.log('isEditing (tpl):' + isEditing)
return isEditing;
}
}),
myDeleteItem: function (index) {
var store = this.getStore();
var record = store.getAt(index);
console.log('removing ' + record.data.myName);
store.remove(record);
},
listeners: {
itemtap: function () {
if (isEditing){
console.log('isEditing: ' + isEditing);
return;
}
},
beforeselect: function () {
console.log('isEditing: before ' + !isEditing);
return !isEditing;
}
}
}),
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
layout: { pack: 'right' },
items: [
{
xtype: 'button',
text: 'Edit',
handler: function () {
var list = Ext.getCmp('myList');
if (!isEditing)
list.mySelectedRecords = list.getSelectedRecords();
isEditing = !isEditing;
this.setText(isEditing ? 'Save' : 'Edit');
list.refresh();
if (!isEditing)
list.getSelectionModel().select(list.mySelectedRecords);
}
}]
}]
});
}
});
but its not working like it should. If I press the EDIT button there is no delete-image and so there is no deleted item....
There are 3 things that I can see:
The Template is rendered once, you will need to call .refresh() or .refreshNode() on the list to update any item templates. The better way to accomplish this would be to hide the delete button via CSS and display it when the 'edit' button is clicked.
There is probably a naming conflict between the isEditing variable declared at the top and the isEditing function reference. It is very confusing to have these two things named the same, and can lead to problems with variable scoping.
The click event that you are looking for may be intercepted by the parent list item and Sencha Touch is turning it into a 'itemtap' event on the list item.
I was not able to delete until I added an id field without a datatype to my model. I don't know why as it should know which record to delete via the index.
Ext.regModel('Setting', {
fields: [
{name: 'id'}, // delete works after adding
{name: 'name', type: 'string'}
],
proxy: {
type: 'localstorage',
id: 'settings'
}
Kevin