Develop Reference

ExtJS Checkcolumn not rendering checked values

I have a tab, named "Schema", that renders a grid. One of the grid columns is checkcolumn type. What values should I pass to the store when I render my grid, so I have some of the checkboxes checked and others not checked? It must be something really trivial, but I couldn't find a solution so far.
Here is a simplified structure of the grid and the checkcolumn:
{
title: 'Schema',
listeners: {
activate: function(tab) {
myNmsps.renderSchema();
}
},
id: 'schemaTab',
items: [{
xtype: 'grid',
id: 'schema',
border: false,
data: [],
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
isEditable: true,
}
},{
text: 'Position',
dataIndex: 'position',
editor: {
xtype: 'combobox',
id: 'position',
}
}, {
text: 'Type',
dataIndex: 'type',
id: "TypeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectType',
}
}, {
text: 'Size',
dataIndex: 'size',
id: "SizeDropdown",
editor: {
xtype: 'combobox',
id: 'SelectSize',
}
}, {
text: 'FilteringType',
dataIndex: 'filteringType',
editor: {
xtype: 'combobox',
id: 'filteringType',
}
}, {
xtype:'checkcolumn',
fieldLabel: 'checkboxIsUnique',
name: 'checkboxIsUnique',
text: 'Is Unique',
id: 'checkboxIsUniqueID',
dataIndex : 'checkboxIsUniqueIDX',
listeners:{
checkchange: function(column, rowIdx, checked, eOpts){
var schemaStore = Ext.getCmp('schema').getStore();
schemaStore.each(function(record,idx){
if(rowIdx == idx && checked===true){
record.set('checkboxIsUnique',true);
record.raw[6] = true;
} else if(rowIdx == idx && checked===false){
record.set('checkboxIsUnique',false);
record.raw[6] = false;
}
record.commit();
});
}
}
},
{
text: 'Delete',
dataIndex: 'deleteColumn',
id: "deleteColumn"
}
],
listeners: {
},
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})
]
}
In the checkchange listener
And this is simplified function that generates the store and renders the grid:
renderSchema: function() {
var grid = Ext.getCmp("schema");
for (var i = 0; i < myGridData; i++) {
storeArr[i][0] = myGridData[i].name;
storeArr[i][1] = myGridData[i].type;
storeArr[i][2] = myGridData[i].size;
storeArr[i][3] = i;
storeArr[i][4] = "<button class='schemaDeleteButton x-btn'> </button>";
storeArr[i][5] = myGridData[i].filteringType;
storeArr[i][6] = myGridData[i].isUnique; // true/false;
}
var dataStore = Ext.create('Ext.data.ArrayStore', {
extend: 'Ext.data.Model',
fields: [
{name: 'name'},
{name: 'type'},
{name: 'size'},
{name: 'position'},
{name: 'deleteColumn'},
{name: 'filteringType'},
{name: 'checkboxIsUnique'}
],
data: storeArr
});
grid.suspendEvents();
grid.reconfigure(dataStore);
grid.resumeEvents();
}
So I'm passing true or false for the field checkboxIsUnique, but it doesn't affect my interface that looks like this:

The field in my dataStore in the renderSchema function should've been named 'checkboxIsUniqueIDX' - same as the dataIndex in checkcolumn component.

How to add a Release filter on the PortfolioItem/Feature object

Using AppSDK 2.0, how can I see the "Release" field in the PortfolioItem/Feature when I create a store?

Release needs to be among the fetched fields in WsapiDataStore:
fetch: ['FormattedID','Name','UserStories','Release']
But then in a Rally.data.custom.Store, to account for Features that are not assigned to a release, this condition is used:
Release: (release && release.Name) || 'None'
Here is the code:
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'PortfolioItem/Feature',
fetch: ['FormattedID','Name','UserStories','Release'],
pageSize: 100,
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_createGrid: function(features) {
this.add({
xtype: 'rallygrid',
store: Ext.create('Rally.data.custom.Store', {
data: features,
pageSize: 100
}),
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name'
},
{
text: 'Release', dataIndex: 'Release'
},
{
text: 'Story Count', dataIndex: 'StoryCount'
},
{
text: 'User Stories', dataIndex: 'UserStories',
renderer: function(value) {
var html = [];
Ext.Array.each(value, function(userstory){
html.push('' + userstory.FormattedID + '')
});
return html.join(', ');
}
}
]
});
},
_onDataLoaded: function(store, data){
var features = [];
var pendingstories = data.length;
//debugger;
Ext.Array.each(data, function(feature) {
var release = feature.get('Release');
var f = {
FormattedID: feature.get('FormattedID'),
Name: feature.get('Name'),
Release: (release && release.Name) || 'None',
_ref: feature.get("_ref"),
StoryCount: feature.get('UserStories').Count,
UserStories: []
};
var stories = feature.getCollection('UserStories');
stories.load({
fetch: ['FormattedID'],
callback: function(records, operation, success){
Ext.Array.each(records, function(story){
var number = story.get('DirectChildrenCount');
if (number == 0) {
f.UserStories.push({_ref: story.get('_ref'),
FormattedID: story.get('FormattedID')
});}
}, this);
--pendingstories;
if (pendingstories === 0) {
this._createGrid(features);
}
},
scope: this
});
features.push(f);
}, this);
}
});

How to select extjs grid action column using the query component from the MVC controller file?

starting with the MVC demo project guide I added an extra actioncolumn and I was wondering how to wire it in the controller file ?
guide: http://www.sencha.com/learn/the-mvc-application-architecture/
Ext.define('app.view.admin.viewlist', {
extend: 'Ext.grid.Panel',
columnLines: true,
region: 'center',
menuDisabled: true,
layout: 'fit',
initComponent: function (cnfg) {
this.columns = [
{
text: 'date',
dataIndex: 'Series',
sortableColumns: false,
hideable: false,
enableLocking: false,
width: 100
},{
hidden : true,
text:'Values',
sortableColumns : false,
hideable: false,
columns:[{
header: 'D1',
hidden: true,
dataIndex: 'D10EOD',
sortableColumns : false,
hideable: false
},{
xtype: 'actioncolumn',
icon: '/static/img/icon/table_refresh.png',
tooltip: 'Reset',
align: 'center'
}]
}
];
this.callParent(arguments);
}});
Controller init function
init: function() {
this.control({
'volatilityedit actioncolumn img' : { <--- ??
click: this.reset
}
});
},
reset: function(grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
alert("Go");
},
Thanks

Depend on what your actions should do you can decide if you need controler or not.
You should use controller when your action interacts with other components - otherwise you can write own methods inside component (grid)
Here you have simple example of grid with actioncolumn:
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'app/resources/images/cog_edit.png',
// Use a URL in the icon config
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}, {
icon: 'app/resources/images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
});

This is an example with an action column and a function in a controller:
View:
{
xtype: 'actioncolumn',
id:'actionColumnGridCas',
flex: 1,
hideable: false,
items: ['->',{
icon: '/images/user_edit.png',
tooltip: 'edit',
iconCls:'act-edit'
},
{
icon: '/images/user_delete.png',
tooltip: 'delete',
iconCls:'act-delete'
}]
}
Controller:
'.grid_alias actioncolumn[id=actionColumnGrid]': {
click: me.onActionColumnGridCasSelect
}
onActionColumnGridCasSelect: function(view, cell, rowIndex, colIndex, e) {
var m = e.getTarget().className.match(/\bact-(\w+)\b/);
if (m === null || m === undefined) {
return;
}
var action = m[1];
switch (action) {
case 'edit':
alert('edit');
break;
case 'delete':
alert('delete');
break;
}
}

Sencha Touch 2: How to show a List in a Navigation View?

I am trying to create a list on the fly and then show it dynamically in a navigation view but when I try and Do this, I get no errors and the list doesnt show. I was wondering how one can show a list from within a navigation view.
Ext.define('MyApp.view.Navigation', {
extend: 'Ext.navigation.View',
id: 'NavView',
xtype: 'navigationcard',
config: {
title: 'Schedule',
iconCls: 'settings',
//we only give it one item by default, which will be the only item in the 'stack' when it loads
items: [
{
xtype: 'mainview'
}
]
}
});
Ext.define('MyApp.view.Main', {
extend: 'Ext.TabPanel',
xtype: ['mainview','widget.mainview'],
config: {
title:'MyApp',
fullscreen: true,
tabBarPosition: 'bottom',
defaults: {
styleHtmlContent: true
},
items: [
{ xtype: 'schedulecard' },
{ xtype: 'settingscard' }
]
}
});
var scheduleStore = Ext.create('Ext.data.Store', {
storeId: 'schedulestore',
fields: ['scheduleId', 'templateName', 'startDate', 'times'],
sorters: 'day',
grouper: {
groupFn: function (record) {
var startDate = $.datepicker.formatDate('DD, MM dd', new Date(record.get('startDate')));
return startDate;
},
sortProperty: 'startDate',
}
}); // create()
Ext.define('MyApp.view.Schedule', {
extend: 'Ext.List',
xtype: 'schedulecard',
grouped: true,
config: {
title: 'Schedule',
iconCls: 'time',
store: 'schedulestore',
grouped: true,
itemTpl: '<span style="font-weight:bold;">{templateName}</span><br/>{times}',
listeners: {
itemtap: function (list, index, item, e) {
var self = Ext.getCmp('NavView');
var listRecord = list.getStore().getAt(index);
var scheduleId = listRecord.get('scheduleId');
var scheduleItem = GetScheduleItemById(scheduleId);
var button = Ext.create('Ext.Button', {
iconCls: 'compose',
text:'Forms',
iconMask: true,
handler: function () {
var self = Ext.getCmp('NavView');
var cListStore = Ext.create('MyApp.view.ScheduleFormsList');
var panelForms = Ext.create('Ext.Panel', {
id: 'panelForms',
items: [{ xtype: 'schedulecard' }]
});
var newView = {
title: scheduleItem.AppointmentType.Name,
id: 'ScheduleItemDetailForms',
items: [cListStore]
};
self.push(newView);
}
});
var panelScheduleDetails = Ext.create('Ext.Panel', {
id: 'panel',
html: '<div style="margin:10px;"><span style="font-weight:bold;">' + timesTxt + '</span></div><hr/><div style="float:left;margin:10px;clear:both;">' + locationtxt + '</div><div style="float:left;margin:10px;">' + googleMap + '</div>'
});
var scheduleDetailsContainer = Ext.create('Ext.Container', {
fullscreen: true,
layout: 'vbox',
items: [
{
xtype: 'panel',
flex: 1,
items: [button]
},
{
xtype: 'panel',
flex: 2,
items: [panelScheduleDetails]
}
]
});
var newView = {
title: scheduleItem.AppointmentType.Name,
id: 'ScheduleItemDetailTabs',
items: [scheduleDetailsContainer]
};
self.push(newView);
}
}
}
});

Try adding the xtype of list in the main
Main.js
Ext.define('MyApp.view.Main',{
extend:'Ext.TabPanel',
xtype:'mainView',
id:'idMain',
config:{
tabBar:{
docked:'bottom',
hidden:true
},
items:[
{ xtype: 'schedulecard' }
]
}
});
Schedule.js
Ext.define("MyApp.view.Schedule", {
extend: "Ext.Container",
xtype: 'schedulecard',
config: {
title: 'Schedule',
iconCls: 'time',
layout:'fit',
items: [
{
xtype: 'navigationview',
id:'idScheduleListNavView',
items: [
{
xtype:'list',
onItemDisclosure:true,
loadingText: "Searching ...",
emptyText: "<div class=\"empty-text\">No Places Found.</div>",
id:'idSearchNavList',
store: 'schedulestore',
itemTpl: '<span style="font-weight:bold;">{templateName}</span><br/>{times}',
},
],
}
]
}
});
ScheduleController.js
In your controller create the new view and push it
Ext.define('MyApp.controller.ScheduleController',{
extend:'Ext.app.Controller',
config:{
refs:{
idScheduleList:'schedulecard',
navScheduleList:'#idScheduleListNavView',
},
control:{
'#idScheduleListNavView' : {itemtap:'showScheduleDetails'},
}
},
showScheduleDetails : function(){
var navScheduleList = this.getNavScheduleList();
navScheduleList.push(newView);
}
});

Accessing Android phone contacts with phonegap and Sencha Touch

please I'm trying to get a list of all the contacts on my phone with the following code.
var App = new Ext.Application({
name: 'SmsthingyApp',
useLoadMask: true,
launch: function () {
Ext.data.ProxyMgr.registerType("contactstorage",
Ext.extend(Ext.data.Proxy, {
create: function(operation, callback, scope) {
},
read: function(operation, callback, scope) {
},
update: function(operation, callback, scope) {
},
destroy: function(operation, callback, scope) {
}
})
);
Ext.regModel("contact", {
fields: [
{name: "id", type: "int"},
{name: "givenName", type: "string"},
{name: "familyName", type: "string"},
{name: "emails", type: "auto"},
{name: "phoneNumbers", type: "auto"}
]
});
Ext.regStore('contacts',{
model: "contact",
proxy: {
type: "contactstorage",
read: function(operation, callback, scope) {
var thisProxy = this;
navigator.contacts.find(
['id', 'name', 'emails', 'phoneNumbers', 'addresses'],
function(deviceContacts) {
//loop over deviceContacts and create Contact model instances
var contacts = [];
for (var i = 0; i < deviceContacts.length; i++) {
var deviceContact = deviceContacts[ i ];
var contact = new thisProxy.model({
id: deviceContact.id,
givenName: deviceContact.name.givenName,
familyName: deviceContact.name.familyName,
emails: deviceContact.emails,
phoneNumbers: deviceContact.phoneNumbers
});
contact.deviceContact = deviceContact;
contacts.push(contact);
}
//return model instances in a result set
operation.resultSet = new Ext.data.ResultSet({
records: contacts,
total : contacts.length,
loaded : true
});
//announce success
operation.setSuccessful();
operation.setCompleted();
//finish with callback
if (typeof callback == "function") {
callback.call(scope || thisProxy, operation);
}
},
function (e) { console.log('Error fetching contacts'); },
{multiple: true}
);
}
}
});
Ext.regModel('Sms', {
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
{ name: 'date', type: 'date', dateFormat: 'c' },
{ name: 'title', type: 'string' },
{ name: 'message', type: 'string' }
],
validations: [
{ type: 'presence', field: 'id' },
{ type: 'presence', field: 'title', message: 'Please select a contact for this sms.' }
]
});
Ext.regStore('SmsStore', {
model: 'Sms',
sorters: [{
property: 'date',
direction: 'DESC'
}],
proxy: {
type: 'localstorage',
id: 'sms-app-localstore'
},
getGroupString: function (record)
{
if (record && record.data.date)
{
return record.get('date').toDateString();
}
else
{
return '';
}
}
});
SmsthingyApp.views.ContactsList = new Ext.List({
id: 'ContactsList',
layout: 'fit',
store:'contacts',
itemTpl: '{givenName} {familyName}',
listeners: {'render': function (thisComponent)
{
SmsthingyApp.views.ContactsList.getStore().load();
}
},
onItemDisclosure: function (record) {
//Ext.dispatch({
// controller: SmsthingyApp.controllers.contacts,
// action: 'show',
// id: record.getId()
//});
}
});
SmsthingyApp.views.contactsListContainer = new Ext.Panel({
id: 'contactsListContainer',
layout: 'fit',
html: 'This is the sms list container',
items: [SmsthingyApp.views.ContactsList],
dockedItems: [{
xtype: 'toolbar',
title: 'Contacts'
}]
});
SmsthingyApp.views.smsEditorTopToolbar = new Ext.Toolbar({
title: 'Edit SMS',
items: [
{
text: 'Back',
ui: 'back',
handler: function () {
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
},
{ xtype: 'spacer' },
{
text: 'Save',
ui: 'action',
handler: function () {
var smsEditor = SmsthingyApp.views.smsEditor;
var currentSms = smsEditor.getRecord();
// Update the note with the values in the form fields.
smsEditor.updateRecord(currentSms);
var errors = currentSms.validate();
if (!errors.isValid())
{
currentSms.reject();
Ext.Msg.alert('Wait!', errors.getByField('title')[0].message, Ext.emptyFn);
return;
}
var smsList = SmsthingyApp.views.smsList;
var smsStore = smsList.getStore();
if (smsStore.findRecord('id', currentSms.data.id) === null)
{
smsStore.add(currentSms);
}
else
{
currentSms.setDirty();
}
smsStore.sync();
smsStore.sort([{ property: 'date', direction: 'DESC'}]);
smsList.refresh();
SmsthingyApp.views.viewport.setActiveItem('smsListContainer', { type: 'slide', direction: 'right' });
}
}
]
});
SmsthingyApp.views.smsEditorBottomToolbar = new Ext.Toolbar({
dock: 'bottom',
items: [
{ xtype: 'spacer' },
{
text: 'Send',
handler: function () {
// TODO: Send current sms.
}
}
]
});
SmsthingyApp.views.smsEditor = new Ext.form.FormPanel({
id: 'smsEditor',
items: [
{
xtype: 'textfield',
name: 'title',
label: 'To',
required: true
},
{
xtype: 'textareafield',
name: 'narrative',
label: 'Message'
}
],
dockedItems:[
SmsthingyApp.views.smsEditorTopToolbar,
SmsthingyApp.views.smsEditorBottomToolbar
]
});
SmsthingyApp.views.smsList = new Ext.List({
id: 'smsList',
store: 'SmsStore',
grouped: true,
emptyText: '<div style="margin: 5px;">No notes cached.</div>',
onItemDisclosure: function (record)
{
var selectedSms = record;
SmsthingyApp.views.smsEditor.load(selectedSms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', { type: 'slide', direction: 'left' });
},
itemTpl: '<div class="list-item-title">{title}</div>' +'<div class="list-item-narrative">{narrative}</div>',
listeners: {'render': function (thisComponent)
{
thisComponent.getStore().load();
}
}
});
SmsthingyApp.views.smsListToolbar = new Ext.Toolbar({
id: 'smsListToolbar',
title: 'Sent SMS',
layout: 'hbox',
items:[
{xtype:'spacer'},
{
id:'newSmsButton',
text:'New SMS',
ui:'action',
handler:function()
{
var now = new Date();
var smsId = now.getTime();
var sms = Ext.ModelMgr.create({ id: smsId, date: now, title: '', narrative: '' },'Sms');
SmsthingyApp.views.smsEditor.load(sms);
SmsthingyApp.views.viewport.setActiveItem('smsEditor', {type: 'slide', direction: 'left'});
}
}
]
});
SmsthingyApp.views.smsListContainer = new Ext.Panel({
id: 'smsListContainer',
layout: 'fit',
html: 'This is the sms list container',
dockedItems: [SmsthingyApp.views.smsListToolbar],
items: [SmsthingyApp.views.smsList]
});
SmsthingyApp.views.viewport = new Ext.Panel({
fullscreen: true,
layout: 'card',
cardAnimation: 'slide',
items:[
SmsthingyApp.views.contactsListContainer,
SmsthingyApp.views.smsListContainer,
SmsthingyApp.views.smsEditor
]
});
}
})
I'm using eclipse and LogCat tab keeps marking this red
02-08 11:11:58.741: E/Web Console(13886): Uncaught TypeError: Cannot read property 'contacts' of undefined at file:///android_asset/www/app.js:35
I'm guessing this has something to with why I can't see the contacts in the contactsListContainer.
Any help please?

I'm not a Sencha expert but I do know that this line:
var App = new Ext.Application({
will cause problems with PhoneGap as we also declare a variable called App. It would be better to change that line to be something like:
var myApp = new Ext.Application({
to avoid the name conflict.
If that doesn't resolve your problem I suggest you read over my post on searching contacts. I'd make sure I could successfully search for contacts before adding in Sencha.