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 have a dojo datagrid displaying records. I am displaying image on each row. On click of the image, a request to delete the record should sent to the server. I am setting structure to the grid in Js class file. I have formatted the column to display the image as below.
GridStructure= [
{
name: "Name",
field: "Name",
width: "100px",
rowSelector : '20px'
},
{
name: '',
width: '20px',
field: "",
formatter: function(inValue) {
this.customStyles.push("vertical-align:middle");
return "<img src='images/delete.jpg'/>";
}
}]
how should I handle the onclick event of image and call another JS method which will pass the row details to the business layer for further processing.
Thanks in advance.
I got it working but with a twist. Instead of writing event handling on images, I wrote it on the cell holding that image. So that way I get all the details about row index, the data in the row, everything. that served my purpose. :)
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
How can i add a floating window to the viewport while its getting created.
When i'm trying to add whith
viewport.on('add',function(){
//my functionality here
});
How can i add???
Any help??
You can't really add components to a viewport while it's being created, unless you override its internal methods. And what you're doing is adding an event listener for the "add" event, which fires when items are added to a container.
I don't see why you're trying to add a window to a viewport, but you would add it just like any other item.
Ext.create("Ext.container.Viewport", {
items: [{
xtype: "window",
width: 400,
height: 400,
title: "My Window"
}]
});
Or just create the window by itself, since it is constrained to the document body anyway.
Remember, you have to call the show method on a window before it will render to the document (unless you set autoShow: true on the window config).
How can I set icon used in my Panel's "Title Bar"? Maybe I need to add an image myself, but if so I suppose I need to define or configure that somewhere?
{
xtype: 'treepanel',
title: 'Projects',
width: 200,
store: Ext.data.StoreManager.lookup('projects'),
tools: [
{
type: 'add', // this doesn't appear to work, probably I need to use a valid class
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
},
...
]
},
There are a set of 25 icons that can be specified by using the type config.
check http://docs.sencha.com/ext-js/4-0/#!/api/Ext.panel.Tool-cfg-type
To get add symbol use
tools:[{
type:'plus',
tooltip: 'Add project',
// hidden:true,
handler: function(event, toolEl, panel){
// Add logic
}
}]
the specified type:'add' is not in the list
If you want to add your own tool type and be able to assign it an image of your own, you can do the following:
Add a css class in your css file:
.x-tool-mytool { background-image: url(path_to_your_image_file) !important; }
Then in your tools, simply use 'mytool' as the type:
{
type:'mytool',
tooltip: 'This is my tool',
handler: function(event, toolEl, panel){
// my tool logic
}
}
Make sure that you use the same name in tool's type as you used for the css class suffix.
according to the ExtJS documentation, these predefined types are available:
collapse, expand, maximize, minimize, resize, restore, move, close
minus, plus, prev, next, pin, unpin, search, toggle, refresh
save, print, gear, help
right, left, up, down
one can enter whatever type one wants:
{type: 'YOURTYPE'}
while providing a 15px icon - or preferably icon sprites
(the background-position certainly not applies for single icons, but icon sprites):
.x-tool-img.x-tool-YOURTYPE{
background: url('../images/custom_tool_sprites.png') no-repeat 0 0;
}
sources: Ext.panel.Tool-cfg-type, codefx.biz.
I think you mean "set buttons used in my Panel's Title Bar", not "set icon". You can use buttons config of Panel, not tools:
buttons: [{
text: 'Add',
tooltip: 'Add project',
handler: function() {
console.log('TODO: Add project');
}
}]
You can use other configurations like bbar (bottom bar), fbar (footer), tbar (top), lbar (left), rbar (right) for position the toolbar. One small notice is the config objects in buttons have the default xtype as button, so you don't need to explicitly specify them.