Add more than a field in selectfield displayvalue (Sencha Touch 2) - sencha-touch

I have the following select field :
{
xtype: 'selectfield',
name: 'sourcecurrency',
label: 'Source Currency',
valueField: 'name',
displayField: '{name} - {description}',
store: 'Countries',
placeHolder: 'Select your source currency'
},
The data is returning two fields 'name' and 'description'; I want to display the two fields in the select area, setting the displayField as shown works but i still have the '{}' surrounding them.
Must be really damn stupid but can't figure it out.

There's no direct way of showing more than one field in selectfield's displayField.
So, you will need to create an extension based on the selectfield.

I know its old, but heres another way to go about it for completeness:
Create a field like DisplayName in your model and have that be whatever combination of fields and information you want the display.
Then just have displayField: '{displayName}'
Creating a custom field is more efficient, but this is easier. Just depends on what you need to display and how efficient you need your app to be and how much time you want to invest in the solution.

In case it helps someone you can just ovveride getTabletPicker or getPhonePicker (Tested in sencha 6).
For example in getTabletPicker all you need to change is line
itemTpl: '<span class="x-list-label">{' + me.getDisplayField() + ':htmlEncode}</span>',
to something else like
itemTpl : me.getTpl()
so your selectfield would be
xtype : 'selectfield',
displayField : 'YOURDISPLAY',
valueField : 'YOURVALUE',
tpl : new Ext.XTemplate(
'<tpl for=".">',
'{YOURDISPLAY}',
'{YOURDISPLAY2}',
'{YOURDISPLAY3}',
'</tpl>'
)

Related

How can I make a field visible in Rally App builder

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.

rally search user by first character

I want to realize the functionality that we can search the users' name by typing in the first character of their names. I need to use Javascript to create a custom html.
Is there anyone who has done this before could help me?
In the example from this repository, a user combobox Rally.ui.combobox.UserComboBox searches for matching values dynamically based on the first couple of characters.
This default functionality displays the expected values after the second character is entered.
var u = Ext.create('Rally.ui.combobox.UserComboBox',{
id: 'u',
project: project,
fieldLabel: 'select user',
listeners:{
ready: function(combobox){
this._onUserSelected(combobox.getRecord());
},
select: function(combobox){
this._onUserSelected(combobox.getRecord());
},
scope: this
}
});
this.add(u);
},
If you want to load all users (do not limit the selection to team members and editors of a specific project) you may use Rally.ui.combobox.Combobox instead of Rally.ui.combobox.UserComboBox, and set the model to User. But to workaround a default behavior where only the current user populates the combobox, use a filter that would filter in all users. In the example below ObjectID > 0 is used. This combobox will be populated by all users independently of the project picker. This fragment is not a part of a custom app example above:
{
xtype: 'rallycombobox',
fieldLabel: 'select project',
storeConfig: {
autoLoad: true,
model: 'User',
filters:[
{
property: 'ObjectID',
operator: '>',
value: 0
}
],
sorters: [
{
property: 'UserName',
direction: 'ASC'
}
]
}
}
You'll want to use the Web Services API. Here's how I would do it...
The API doesn't allow you to specify a placement of a character in the filter, but you can require that it exists somewhere in the name, that filter would look like:
[{
property : "FirstName",
operator : "contains",
value : "A" //Whatever letter you're looking to start with
}]
Now, once the store is loaded, use a second function to filter the records to only those which start with your character:
store.filterBy(function(item) {
return item.get("FirstName")[0] === "A";
});
Hope this helps :)

Edit hover in rallygrid missing

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.

First item in selectfield is always checked and never updates field in sencha touch

Am having a problem with the following selectfield on my form:
{
xtype: 'selectfield',
label: 'Title',
displayField: 'ItemName',
valueField: 'Id',
listeners: {
initialize: function () {
var titleStore = Ext.create('MyApp.store.Titles', {});
this.setStore(titleStore);
}
}
},
On the form which uses the selectfield, whenever I select the option the form updates correctly, but the first item in the list always has a check mark against it. Also when selecting the first item in the list never updates the form. My knowledge of ST is limited but surely this should work out of the box?
Any ideas why this isn't working?
This was down to a silly error. The data coming from the server had identical 'Id' values, so when an item in the list was selected it had the same value as the rest of the items. The select field would then just show the first item that matched the 'Id' value which would be the first in the list.

SDK 2: % done column

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