If I have a standard Rally grid, I want to dynamically adjust row CSS based on some condition. Sencha docs suggest using getRowClass http://docs.sencha.com/extjs/3.4.0/#!/api/Ext.grid.GridView-method-getRowClass
If I attempt to implement this it is not working however i.e. like this:
grid = {
xtype:'rallygrid',
store:store,
showPagingToolbar: false,
features: [{
ftype:'grouping',
groupHeaderTpl: '{name}',
ftype: 'summary'
}],
viewConfig: {
getRowClass: function(record, rowIndex, rp, ds){
return 'x-grid-row-outofscope';
}
},
Is this possible with a Rally grid?
This is a bug in 2.0rc1/2 of the SDK that has since been fixed but not released yet.
Check out this similar question and corresponding answer:
Rally grid color rows based on model
Related
I have a Rally grid that I'm creating using the Rally app builder. Standard grid using the defect model. One of the fields in the defect model is set to hidden in the field setup in the Rally Workspaces and Projects setup. I'd like to dynamically make the field visible in my grid so that it only appears on my grid and not on the defect page when entering a defect. Any ideas on how to do that? Thanks.
This was a pretty tricky one. The grid and board components are hard wired to not show data from hidden fields by default and unfortunately there are not any config properties exposed to turn this behavior off. Here's what I came up with:
this.add({
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
'Owner',
{
text: 'Hidden Field', //set column header text
renderer: function(value, meta, record) {
//return the rendered field data
return record.get('c_HiddenField');
}
}
],
context: this.getContext(),
storeConfig: {
model: 'userstory',
fetch: ['c_HiddenField'] //need to explicitly fetch
}
});
Basically you include a column in your columnCfgs without a dataIndex specified. Set the text and renderer to work with your field.
You'll also need to manually fetch your field in the storeConfig since the grid won't understand how to do it otherwise.
I've got an app that I was upgrading to SDK version rc2 from p5. It overrides the getRowClass() function in the viewConfig to change the row color setting the class if there is a tool tip displayed as per the code below...but this code for some reason seems to be broken in rc1 and rc2.
In p5, this function is called once per row (which I can see when it hits the console.log), but does not seeem to be called in rc1/rc2.
Can anybody confirm whether this is a defect is rc2, or a feature that is no longer being supported?
var grid = {
xtype: 'rallygrid',
showPagingToolbar: false,
disableColumnMenus: false,
store: this.gridDataStore,
viewConfig: {
getRowClass: function(record) {
var toolTip = record.get('ToolTip');
console.log('checking tooltip', record);
return toolTip !== null ? 'special-row' : 'normal-row';
},
listeners: { render: this._createToolTip }
},
columnCfgs: this.columnCfgs,
border: 1
};
This is due to a defect in the grid where we are blindly overriding the getRowClass function on the viewConfig w/o checking to make sure there wasn't one there already. Hopefully this defect will be fixed soon. Check out my answer to this other, very similar question: https://stackoverflow.com/a/17891138/728184
You should be able to have your getRowClass function win out by setting it in the beforerender event listener (thereby re-clobbering the one that we put on there, which is really only useful for automated testing anyway and not required in any way for the grid to function correctly).
UPDATE:
I just fixed this in the nightly build, so this should no longer be an issue in public sdk builds beginning with the next public release after 2.0rc2.
I have been trying to use a rallyaddnew to add Features and Rollups, which will then be rendered in a grid/cardboard. I got it to work and display, but I cannot customize the text to say create a new "Feature" or "Rollup", rather it says create a new "PortfolioItem/Feature" and "PortfolioItem/Rollup"
{
xtype: 'rallyaddnew',
recordTypes: ['PortfolioItem/Feature', 'PortfolioItem/Rollup'],
listeners: {
recordAdd: function() {
//
},
beforeRecordAdd: function() {
//
}
}
I couldn't find anything in the SDK on how to customize this.
This is a defect. It should be using the display name of the type instead of its type path. I'll file a defect for this. FYI there is also an existing defect around PI types and adding with details that has been fixed but has not been released in an SDK version yet.
I am creating the dojo Grid as below and I am using the indirectSelection plugin for creating a checkbox, as below, but by default the checkboxes will come at the first column of the grid. How do I make it to come at the last column?
var grid = new dojox.grid.EnhancedGrid({
id: 'serialsGrid',
style: 'width:auto;height:250px;',
store: store,
structure: layout,
rowSelector: '20px',
plugins: {
indirectSelection: {name:'Requested',headerSelector:true, width:"40px", styles:"text-align: center;"},
pagination: {
pageSizes: ["25", "50", "100", "All"],
description: true,
sizeSwitch: true,
pageStepper: true,
gotoButton: true,
/*page step to be displayed*/
maxPageStep: 4,
/*position of the pagination bar*/
position: "bottom"
}
}
}, document.createElement('div'));
/*append the new grid to the div*/
//var temp=grid.domNode;
dojo.byId("serialsGridDiv").appendChild(grid.domNode);
/*Call startup() to render the grid*/
serialsGridCopy=grid;
grid.startup();
});
The plugin itself has no capabilities of doing so as far as I know so I started looking at the functions the EnhancedGrid itself has and stumbled upon the function moveColumn() in grid.layout.
The documentation itself (here) was not really usefull, but I used it to move every column one position ahead so that the first column would become the last one.
I also made a working JSFiddle to demonstrate which you can see here. The code that is moving the columns can be found at the bottom of the code:
for (var i = 1;i < grid.layout.cells.length;i++) {
grid.layout.moveColumn(1, 1, i, i-1, grid.layout);
}
What it does is the following: it moves every column starting from index 1, so that means all columns except the indirectSelection column one step ahead (i-1).
I have implemented grid filters in Extjs 3.4, but now I am migrating to extjs 4.1.
Can anyone show me how to implement grid filters in extjs 4.1?
(As a new user, I am unable to upload an image to show an example)
Please refer following link.
http://www.sencha.com/forum/showthread.php?150918-Grid-Header-Filters
Second option is filter in menu, and this is available in extjs 4.1 examples.
http://docs.sencha.com/extjs/4.1.3/#!/example/grid-filtering/grid-filter-local.html
Third option is filter row.
http://www.sencha.com/forum/showthread.php?128154-FilterRow-for-Ext-JS-4-Grids
One of these link will guide you to the right path.
Regards.
The best way is to define a column component.
Ext.define('Ext.ux.grid.MyColumn',{
extend: 'Ext.grid.column.Column',
alias: 'widget.mycolumn',
childEls: [
'headerEl', 'titleEl', 'filterEl', 'triggerEl', 'headerTextEl', 'filterTextEl'
],
renderTpl:
'change it , and make your own TPL',
initComponent: function () {
// change or declare new data if you want.
// me.callParent(arguments);
// I have modified lot. so, I skip initComponent of Ext.grid.column.column
me.superclass.superclass.initComponent.call(this); // directly call parents parent class.
}
});
USAGE :
columns: [
{
xtype: 'mycolumn',
itemId: 'sfsfsfsfsf', text: 'My filter column'
}
]