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.
Related
I am new to Sencha Touch2, i have problem while destroying the floating panel. I show floating Panel with details on top of ListView on list item click. I want the floating panel to be destroyed on 'Cancel' Button clicked.can anyone please help me. Thanks.
FloatingPanel.js:
Ext.define('CustomList.view.FloatingPanel', {
extend: 'Ext.Panel',
alias: 'widget.FloatingPanel',
xtype:'datepanel',
config: {
id:'floatingPanel',
modal:true,
centered: true,
hideOnMaskTap:true,
width:'500px',
height:'650px',
items:[
{
styleHtmlCls:'homepage',
tpl:'<h4>{name1}</h4><h3>{name2}</h3><h3>{name3}</h3><h3>{name4}'
},
{
xtype:'toolbar',
docked:'bottom',
items:[{
text:'OK',
ui:'confirm',
action:'ShowTurnOverReport',
listeners : {
tap : function() {
console.log('Ok');
}
}
},
{
text:'Cancel',
ui:'confirm',
action:'Cancel',
listeners : {
tap : function() {
console.log('Cancel');
var panelToDestroy = Ext.getCmp('floatingPanel');
panelToDestroy.destroy();
}
}
}]
}
]
}
});
Here is my List,
ShowList.js:
Ext.define('CustomList.view.ShowList',{
extend:'Ext.List',
xtype:'showlist',
requires: [
'Ext.dataview.List',
'Ext.data.Store',
'CustomList.controller.Main'
],
config:{
items:[
{
xtype:'list',
id: 'listitems',
onItemDisclosure: true,
store:'StoreList',
scrollable:'true',
itemTpl: [
'{firstname}'
],
itemTpl: '<font color="#990000"><h2>{lastname}</h2></font>{firstname}'
}
]
}
});
Here is my controller
Main.js
Ext.define('CustomList.controller.Main', {
extend: 'Ext.app.Controller',
requires:['CustomList.view.FloatingPanel'],
config: {
refs: {
listView: 'listitems'
},
control: {
'main test2 list': {
activate: 'onActivate',
itemtap: 'onItemTap'
}
}
},
onActivate: function() {
console.log('Main container is active');
},
onItemTap: function(view, index, target, record, event) {
console.log('Item was tapped on the Data View');
var name1 = record.get('name1');
console.log('Item was tapped on the Data View'+name1);
var floatingDatePanel = Ext.create('CustomList.view.FloatingPanel');
var data = record.getData();
floatingDatePanel.getAt(0).setData(data);
Ext.Viewport.add(floatingDatePanel);
}
});
One obvious problem is that:
Ext.getCmp('floatingPanel');
will be applied for case id: 'floatingPanel' whereas you use itemid:'floatingPanel'
To retrieve itemId, you can make use of Ext.ComponentQuery:
Ext.ComponentQuery.query('#floatingPanel')[0];
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 :)
I have a problem with an list-component on the sencha touch 2 framework. My problem is, that my list doesn't show the calculated distance between the current position and the places.
First I use an navigation view with a list (name + distance) when the user click the name more details about them appears (+ the back-button will generated automatic). If the back-button is pressed the list shows the correct distance in the list. But I really need the distance is shown at the first time. I tried a lot but nothing helps.
I use a model and a store:
'Ext.define('Guide.store.ProjekteList', {
extend: 'Ext.data.Store',
config:{
model: "Guide.model.ProjekteList",
autoLoad:true,
sorters: ['distance'],
storeId: 'ProjekteList',
proxy: {
type: 'ajax',
url : 'PHP/get_MainList.php',
reader: {
type: 'json',
rootProperty:'items'
}
},
listeners: {
load : function(){
this.each(function(store){
var newData = getDis(store.data);
});//each
}//load func
}// listener
}//config
});// klasse
var getDis = function(dataset) {
var geo = Ext.create('Ext.util.Geolocation', {
autoUpdate: false,
listeners: {
locationupdate: function(geo) {
polat = geo.getLatitude();
polng = geo.getLongitude();
var B1 = dataset.Lat / 180 * Math.PI;
var B2 = polat / 180 * Math.PI;
var L1 = dataset.Lng / 180 * Math.PI;
var L2 = polng / 180 * Math.PI;
var zwi = Math.acos(Math.sin(B1)*Math.sin(B2) + Math.cos(B1)*Math.cos(B2)*Math.cos(L2-L1));
var r = 6378.137; //km
dataset.distance = r * zwi;
dataset.distance = Math.round(dataset.distance*100)/100;
},
locationerror: function(geo, bTimeout, bPermissionDenied, bLocationUnavailable, message) {
if(bTimeout){
alert('Timeout occurred.');
} else {
alert('Error occurred.');
}
}
}
});
geo.updateLocation();
return dataset;
};'
and my model:
'Ext.define('Guide.model.ProjekteList', {
extend: 'Ext.data.Model',
config: {
fields: ['Projektname', 'Lat', 'Lng', 'distance', 'ID'],
}
});
here is my navigation view:
'Ext.define('Guide.view.ProjekteList', {
extend: 'Ext.navigation.View',
xtype: 'projektelist',
config: {
title: 'Orte',
iconCls:'Projekte' ,
id: 'listButton',
items:[
{
xtype: 'list',
onItemDisclosure: true,
/* plugins: [
{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false,
}
], */
title: 'Sehenswerte Orte',
store: 'ProjekteList',
itemId: 'liste',
itemTpl: '<h2>{Projektname}</h2> Entfernung: {distance} km',
listeners: {
show: function(){
this.refresh();
} //show function
}, //listeners
} // item
] //items
}// config
}); '
and my controller
Ext.define("Guide.controller.ProjekteList", {
extend: "Ext.app.Controller",
views: ['ProjektList'],
config: {
refs: {
projekt: 'projektelist',
},
control: {
'projektelist list': {
itemtap: 'showDetail'
}
}
},
showDetail: function(list, index, element, record) {
var projektid = record.get('ID');
Ext.StoreMgr.get('ProjektDetail').setProxy({url:'PHP/get_Detail.php?
ID='+projektid}).load();
this.getProjekt().push({
xtype: 'projektdetails',
});
} // showDetail function
});
Thanks in advance!
I found the solution:
only change the listener in the navigation view from "show" to "painted" and it works fine.
I would dynamically change the title of my list titlebar. This is my app.js where you can view my app (see var list where there is the toolbar item and title that I would change)
How can I do this?
Thanks.
var mainForm ;
var mainFormPanel={};
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var list= Ext.create('Ext.List', {
fullscreen: true,
store: 'MyStore',
itemTpl: '{txt}',
items: [{
xtype: 'titlebar',
docked: 'top',
title:'change dinamically this title!!!!'
}] // items (list)
}); // create()
Ext.application({
glossOnIcon: false,
autoMaximize: false,
icon: {
57: 'lib/sencha-touch/resources/icons/icon.png',
72: 'lib/sencha-touch/resources/icons/icon#72.png',
114: 'lib/sencha-touch/resources/icons/icon#2x.png',
144: 'lib/sencha-touch/resources/icons/icon#114.png'
},
phoneStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen.jpg',
tabletStartupScreen: 'lib/sencha-touch/resources/loading/Homescreen~ipad.jpg',
requires: [
'Ext.tab.Panel',
'Ext.form.*',
'Ext.field.*',
'Ext.Button',
'Ext.data.Store'
],
launch: function() {
mainForm = Ext.create('Ext.form.Panel', {
xtype:'formpanel',
items: [
{
xtype: 'textfield',
name : 'distance',
label: 'Distance'
},
{
xtype: 'textfield',
name : 'quantity',
label: 'Quantity'
}
]
});
mainFormPanel={
xtype: 'toolbar',
docked: 'bottom',
layout: {
pack: 'center'
},
items: [
{
xtype: 'button',
text: 'Set Data',
handler: function() {
mainForm.setValues({
distance: '300',
quantity: '25'
})
}
},
{
xtype: 'button',
text: 'Get Data',
handler: function() {
Ext.Msg.alert('Form Values', JSON.stringify(mainForm.getValues(), null, 2));
}
},
{
xtype: 'button',
text: 'Clear Data',
handler: function() {
mainForm.reset();
}
}
]
};
Ext.Viewport.add({
xtype: 'tabpanel',
items: [
{
//each item in a tabpanel requires the title configuration. this is displayed
//on the tab for this item
title: '1-tab',
layout:'fit',
//next we give it some simple html
items: [mainForm,mainFormPanel],
//then a custom cls so we can style it
cls: 'card1'
},
{
//title
title: '2-tab',
layout:'fit',
items: [list],
cls: 'card2'
},
{
//title
title: '3-tabs',
//the items html
items: {
html: 'mia auto',
centered: true
},
//custom cls
cls: 'card3'
}
]
});
}
});
Ext.List component's superclass is Ext.DataView., not Ext.Panel.
Hence, it is not possible to directly add / dock any item inside the Ext.List component.
So, I recommend you to wrap your Ext.List component inside Ext.Panel.
Do it like this,
var myStore = Ext.create('Ext.data.Store', {
storeId: 'MyStore',
fields: ['txt']
}); // create()
var listpanel = new Ext.Panel({
layout: 'fit', // important to make layout as 'fit'
items: [
{
xtype: 'titlebar',
id: 'myTitle',
docked: 'top',
title: 'Before Change title',
items: [
{
xtype:'button',
text:'Change Title',
align:'right',
listeners : {
tap : function() {
Ext.getCmp('myTitle').setTitle('After Title Change');
}
}
}
]
},
{
//Definition of the list
xtype: 'list',
itemTpl: '{txt}',
store: myStore,
}]
});
....
....
{
title: '2-tab',
layout:'fit',
items: [listpanel],
cls: 'card2'
},
....
....
Sample Output :-
Before changing the title
After changing the title
FYI, If you look inside the Ext.List class in Sencha Docs, you will see the following code inside initComponent() method,
if (Ext.isDefined(this.dockedItems)) {
console.warn("List: List is not a Panel anymore so you can't dock items to it. Please put this list inside a Panel with layout 'fit'");
}
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