ExtJS RowExpander - nextBd is null - extjs4.1

I have problem configuring RowExpander for my grid. When the grid renders the expander is already opened for each row and with nothing inside. When i click on its icon the following error is generated: nextBd is null. I found very similar problem here http://www.sencha.com/forum/showthread.php?185837-Grid-Panel-PlugIn-Rowexpander-nextBd-is-null but the solution does not work for me and still dont get it why plugin config cannot be passed in initComponent method:
Here is my grid code:
Ext.define('GSIP.view.plans.PlanReqList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.gsip_devplan_list',
id: 'gsip_plan_list',
plugins: [{
ptype: 'rowexpander',
rowBodyTpl : [
'Nazwa:{name}'
]
}],
//title:i18n.getMsg('gsip.view.PlanReqList.title'),
layout: 'fit',
initComponent: function() {
this.store = 'DevPlan';
// this.plugins = [{
// ptype: 'rowexpander',
// rowBodyTpl : [
// {name}
// ]
// }];
this.features = [{ftype:'filters', encode:false, local:true},{ftype:'grouping'}];
this.tbar = [{
xtype:'commandbutton',
id: 'newReq',
iconCls:'icon-application_add',
text: i18n.getMsg('gsip.view.plans.PlanReqList.addReq'),
command: 'newReq',
}];
this.viewConfig = {
forceFit:true,
getRowClass: function(record, index) {
var c = record.get('elapsedPercent');
if (c >= 0) {
return 'elapsed-normal';
}
}
}
this.columns = [
{header: "Id", dataIndex: "id", width:50, sortable: true, filter:{type:'numeric'}},
{header: i18n.getMsg('gsip.view.plans.PlanReqList.column.name'), dataIndex: "name", flex:1, sortable: true, filter:{type:'string'} },
}
];
this.callParent(arguments);
},

The rowexpander plugin makes use of a feature called rowbody.
In your initComponent() you override this.features (which already includes rowbody) with this line:
this.features = [{ftype:'filters', encode:false, local:true},{ftype:'grouping'}];
Thus the rowbody feature is not included; thus the .x-grid-rowbody-tr class is not injected; thus rowexpander can't find such class for nextBd and returns null.
You should try:
var iNewFeatures = [{ftype:'filters', encode:false, local:true},{ftype:'grouping'}];
this.features = iNewFeatures.concat( this.features );
Lastly, plugins cannot be initiated in InitComponent(), you can either declare them as configs, or within the constructor. See this thread for more info.

Related

Rally - Data Context and InlineFilter issue in a RallyGridBoard

Objective :
Trying to build a Rally App to populate "PortFolioItem/features" based upon a Project value selected from a userSearchCombo box.
Methodology:
1. Creating a UserSearchComboBox based upon the 'Project' model.
2. Depending upon the value selected from the combo box,Creating a TreeStore based on the model 'PortfolioItem/Feature'.
The context scoped for the tree Store is based on the value selected from the Project Search Combo Box
app.portfoliotreeStore = Ext.create('Rally.data.wsapi.TreeStoreBuilder').build({
models: modelNames,
autoLoad: true,
enableHierarchy: true,
limit: 'Infinity',
remoteSort: true,
// sorters: app.appSorters,
//fetch: ['Name', 'FormattedID', 'ScheduleState', 'PlanEstimate', 'Owner', 'Project'],
//filters: filters,
// filters: this.getQueryFilter(),
context: {
project: app.selProjectRef,
projectScopeDown: true
}
}).then({
success: this._addGridboard,
failure: this.showErrorNotification,
scope: this
});
In the Add grid Board Method ,created a gridBoard with some plugins
_addGridboard: function(store) {
console.log("Entering _addGridBoard", store);
app.portfoliotreeStore = store;
var modelNames = ['portfolioitem/PPMFeature']
var filters = app.getStoreFilters(app.selProjectName);
console.log("the Grid", app.down('#gridContainer'));
if (app.down('#gridContainer')) {
app.down('#gridContainer').remove('gridBoard');
}
//this.gridBoardConfig = app._getGridBoardConfig(store);
var dataContext = app.getContext().getDataContext();
console.log("DATA CONTEXT ::::", dataContext);
gridStateString = this.statePrefix + "-treegrid";
gridStateId = this.getContext().getScopedStateId(gridStateString);
app.down('#gridContainer').add({
xtype: 'rallygridboard',
itemId: 'gridBoard',
// context: this.getContext(),
modelNames: ['portfolioitem/PPMFeature'],
toggleState: 'grid',
plugins: [
'rallygridboardaddnew', {
ptype: 'rallygridboardinlinefiltercontrol',
inlineFilterButtonConfig: {
//stateful: true,
//stateId: this.getContext().getScopedStateId('filters-1'),
//collapsed: true,
context: this.getContext(),
modelNames: ['portfolioitem/PPMFeature'],
inlineFilterPanelConfig: {
collapsed: true,
quickFilterPanelConfig: {
whiteListFields: [
'Tags',
'Milestones'
],
defaultFields: [
'ArtifactSearch',
'Owner',
'ModelType',
'Milestones'
]
}
}
}
},
{
ptype: 'rallygridboardfieldpicker',
headerPosition: 'left',
modelNames: this._getModelNames()
//stateful: true,
//stateId: this.getContext().getScopedStateId('columns-example')
}
],
stateful: true,
listeners: {
'staterestore': {
fn: this._onGridStateRestore,
single: true
},
'load': {
fn: this._onGridload,
single: true
},
scope: this
},
gridConfig: {
store: store,
storeConfig: {
filters: this.getQueryFilter()
},
columnCfgs: [
'Name',
'Project',
'ScheduleState',
'Owner',
'PlanEstimate'
]
// derivedColumns: this.getDerivedColumns()
},
/*
gridConfig: {
store: store,
storeConfig: {
filters: this.getQueryFilter()
},
columnCfgs: [
'Name',
'Project',
'ScheduleState',
'Owner',
'PlanEstimate'
],
// derivedColumns: this.getDerivedColumns()
},
*/
height: this.getHeight()
});
},
Please Note the following
Not passing any context to the grid component - Reason:: if i pass
"this.getContext" to the Grid, duplicates records are initially loaded into
the grid , once i click on any header to sort the grid,the duplicates disappear.
Issue: catch 22 Situation
The only way for me to get rid of the duplicates is to not pass the context to the GridBoard, However this impacts my Plugin - "rallygridboardinlinefiltercontrol"
if i scroll over my InlinefilterButton , it throws this error
Uncaught TypeError: Cannot read property 'collapsed' of undefined
at constructor._onBeforeShowToolTip (VM556 sdk.js:100)
at constructor.fire (VM556 sdk.js:5)
at constructor.continueFireEvent (VM556 sdk.js:6)
at constructor.fireEventArgs (VM556 sdk.js:6)
at constructor.prototype.fireEventArgs (VM556 sdk.js:18)
at constructor.fireEvent (VM556 sdk.js:6)
at constructor.show (VM556 sdk.js:15)
at constructor.callParent (VM556 sdk.js:2)
at constructor.show (VM556 sdk.js:25)
at constructor.showFromDelay (VM556 sdk.js:25)
And when i Click on it , it Throws this Error
Uncaught TypeError: Cannot read property 'toggleCollapse' of undefined
at constructor._toggleFilterPanel (VM556 sdk.js:100)
at call (VM556 sdk.js:5)
It does not impact my other filters
Ok , I finally found the Issue ... It appears , i need to pass the Context to the grid , but i also need to switch the autoload on the TreeGrid to false , this is because the plugin owns the responsibility of loading the store .... YAY !! Eureka Eureaka I got this ... Can any one sugest any good book on Rally..

How to display ScheduleState and Blocked columns in custom Grid the way Rally's grid does

I'm trying to create a custom Rally app that displays data in a grid view. In another question Rally SDK App Using Grid with collapsible tree of children stories, nickm posted some sample code
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var today = new Date().toISOString();
Ext.create('Rally.data.wsapi.Store', {
model: 'UserStory',
fetch: ['ObjectID', 'FormattedID', 'Name', 'ScheduleState', 'Feature'],
autoLoad: true,
filters: [
{
property: 'Iteration.StartDate',
operator: '<=',
value: today
},
{
property: 'Iteration.EndDate',
operator: '>=',
value: today
},
{
property: 'Feature',
operator: '!=',
value: null
}
],
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, records){
var that = this;
var promises = [];
_.each(records, function(story) {
promises.push(that._getFeature(story, that));
});
Deft.Promise.all(promises).then({
success: function(results) {
that._stories = results;
that._makeGrid();
}
});
},
_getFeature: function(story, scope) {
var deferred = Ext.create('Deft.Deferred');
var that = scope;
var featureOid = story.get('Feature').ObjectID;
Rally.data.ModelFactory.getModel({
type: 'PortfolioItem/Feature',
scope: this,
success: function(model, operation) {
fetch: ['State'],
model.load(featureOid, {
scope: this,
success: function(record, operation) {
var featureState = record.get('State')._refObjectName;
var storyRef = story.get('_ref');
var storyOid = story.get('ObjectID');
var storyFid = story.get('FormattedID');
var storyName = story.get('Name');
var storyState = story.get('ScheduleState');
var feature = story.get('Feature');
result = {
"_ref" : storyRef,
"ObjectID" : storyOid,
"FormattedID" : storyFid,
"Name" : storyName,
"ScheduleState" : storyState,
"Feature" : feature,
"FeatureState" : featureState,
"FeatureID" : featureOid
};
deferred.resolve(result);
}
});
}
});
return deferred;
},
_makeGrid: function() {
var that = this;
if (that._grid) {
that._grid.destroy();
}
var gridStore = Ext.create('Rally.data.custom.Store', {
data: that._stories,
groupField: 'FeatureID',
pageSize: 1000,
});
that._grid = Ext.create('Rally.ui.grid.Grid', {
itemId: 'storyGrid',
store: gridStore,
features: [{ftype:'grouping'}],
columnCfgs: [
{
text: 'Formatted ID', dataIndex: 'FormattedID', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate')
},
{
text: 'Name', dataIndex: 'Name',
},
{
text: 'ScheduleState', dataIndex: 'ScheduleState',
},
{
text: 'Feature', dataIndex: 'Feature',
renderer: function(val, meta, record) {
return '' + record.get('Feature').FormattedID + '';
}
},
{
text: 'Feature State', dataIndex: 'FeatureState',
}
]
});
that.add(that._grid);
that._grid.reconfigure(gridStore);
}
});
I'd like to display the ScheduleState and Blocked columns the same way that the Rally Grid shows them (as graphic representations). I've tried to figure out how to use templatecolumn xtype by using the following in my columnCfgs block:
{ text: 'State', dataIndex: 'ScheduleState', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate') }
This fails and causes a JS error in the sdk-debug.js:
Uncaught TypeError: Cannot read property 'getAllowedValueStore' of
undefined sdk-debug.js:190539 Ext.define.loadStates
I get different errors with the Blocked column but I haven't been able to figure out how to get it to display as the red blocked icon.
With some tweaking I expect this to work in the next release of AppSDK2, but right now the rendering of the ScheduleState and Blocked will only work with wsapi data store. Using
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate')
is not sufficient. Custom store has no access to the valid states.
UPDATE
Rendering of ScheduleState and Blocked works in the current x version of AppSDK2 as of the date of this update, 5/22
<script type="text/javascript" src="/apps/x/sdk.js"></script>
This fix will eventually make its way to the next official release of AppSDK2 but for now you may use it with x version of AppSDK2.
Warning: x version of AppSDK is never stable - changes are made to it constantly.
See full code example here.
In x version of AppSDK you may do this:
{
text: 'ScheduleState', dataIndex: 'ScheduleState', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.ScheduleStateTemplate',
{
states: ['Defined', 'In-Progress', 'Completed', 'Accepted'],
field: {name: 'ScheduleState' }
})
},
{
text: 'Blocked', dataIndex: 'Blocked', xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.BlockedTemplate')
}
Also, for now, set this to false in the grid config:
enableBlockedReasonPopover: false

Linking SSO users to item's detail page

I am displaying snapshot store records in a rallygrid component and would like to make it so the ID field is clickable and brings up the detail page for that work item. Since snapshot records include an "_UnformattedID" rather than "FormattedID", I tried to accomplish this using a column renderer, which adds the text as a link:
renderer: function(val, meta, record) {
return 'US' + record.get('_UnformattedID') + '';
}
This works perfectly for me, as a non-SSO user, but users in our workspace who are using SSO have reported that the link simply brings them to their default start page. Not the detail page they were expecting.
Is there a better way I could be accomplishing this that would allow all users the functionality?
SSO implementation is different across organization, but this trick worked for me.
I detect the host:
this._host = window.location.hostname;
and then I use host when building the return value of the renderer since the resulting URL in SSO and Non-SSO scenarios in my environment only differ in the host portion.
{
text: 'Formatted ID', dataIndex: 'UnformattedID',
renderer: function(val, meta, record) {
return 'US' + record.get('UnformattedID') + '';
}
}
.
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
this._host = window.location.hostname;
console.log('host', this._host);
var iterationComboBox = Ext.create('Rally.ui.combobox.IterationComboBox',{
listeners:{
ready: function(combobox){
this._iterationOid = combobox.getRecord().get('ObjectID');
this._loadStories(this._iterationOid);
},
select: function(combobox){
this._iterationOid = combobox.getRecord().get('ObjectID');
this._loadStories(this._iterationOid);
},
scope: this
}
});
this.add(iterationComboBox);
},
_loadStories:function(iterationOid){
console.log('loading stories for ', iterationOid);
var myStore = Ext.create('Rally.data.lookback.SnapshotStore', {
autoLoad:true,
fetch : ['Name','_UnformattedID','ScheduleState','_TypeHierarchy'],
filters : [{
property : '__At',
value : 'current'
},
{
property : '_TypeHierarchy',
value : 'HierarchicalRequirement'
},
{
property : 'Iteration',
value : iterationOid
}
],
hydrate: ['_TypeHierarchy'],
listeners: {
load: function(store,records,success){
console.log("loaded %i records", records.length);
this._onDataLoaded(myStore, records);
},
scope:this
}
});
},
_onDataLoaded: function(store,data){
console.log('count',store.getCount());
var that = this;
var records = [];
Ext.Array.each(data, function(record) {
records.push({
Name: record.get('Name'),
ObjectID: record.get('ObjectID'),
UnformattedID: record.get('_UnformattedID')
});
});
var myStore = Ext.create('Rally.data.custom.Store', {
data: records
});
if (!this.down('#grid')) {
this.add({
xtype: 'rallygrid',
id: 'grid',
store: myStore,
columnCfgs: [
{
text: 'Name', dataIndex: 'Name', flex: 1
},
{
text: 'Formatted ID', dataIndex: 'UnformattedID',
renderer: function(val, meta, record) {
return 'US' + record.get('UnformattedID') + '';
}
}
]
});
}
else{
console.log(store);
this.down('#grid').reconfigure(myStore);
}
}
});

Using Rally WsapiDataStore at a certain date

I want to create a chart of how many tasks are in a given Schedule State during the length of the sprint. Is it possible to call WsapiDataStore on each day?
What you are looking for is a lookback Snapshot Store , using the Lookback API - this allows you to specify a date or a point in time that you want to query by.
A typical use looks like this:
Ext.create('Rally.data.lookback.SnapshotStore', {
pageSize : 10000,
fetch : ['fetch'],
filters : [{
property : '__At',
value : 'current'
},{
property : '_ItemHierarchy',
value : 'HierarchicalRequirement'
}]
}).load({
callback : function(records) {
Ext.Array.each(records, function(record) {
// do something with each record
});
}
});
WsapiDataStore is not intended for historic data. You need to use Rally.data.lookback.SnapshotStore which retrieves data from the Lookback API.
Lookback API allows to see what any work item or collection of work items looked like in the past. This is different from using WS API directly (or via WsapiDataStore) which can provide you with the current state of objects, but does not have historical data.
LBAPI documentation is available here
As far as Rally release object's attributes see WS API object model here. But it is not clear from your comment what you mean by data for the entire release. If you are interested in getting back user stories assigned to a specific release then your query object should be hierarchical requirement and not release, and you may filter by release.
Here is an app that builds a chart using a Release dropdown. Based on the selection in the dropdown the chart is refreshed (it is destroyed and added):
Ext.define('CustomApp', {
extend: 'Rally.app.TimeboxScopedApp',
componentCls: 'app',
scopeType: 'release',
comboboxConfig: {
fieldLabel: 'Select a Release:',
labelWidth: 100,
width: 300
},
addContent: function() {
this._makeStore();
},
onScopeChange: function() {
this._makeStore();
},
_makeStore: function() {
Ext.create('Rally.data.WsapiDataStore', {
model: 'UserStory',
autoLoad: true,
filters: [this.getContext().getTimeboxScope().getQueryFilter()],
listeners: {
load: this._onDataLoaded,
scope: this
}
});
},
_onDataLoaded: function(store, data) {
var records = [];
var scheduleStateGroups = ["Defined","In-Progress","Completed","Accepted"]
// State count variables
var definedCount = 0;
var inProgressCount = 0;
var completedCount = 0;
var acceptedCount = 0;
// Loop through returned data and group/count by ScheduleState
Ext.Array.each(data, function(record) {
//Perform custom actions with the data here
//Calculations, etc.
scheduleState = record.get('ScheduleState');
switch(scheduleState)
{
case "Defined":
definedCount++;
break;
case "In-Progress":
inProgressCount++;
break;
case "Completed":
completedCount++;
break;
case "Accepted":
acceptedCount++;
}
});
if (this.down('#myChart')) {
this.remove('myChart');
}
this.add(
{
xtype: 'rallychart',
height: 400,
itemId: 'myChart',
chartConfig: {
chart: {
},
title: {
text: 'User Story Schedule State Counts',
align: 'center'
},
xField : 'ScheduleState',
xAxis: [
{
//categories: scheduleStateGroups,
title: {
text: 'ScheduleState'
}
}
],
yAxis: {
title: {
text: 'Count'
}
},
plotOptions : {
column: {
color: '#F00'
},
series : {
animation : {
duration : 2000,
easing : 'swing'
}
}
}
},
chartData: {
categories: scheduleStateGroups,
series: [
{
type: 'column',
data: [definedCount, inProgressCount, completedCount, acceptedCount]
}
]
}
}
);
this.down('#myChart')._unmask();
}
});

ExtJS 4 PagingToolbar throwing dom errors on subsequent page loads

I'm fairly new to ExtJS, but have been able to get a GridPanel working with an associated paging toolbar. Everything works fine, until I close the popped up window and open another one. On the subsequent window loads, I get a "me.dom is undefined" error. If I remove the paging toolbar, everything works fine. I'm using version 4.0.7.
Thanks in advance.
Store definition:
Ext.define('VIMS.store.TOs',{
extend:'Ext.data.Store',
model:'VIMS.model.TO',
requires: 'VIMS.model.TO',
sorter:{property:'StartDate', direction:'DESC'},
buffered: true,
pageSize: 10,
listeners:{
beforeload: function(store,options) {
if(options.params && options.params.id){
store.getProxy().extraParams.id = options.params.id;
}
},
},
});
GridPanel definition:
Ext.define('VIMS.view.TaskOrderList' ,{
extend: 'Ext.grid.Panel',
alias : 'widget.taskorderlist',
title : 'Task Orders',
store: 'TOs',
requires:'Ext.toolbar.Paging',
height:'100%',
columnLines:true,
/* removed this code ---------------------------------------
dockedItems :[{
xtype: 'pagingtoolbar',
store: 'TOs', // same store GridPanel is using
pageSize:10,
dock: 'bottom',
displayInfo: false,}],
-------------------------------------------- */
initComponent: function() {
this.columns = [
{header: 'Description', dataIndex: 'Description', flex: 1},
. . .
{header: 'Id', dataIndex: 'TaskOrderId', hidden:true},
];
// added from here ---------------------------------
var PagingBar = new Ext.PagingToolbar({
pageSize: 10,
store: 'TOs',
displayInfo: true,
});
this.bbar = PagingBar;
// to here ---------------------------------------
this.callParent(arguments);
}
});
To open the window, from my controller I use the following:
var view = Ext.widget('contractedit');
view.modal = true;
view.down('form').loadRecord(record);
The close is handled via the following:
closeMe: function(button) {
var win = button.up('window');
win.close();
},
you have an extra trailing comma that maybe getting in the way:
displayInfo: false,
also how r u managing the window?