Trying to do some cell validation in a rallygrid, but in order to add it I need to use objects in columnCfg instead of just file names. I have something like
{
dataIndex: 'field1',
text: 'field1',
editor: { xtype: 'rallynumberfield', allowBlank: true , allowDecimals: false},
editable: true,
},
Everything works (and I'll add a renderer when it does) but I don't get the little edit hover (pencil icon) on this column. Any hint where to look? My goal is for it to look like a default grid with just the renderer, but as soon as I use the options opbject instead of a string, the hover goes away. Any hints?
Thanks for reporting this - I'm seeing the same issue (i.e. cells in column are editable, but the "pencil hover is missing). This looks like an oversight in the rendering of the component in AppSDK2. I'll file a Defect with Rally Engineering. Sorry for the inconvenience.
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.
Some modern (Safari, chrom, firefox) browser records informations and allows you to autocomplete some textfields when you come back.
I want to do it in ExtJS. I have a piece of answer here :
How to get Chrome to remember login on forms?
But in ExtJS, I can not access to the parameter autocomplete. It is always hard coded autocomplete="off". In the doc, I do not found how to modify it : http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.field.Text
Is someone has a simple answer to modify this parameter ?
You want to add an afterrender listener to the textfield, get a reference to the input element, and set its autocomplete attribute to "on". You probably also want to set its name (as that is how the browser remembers the value).
Example:
http://jsfiddle.net/4TSDu/19/
{
xtype:'textfield',
fieldLabel:'some field',
name:'somefield',
listeners:{
afterrender:function(cmp){
cmp.inputEl.set({
autocomplete:'on'
});
}
}
}
Note that to make LastPass work you might need to remove size attribute from textfields. For some weird reasons Sencha is setting size=1 which is weird (was that because of IE6? maybe even IE5.5?).
Anyway this makes LastPass work. I guess you might want to remove autocomplete attribute as well for other password managers. Tested with ExtJS 6.5.
{
xtype: 'textfield',
name: 'username',
fieldLabel: 'Username',
listeners:{
afterrender:function(cmp){
cmp.inputEl.dom.removeAttribute('size')
}
},
},
I'd like to use a % done field that uses the same functionality as % done by story plan estimate for portfolio items, except for another field.
What I'd like to do is create the same sort of bar for defects which have been marked as must fix for a particular release, and then show % done by plan estimate. I can handle getting the list of defects, calculating % done etc.
Can you show me an example of how to display such a column?
We have a PercentDoneTemplate in the SDK 2.0p3 release, but it is currently private in the SDK. You can use it, but at the risk of us changing it on you in the future. We are considering making it a publicly supported component. To use it in a grid, you just need to add a templatecolumn column to your columnCfg, something like this:
this.add({
xtype: 'rallygrid',
store: myStore,
columnCfgs: [{
text: 'Name',
dataIndex: 'Name',
flex: 1
},
{
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.PercentDoneTemplate')
}]
});
The template is expecting your data to have a field called percentDone (case sensitive). You can change that by adding a config option for percentDoneName
{
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.PercentDoneTemplate', {
percentDoneName: 'myPercentDoneField'
}),
}
It should end up looking like:
If you can calculate the percentage as a decimal, then you can easily generate a rallypercentdone component. However, I don't know how you expect to place them in a column. Perhaps a Rally dev will be able to better assist you in that regard.
https://rally1.rallydev.com/apps/2.0p2/doc/#!/api/Rally.ui.PercentDone
I have a panel with a titlebar which already have a two buttons, one on the left and another on the right of the bar. Now I would like to know how to add a panel (or else) to the center of the bar.
This panel need to have a picture and se string inside.
This is what I do for the moment but the panel is displayed on the right of the left button and I can't figure out how to put it in the middle of the titlebar.
this.getTitlebar().add([{
xtype: 'panel',
layout:'hbox',
items:[{
xtype:'img',
width:32,
height:32,
src:data.image.small.url
},{
html: data.key,
style:'color:#FFF'
}]
}]);
[UPDATE] : centered: true
I tried to add centered: true to my panel config but it didn't work, it actually got worse
from this
to this
Thanks
don not need to add the "spacer"
items: [
// your_first_button(default:left)
{},
// your_central_panel
{centered: true},
// your_second_button
{right: 0}
]
Hope this helps.
To align your items as described, simply use this prototype:
items: [
{your_first_button},
{xtype: 'spacer'},
{your_central_panel},
{xtpye: 'spacer'},
{your_second_button},
]
Hope this helps.
If you're trying to achieve the same thing, don't use a Ext.Titlebar but use a Ext.Toolbar instead.
Things like {xtype:'spacer'} don't work in Titlebars...
Did you try insert method of the component?
You can have something like this
yourComponent.insert(index,componentTobeAdded);
And after adding it, call the component layout of the Toolbar to show the panel added.
im using extjs4 with dwr3 to upload a file
this is all i have in my form
{xtype: 'fileuploadfield',
name: 'file',
fieldLabel: 'Archivo',
allowBlank: false,
buttonText: 'Seleccionar...'
}, {
xtype: 'button',
text: 'Cargar',
action: 'cargarArchivo'
}
when i click the button (labeled Cargar) it submits the file and stays in the same page, so far so good. Problem is, when i choose another file, the text in the field stays the same instead of showing the new file chosen
this is what i have in my controller:
init: function() {
this.control({
'NciImport button[action=cargarArchivo]': {
click: this.cargaArchivo
}
});
},
cargaArchivo : function (button){
clickedButton = button;
bsNciNiv.cargaArchivoNci(dwr.util.getValue('file'), function(x,y,z){
clickedButton.up('form').down('fileuploadfield').createFileInput(); // funny solution
});
}
The bsNciNiv.cargaArchivoNci part is my DWR service
the line i commented as funny solution kind of works, after adding it the rest works as expected, but i really dont think it is the right solution, just added it as a hint in case its useful
can anyone confirm if this is a bug or if theres a way to fix this? thanks
(btw not sure if this has anything to do with dwr3, but i tagged it anyway)
I just ran into this same problem using Ext-JS 4.1.1 and DWR3. I debugged the DWR javascript and found the cause. When the dwr method parameters include a fileupload field, dwr constructs a multipart post message and a hidden iframe rather than using XmlHttpRequest. As part of this process, it replaces the original fileupload element (this itself is a hidden element, created and managed by the Ext FileUpload component) with a clone (same ID and properties). As a result, the Ext field's fileInputEl property is no longer referring to the replaced element and the component's onFileChange() event handler is not registered for the new element's 'change' event. So, it isn't a bug in Ext-JS.
I worked around it in my callback like this:
var fileInputId = uploadField.fileInputEl.dom.id;
MyDwrService.fileUpload(uploadField.fileInputEl.dom, arg2, function(results) {
uploadField.fileInputEl = Ext.get(document.getElementById(fileInputId));
uploadField.fileInputEl.on({
scope: uploadField,
change: uploadField.onFileChange
});
});
It worked for me in Firefox, Chrome and IE8
My guess is that this component was not designed to upload multiple files (in series).
The issue you are seeing is probably due to this hidden element not getting cleared: http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.field.File-property-fileInputEl
You can probably file this as a bug with Sencha although they might consider it a feature :)