We Keep Coding

XTemplate definition on items property of a ListItem

I'm using Sencha 2.3.0 and I want to have a XTemplate side-to-side to a component (textfield) on a ListItem. The code above works fine for DataView/DataItem, but I want to use the grouped property that is only available on List/ListItem.
The nested Xtemplate gets rendered fine as DataItem. How can I make it work for ListItem? I'm also receptive for solutions that drop this nested structure and use the xtemplate as tpl property directly on the ListItem (of course the textfield with listeners must be implemented as well).
list
Ext.define( 'app.view.myList', {
//extend: 'Ext.dataview.DataView',
extend: 'Ext.dataview.List',
xtype: 'mylist',
requires: [
'app.view.MyItem'
],
config: {
title: "myTitle",
cls: 'mylist',
defaultType: 'myitem',
grouped: true,
store: 'myStore',
useComponents: true,
itemCls: 'myitem',
items: [
{
// some components
}
]
}
});
listitem
Ext.define( 'app.view.myItem', {
//extend: 'Ext.dataview.component.DataItem',
extend: 'Ext.dataview.component.ListItem',
xtype: 'myitem',
config: {
cls: 'myitem',
items: [
{
xtype: 'component',
tpl: new Ext.XTemplate([
'<table cellpadding="0" cellspacing="0" class="myitemXTemplate">',
//some xtemplate content
'</table>'
].join( "" ),
{
compiled: true
})
},
{
label: 'some label',
cls : 'myitemtextfield',
xtype: 'textfield',
name: 'myitemtextfield'
}
]
}
});
Thanks in advance!

Modifed /touch-2.4.2/examples/list/index.html
The model:
Ext.define('model1', {
extend: 'Ext.data.Model',
config: {
fields: [
{name: 'firstName', type: 'string'},
{name: 'lastName', type: 'string'}
]
}
});
The CustomListItem
Ext.define('DataItem', {
extend: 'Ext.dataview.component.ListItem',
xtype: 'basic-dataitem',
requires: [
'Ext.Button',
'Ext.Component',
'Ext.layout.HBox',
'Ext.field.Checkbox'
],
config: {
dataMap : {
/* getFirstname : {
setData : 'firstName'
},*/
getLastname : {
setValue : 'lastName'
}
},
layout: {
type: 'hbox',
height:'200px',
},
firstname: {
cls: 'firstname',
xtype:'component',
data:{data:'hej'},
tpl: new Ext.XTemplate([
'<H1>',
'{data}',
'</H1>'
].join(""),
{
compiled: true
})
},
lastname: {
xtype:'textfield',
css:'lastname'
}
},
applyFirstname : function (config) {
return Ext.factory(config, Ext.Component, this.getFirstname());
},
updateFirstname : function (newName) {
if (newName) {
this.add(newName);
}
},
applyLastname : function (config) {
return Ext.factory(config, Ext.Component, this.getLastname());
},
updateLastname : function (newAge) {
if (newAge) {
this.add(newAge);
}
},
applyFirstName: function (config) {
return Ext.factory(config, 'Ext.Component', this.getLastname());
},
updateRecord: function(record) {
if (!record) {
return;
}
this.getFirstname().setData({data:record.get("firstName")});
this.callParent(arguments);
}
});
The store
var store = Ext.create('Ext.data.Store', {
//give the store some fields
model: 'model1',
//filter the data using the firstName field
sorters: 'firstName',
//autoload the data from the server
autoLoad: true,
//setup the grouping functionality to group by the first letter of the firstName field
grouper: {
groupFn: function (record) {
return record.get('firstName')[0];
}
},
//setup the proxy for the store to use an ajax proxy and give it a url to load
//the local contacts.json file
proxy: {
type: 'ajax',
url: 'contacts.json'
}
});
The list
xtype: 'list',
useSimpleItems: false,
defaultType: 'basic-dataitem',
id: 'list',
ui: 'round',
//bind the store to this list
store: store

how sencha dynamic add tab in tabpanel,and add list to the tabpanel

i want to build a framework that dynamic. first, add "loanname" to be my title in tab to add to a tabpanel. second, dynamic add my product which the loanname measure the tab title's loanname.
the loanname in json be the title which i want to be the title on everytab:
{
"listjson" : [
{"loanname" : "xixi22" , "loandesc" : "use to architecture"},
{"loanname" : "xixi2" , "loandesc" : "use to education"},
{"loanname" : "xixi3" , "loandesc" : "use to plane and others"}
]
}
and the product which i want put it in list(a list contain the same loanname product), then put the list into the match tab:
{
"products" :[
{"loanname": "xixi22", "loannum": "A-0000001", "interests": "6.5", "timeline": "1 year"},
{"loanname": "xixi22", "loannum": "A-0000002", "interests": "7", "timeline": "2 year"},
{"loanname": "xixi2", "loannum": "B-0000001", "interests": "9", "timeline": "3 year"},
{"loanname": "xixi3", "loannum": "C-0000001", "interests": "11.5", "timeline": "4 year"}
]
}
the result view i want is similiar like under:
but i have encounter a problem the list contain the other product which not match the loanname in title and display for null
-------------edit part---------
my part code in view:
{
xtype: 'tabpanel',
itemId: 'tabfirst',
flex: 1,
//activeItem: 1,
tabBar: {
layout: {
pack: 'center'
}
},
defaultType: 'tablist'
}
the list view:
Ext.define('ylp2p.view.tablist',{
extend: 'Ext.dataview.List',
xtype: 'tablist',
config: {
title: '',
store: 'productstore',
itemTpl: '{loanname}'
}
});
my code in controller:
Ext.define('ylp2p.controller.addtab',{
extend: 'Ext.app.Controller',
config: {
refs: {
myTabPanel: '.makemoney #tabfirst',
},
controller: {
myTabPanel: {
activate: 'OnActivateTabPanel',
activateitemchange: 'OnActivateItemChangeTabPanel'
}
}
},
launch: function(){
var products = Ext.getStore('productstore');
products.filterBy(function(record, id){
return record.get('loanname') === 'xixi22';
});
},
OnActiveTabPanel: function(newActiveItem, viewport, oldActiveItem, eOpts){
var tabs = Ext.getStore('loanliststore');
tabs.each(function(record){
newActiveItem.add({
title: record.get('loanname')
});
});
},
OnActiveItemChangeTabPanel: function(cmp, value, oldValue, eOpts){
var products = value.getStore();
products.clearFilter(true);
products.filterBy(function(record, id) {
return record.get('loanname') === value.getTitle();
});
}
});
my store:1.tab store loanlist.js,2.product store prostore.js
Ext.define('ylp2p.store.loanlist',{
extend: 'Ext.data.Store',
config:{
model: 'ylp2p.model.list',
storeId: 'loanliststore',
autoload: true,
proxy: {
type: 'ajax',
url: 'resources/json/loanlist.json',
reader:{
type: 'json',
rootProperty: 'listjson'
}
}
}
});
and
Ext.define('ylp2p.store.prostore',{
extend: 'Ext.data.Store',
config: {
model: 'ylp2p.model.loanproduct',
storeId: 'productstore',
autoload: true,
proxy: {
type: 'ajax',
url: 'resources/json/product.json',
reader: {
type: 'json',
rootProperty: 'products'
}
}
}
});
app.js:
Ext.application({
name: 'ylp2p',
requires: [
'Ext.MessageBox'
],
views: [
'ylp2p.view.Main',
'ylp2p.view.makemoney',
'ylp2p.view.tablist'
],
stores: [
'ylp2p.store.datainterests',
'ylp2p.store.loanlist',
'ylp2p.store.picstore',
'ylp2p.store.prostore'
],
models: [
'ylp2p.model.data',
'ylp2p.model.list',
'ylp2p.model.picmodel',
'ylp2p.model.loanproduct'
],
controllers: [
'ylp2p.controller.viewdata',
'ylp2p.controller.viewlist',
'ylp2p.controller.loadpic',
'ylp2p.controller.addtab'
],
icon: {
'57': 'resources/icons/Icon.png',
'72': 'resources/icons/Icon~ipad.png',
'114': 'resources/icons/Icon#2x.png',
'144': 'resources/icons/Icon~ipad#2x.png'
},
isIconPrecomposed: true,
startupImage: {
'320x460': 'resources/startup/320x460.jpg',
'640x920': 'resources/startup/640x920.png',
'768x1004': 'resources/startup/768x1004.png',
'748x1024': 'resources/startup/748x1024.png',
'1536x2008': 'resources/startup/1536x2008.png',
'1496x2048': 'resources/startup/1496x2048.png'
},
launch: function() {
// Destroy the #appLoadingIndicator element
Ext.fly('appLoadingIndicator').destroy();
// Initialize the main view
Ext.Viewport.add(Ext.create('ylp2p.view.Main'));
Ext.getStore('interestsdata').load();
Ext.getStore('loanliststore').load();
Ext.getStore('imagestore').load();
Ext.getStore('productstore').load();
console.log('start Big weapon!!here is app.js launch function');
onUpdated: function() {
Ext.Msg.confirm(
"Application Update",
"This application has just successfully been updated to the latest version. Reload now?",
function(buttonId) {
if (buttonId === 'yes') {
window.location.reload();
}
}
);
}
});

In the activeitemchange listener you can filter the store based on the title of the tab (activeitem). I quickly created a fiddle for you to show you how I would do it:
https://fiddle.sencha.com/#fiddle/u50
var tabs = Ext.create('Ext.data.Store', {
fields: ['loanname', 'loandesc'],
data: [
{"loanname" : "xixi22" , "loandesc" : "use to architecture"},
{"loanname" : "xixi2" , "loandesc" : "use to education"},
{"loanname" : "xixi3" , "loandesc" : "use to plane and others"}
]
})
var products = Ext.create('Ext.data.Store', {
fields: ['loanname','loannum','interests','timeline'],
data: [
{"loanname": "xixi22", "loannum": "A-0000001", "interests": "6.5", "timeline": "1 year"},
{"loanname": "xixi22", "loannum": "A-0000002", "interests": "7", "timeline": "2 year"},
{"loanname": "xixi2", "loannum": "B-0000001", "interests": "9", "timeline": "3 year"},
{"loanname": "xixi3", "loannum": "C-0000001", "interests": "11.5", "timeline": "4 year"}
]
});
Ext.define('Fiddle.view.MyList', {
extend: 'Ext.dataview.List',
xtype: 'mylist',
config: {
title: '', // We have to config a title to let the framework generate getters and setters
store: products,
itemTpl: '{loannum}'
}
});
Ext.application({
name : 'Fiddle',
launch : function() {
var tabPanel = Ext.create('Ext.TabPanel', {
fullscreen: true,
defaultType: 'mylist',
items: [],
listeners: {
activate: function( newActiveItem, viewport, oldActiveItem, eOpts) {
products.filterBy(function(record, id) {
return record.get('loanname') === 'xixi22';
});
},
activeitemchange: function( cmp, value, oldValue, eOpts ) {
products.clearFilter(true);
products.filterBy(function(record, id) {
return record.get('loanname') === value.getTitle();
});
}
}
});
tabs.each(function(record){
tabPanel.add({
title: record.get('loanname'),
iconCls: 'home',
});
});
}
});

Use this code. It will work.
var items = [];
var store = Ext.getStore('YourStore'); // write your store here
var loanname = record.get('loanname');
store.each(function (r) {
if (r.get('loanname') == loanname) {
items.push(r.data);
}
});
var myPanel = Ext.create('Ext.List', {
title: 'loanname',
data: items,
itemTpl: '{loannum}'
});
moneytab.add(myPanel);

commit changes on existing records in extjs store

my issue is that I want to update existing store and show the changes on the grid.
What I'm doing to update is :
var record = store.getById(me.internalParameters.editInfo.id);
//console.log(me.InfoEditorPanel.hardwareIdField.value);
record.set('hardwareid', me.InfoEditorPanel.hardwareIdField.value);
record.set('location', me.InfoEditorPanel.locationField.value);
record.set('isActive', me.InfoEditorPanel.isActiveField.value);
record.commit();
store.load();
Here what I use to build the grid.
Utils.getPanelListGrid = function (parameters) {
if (parameters.initParameters == null)
parameters.initParameters = {};
var initParameters = parameters.initParameters;
initParameters.gridColumns = [
{ header: "ID", dataIndex: "id", flex: 1 },
{ header: "Hardware ID", dataIndex: "hardwareid", flex: 1 },
{ header: "Location", dataIndex: "location", flex: 1 },
{ header: "Active", dataIndex: "isActive", flex: 1 }
];
return new Backend.shared.MyDataGrid(parameters);
};
Ext.define(
"shared.MyDataGrid", {
extend: "Ext.grid.Panel",
xtype: "MyDataGrid",
title: "MyDataGrid - Hardcoded values",
initParameters: {
storeIdProperty: null,
},
initComponent: function () {
this.store = Ext.create('Ext.data.Store', {
storeId: 'myStore',
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
},
fields: ['id', 'hardwareid', 'location', 'isActive'],
data: {
'items': [{
'id': '123456',
'hardwareid': "HID-159",
'location': "Bedroom",
'isActive': "No"
}, {
'id': '789456',
'hardwareid': "HID-357",
'location': "Kitchen",
'isActive': "Yes"
}, {
'id': '147852',
'hardwareid': "HID-149",
'location': "Guest-room",
'isActive': "Yes"
}
]
}
});
this.columns = this.initParameters.gridColumns;
this.listeners = {
selectionchange: {
scope: this,
fn: function (selectionModel, selectedRecords, eventOptions) {
this.selectedIds = [];
this.selectedItems = [];
if (selectedRecords != null) {
for (var i = 0; i < selectedRecords.length; i++) {
var item = selectedRecords[i].data;
this.selectedIds.push(item[this.initParameters.storeIdProperty]);
this.selectedItems.push(item)
}
}
if (this.initParameters.selectionChangeCallback != null)
this.initParameters.selectionChangeCallback(this.selectedIds, this.selectedItems);
}
}
};
shared.MyDataGrid.superclass.initComponent.call(this);
},
getRecordCount: function () {
return this.getStore().getTotalCount();
},
getSelectedIds: function () {
return this.selectedIds;
},
getSelectedItems: function () {
return this.selectedItems;
}
});
Can anyone please explain what should I do exactly to make the grid show the updated row?

I suggest that use the following code in your 'selectionchange' event.
this.getStore().load({
params:{
'yourModelIdProperty':'selectedId'
}
});
It's call an store proxy. You should write a function for that proxy and load the updated data.

show a nested Json on EXT.dataview.List

I was not able to show <div>{lat}, {lon}, {ele}</div> on a sencha touch usingEXT.dataview.List ItemTpl with data from a Json File:
Json:
{
"data": {
"trackData":
[
{
"lon": 9.979255199432373,
"lat": 53.56595538391044,
"ele": 19
},
{
"lon": 9.973998069763184,
"lat": 53.56923037464335,
"ele": 15
}
]
}
}
Model:
Ext.define('Fahrradtour.model.Location', { extend: 'Ext.data.Model',
config: {
fields: [
{
name: 'lat',
type: 'float'
},
{
name: 'lon',
type: 'float'
},
{
name: 'ele',
type: 'float'
}
]
}
});
Store:
Ext.define('Fahrradtour.store.LocationStore', { extend: 'Ext.data.Store',
requires: [
'Fahrradtour.model.Location'
],
config: {
autoLoad: true,
model: 'Fahrradtour.model.Location',
storeId: 'LocationStore',
proxy: {
type: 'ajax',
url: './data/json-track.json',
reader: {
type: 'json',
rootProperty: 'data',
record: 'trackData'
}
}
}
});
the Store loads his data in Architect well, but the List shows nothing.
anybody has an Idea what is wrong?
thanks.

exjts hide column if all cells of the column are empty

I am trying to hide the column if all the cells in the column are empty. I am trying to do this in the column listener by iterating through the store but I guess the store isnt populated at that time. any suggestions to achieve this functionality?
Ext.define('com.abc.MyGrid' , {
extend: 'Ext.grid.Panel',
store : 'MyStore',
columns : [{
text : 'col1',
sortable : true,
dataIndex : 'col1'
}, {
text : 'col2 ',
sortable : true,
dataIndex : 'col2',
listeners:{
"beforerender": function(){
console.log(this.up('grid').store);
this.up('grid').store.each(function(record,idx){
// if all are null for record.get('col1')
// hide the column
console.log(record.get('col1'));
});
}
}
}
})
But this is isnt working. Basically the store loop in the column listener "before render" is not executing where as the above console(this.up('grid').store) prints the store with values.

Here you go, it doesn't handle everything but should be sufficient.
Ext.define('HideColumnIfEmpty', {
extend: 'Ext.AbstractPlugin',
alias: 'plugin.hideColumnIfEmpty',
mixins: {
bindable: 'Ext.util.Bindable'
},
init: function(grid) {
this.grid = grid;
this._initStates();
this.grid.on('reconfigure', this._initStates, this);
},
_initStates: function(store, columns) {
var store = this.grid.getStore(),
columns = this.grid.columns;
this.bindStore(store);
this.columns = columns;
if(store.getCount() > 0) {
this._maybeHideColumns();
}
},
/**
*#implement
*/
getStoreListeners: function() {
return {
load: this._maybeHideColumns
};
},
_maybeHideColumns: function() {
var columns = this.columns,
store = this.store,
columnKeysMc = new Ext.util.MixedCollection();
Ext.Array.forEach(columns, function(column) {
columnKeysMc.add(column.dataIndex, column);
});
Ext.Array.some(store.getRange(),function(record){
//don't saw off the branch you are sitting on
//eachKey does not clone
var keysToRemove = [];
columnKeysMc.eachKey(function(key) {
if(!Ext.isEmpty(record.get(key))) {
keysToRemove.push(key);
}
});
Ext.Array.forEach(keysToRemove, function(k) {
columnKeysMc.removeAtKey(k);
});
return columnKeysMc.getCount() === 0;
});
columnKeysMc.each(function(column) {
column.hide();
});
}
});
Here is an example:
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' },
{ text: 'Says Doh', dataIndex: 'saysDoh'}
],
plugins: {ptype: 'hideColumnIfEmpty'},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
You can see in the example that saysDoh column is hidden.

If you want to iterate over the store, you need to put a listener on the load event of your store. The beforerender doesn't mean that your store is already loaded.
I would put the creation of you store in the initComponent. Something like this:
Ext.define('com.abc.MyGrid', {
extend: 'Ext.grid.Panel',
columns: [{
text: 'col1',
sortable: true,
dataIndex: 'col1'
}, {
text: 'col2 ',
sortable: true,
dataIndex: 'col2'
},
initComponent: function () {
var me = this;
//Create store
var myStore = Ext.create('MyStore');
myStore.load(); // You can remove this if autoLoad: true on your store.
//Listen to load event (fires when loading has completed)
myStore.on({
load: function (store, records, success) {
store.each(function (record, idx) {
console.log(record.get('col1'));
});
}
});
//Apply the store to your grid
Ext.apply(me, {
store: myStore
});
me.callParent();
}
});