I am trying to display ScheduleState for UserStories in a grid. I am not able to display ScheduleState as editable bar, like we see in Rally, with DPCA bar-columns for each state.
For e.g. SimpleTreeGrid example on below link shows user-story schedule state as DPCA bar-columns. https://help.rallydev.com/apps/2.1/doc/#!/example/simple-tree-grid
Code is as below.
<!DOCTYPE html>
<html>
<head>
<title>Custom Store Grid Example</title>
<script type="text/javascript" src="/apps/2.1/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('Rally.example.CustomStoreGrid', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
console.log('launch');
Ext.create('Rally.data.wsapi.Store', {
model: 'userstory',
autoLoad: true,
listeners: {
load: this._onDataLoaded,
scope: this
},
fetch: ['FormattedID', 'ScheduleState', 'ScheduleStatePrefix' ]
});
},
_onDataLoaded: function(store, data) {
console.log('_onDataLoaded data', data);
this.add({
xtype: 'rallygrid',
showPagingToolbar: false,
showRowActionsColumn: false,
editable: false,
store: Ext.create('Rally.data.custom.Store', {
data: data
}),
columnCfgs: [
{
xtype: 'templatecolumn',
text: 'ID',
dataIndex: 'FormattedID',
width: 100,
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Prefix',
dataIndex: 'ScheduleStatePrefix',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleStatePrefix'}),
},
{
text: 'State',
dataIndex: 'ScheduleState',
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate', { field: 'ScheduleState'}),
}
]
});
}
});
Rally.launchApp('Rally.example.CustomStoreGrid', {
name: 'Custom Store Grid Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Does it need to be a custom store?
If not, the following _onDataLoaded works: