I am creating a radiogroup and when it's created, I set the "inputValue" to set the value of the field. For the first radio button, inputValue is set to 'I' (for in) and 'O' (for out) is set for the second radio button.
If someone clicks the "OUT" radio, then a window pops up and asks them to choose a value from a combo box. The possible values there are 'F', 'R' or 'T' and if they select one of those, I'd like to modify the 'OUT' inputValue to reflect that. So when the form is submitted, it should, for example, send back 'F' instead of 'O'.
Here is the code for the radio buttons:
items: [
{
xtype: 'container',
defaultType: 'radiofield',
allowBlank: false,
blankText: 'Required',
hideLabel: true,
layout: 'hbox',
items: [
{
xtype: 'radiofield',
boxLabel: 'IN',
name: 'susceptible_populations_1',
width: 50,
padding: '2 0 0 10',
checked: true,
inputValue: 'I',
id: 'susceptible_populations_1_in'
},
{
xtype: 'radiofield',
boxLabel: 'OUT',
name: 'susceptible_populations_1',
width: 115,
padding: '2 0 0 10',
inputValue: 'O',
id: 'susceptible_populations_1_out',
listeners: {
click: {
element: 'el',
fn: function() {
show_popup_window('susceptible_populations_1_out', '9A(5)');
}
}
}
}
]
}
]
I have Googled around and found a couple of solutions, but none of them seem to work for me. All of them still return 'O' when I submit the form.
Here are some definitions for my popup window:
FIELD_NAME is passed as the first parameter to the function. In this instance it is 'susceptible_populations_1_out'
TRUNCATED_FIELD_NAME is the same as above, except the '_out' has been removed. In this instance, it is 'susceptible_populations_1'. This is the name of the field that actually gets returned with my form post.
record is the value of the combo box. For this example, we can use the letter 'F'.
Here are some of the examples I am trying:
Ext.getCmp(FIELD_NAME).setValue(record);
This appears to set the value of the radio to true. The value should have already been set to true when I clicked on it, so this is redundant and doesn't change the inputValue to 'F'
Ext.get(FIELD_NAME).set({inputValue:record});
This appears to do nothing that I can tell. I'm guessing that it's because to set something, the set needs a current name AND value and just sets that instance to true when it makes a match. This is not what I'm attempting to do.
var temp = Ext.get(Ext.ComponentQuery.query('[name=' + TRUNCATED_FIELD_NAME + ']')).getValue().elements[1];
Ext.get(temp).set({value:record});
Here I am attempting to access the element directly and it doesn't seem to do anything either. I've tried many different combinations of the preceeding code snippets also, (including replacing FIELD_NAME with TRUNCATED_FIELD_NAME in the above examples), but the value of the radio always comes back as 'O'.
In Sencha Touch, there seems to be a setGroupValue, but I couldn't find that in the EXT JS 4 docs anywhere. (Although getGroupValue works as expected.)
Can someone please give me some guidance on this?
Thanks so much!
you can set the config property later at any time
Ext.getCmp(FIELD_NAME).inputValue = 'F'
only notice that getCmp with static ids should not be used, instead use ComponentQuery and itemId.
Related
Ok, I'm new to angular and angular ui-grid.
I'm using angularjs(v1.4) with angular-ui-grid(v3.0.7).
I have defined a grid as below
seec.gridOptions = {};
seec.gridOptions.rowEditWaitInterval = -1;
seec.gridOptions.onRegisterApi = function (gridApi) {
$scope.gridApi = gridApi;
gridApi.rowEdit.on.saveRow($scope, $scope.saveRow);
};
seec.gridOptions.columnDefs = [
{name: 'pouch', displayName: 'Pouch', enableCellEdit: false, enableHiding: false, width: 250},
{name: 'content', displayName: 'Content', enableHiding: false, width: 150},
{
name: 'units',
displayName: 'Number of Items',
type: 'number',
enableHiding: false,
width: 150
},
{name: 'active', displayName: 'Status', type: 'boolean', enableHiding: false, width: 150}
];
The controller basically makes a http call and feeds data to the grid.
if (response.status === 200) {
seec.gridOptions.data = angular.copy(seec.data);
}
Currently, the last item in the grid is being displayed as either 'true' or 'false' based on the boolean field value., and when I double click on the field a checkbox appears.
So, I need to display true as 'active' and false as 'inactive'.
Is there any way of doing this with angular ui-grid?
There certainly is! One approach could be to use a cellTemplate and map your rowvalues to something different.
I created a Plunkr showcasing a possible setup.
There are two steps to take. First add a cellTemplate to your column:
cellTemplate: "<div ng-bind='grid.appScope.mapValue(row)'></div>"
Note: Instead of ng-bind you could also use "<div>{{grid.appScope.mapValue(row)}}</div>", if you are more familiar with that.
Second step is to define your mapping function, for example:
appScopeProvider: {
mapValue: function(row) {
// console.log(row);
return row.entity.active ? 'active' : 'inactive';
},
}
#CMR thanks for including the Plunkr. As I was looking at it I checked, and in this case it seems overkill to have the mapValue function.
This worked for me:
cellTemplate: "<div class='ui-grid-cell-contents'>{{row.entity.active ? 'active' : 'inactive'}}</div>"
(I added the class in there to match the other cells). I will say that this still smells a little hacky to me.
This question leads to using a function as the field itself: In ui-grid, I want to use a function for the colDef's field property. How can I pass in another function as a parameter to it?
I'd still like to see an answer with the logic directly in the columnDefs.
You can use angular filter specifying in your columnDef for a column cellFilters : 'yourfiltername:args'.
args can be a variable or a value, in that case pay attention to use right quoting. if args is a string cellFilters : 'yourfiltername:"active"'
Your filter can be directly a function or a filter name. Here a plunkr
I have following config foo column in grid:
field:
actionName: {
editable: true,
nullable: true,
defaultValue: {"name" : "TEST123"},
type: "object"
},
Column:
{
field :"actionName",
title : $translate.instant('ACTIONNAME'),
width: "200px",
editor: GlobalHelperService.getActionNamesListForAutocomplete,
template: '#: data.actionName.name #',
filterable: { cell: { operator:"contains"
}
}
},
Which works almost fine, but if i clicked on cell item i always got following value (see. image below), instead of the text defined in template attribute.
How can i solve it please?
Many thanks for any advice.
It might not be the cleanest way, but you could use the edit event like I do in this blog post.
$("#grid").kendoGrid({
edit: onEdit
});
function onEdit(editEvent) {
// Ignore edits of existing rows.
if(!editEvent.model.isNew()) { return; }
editEvent.model.set("actionName", {name: "TEST123"});
}
Although as I note in that post, setting the default value with .set() might not work in this case, and you might need to edit the text in the edit box directly:
editEvent.container
.find("[name=actionName]")
.val("TEST123")
.trigger("change");
I'm trying to build a custom plugin based on a stock TinyMCE 4 image plugin. It'll have two drop-downs. When user clicks the first one - I'd like to hide the second one (css style display: none;).
Here is a bit of code that adds drop-downs in the initializer:
targetTest1ListCtrl = {
name: 'test1',
type: 'listbox',
label: 'Test1',
values: buildValues('target_list', 'target', InputDataArray),
onClick: function(e) {
//code I'm looking for
},
};
generalFormItems.push(targetTest1ListCtrl);
targetTest2ListCtrl = {
name: 'test2',
type: 'listbox',
label: 'Test2',
values: buildValues('target_list', 'target', InputDataArray2)
};
generalFormItems.push(targetTest2ListCtrl);
Both drop-downs generate just fine, if I put alert in my onclick event - it's triggered perfectly fine, but in no way I can find how to access my test2 through the TinyMCE and change styling on it.
Found an answer:
sampleElement = win.find('#test2')[0];
sampleElement.hide();
Where #test2 is #+name of your Ctrl.
I am using ext js to populate my two combo boxes. I want the value of combobox2 to change dynamically when an item is selected in combobox1. So far I have managed to get the contents that I want in the combobox2 which is in the required format.
For example:
This is what I am doing for this purpose:
ddlLocation.on('select', function (box, record, index) {
PageMethods.getAllBanksList(ddlLocation.getValue(), function (banks) {
ddlBank.banksArray = banks; //this is the assignment part
//Bank returns the formatted string
}, GenericErrorHandler);
});
this is my ddlBank combobox:
ddlBank = new Ext.form.ComboBox({
fieldLabel: 'Bank',
labelStyle: 'width:130px',
id: 'ddlBank',
store: banksArray,
mode: 'local',
editable: false,
triggerAction: 'all',
value: banksArray[0][0]
});
It changes nothing on the assignment, Also it does not refreshes or even cleans out the values of the dropdown?
This looks like what you are looking for.
http://www.sencha.com/forum/showthread.php?184207-Controlling-one-combobox-by-selection-of-another-combobox
I have a combobox that populates with a list of addresses:
this.entityAddressField = new Ext.form.ComboBox(
{
id: 'entityAddressField',
fieldLabel: 'Address',
store: entityAddressStore,
mode: 'local',
width: 250,
valueField: 'entity_address_id',
displayField: 'address_type',
tpl: new Ext.XTemplate(
'<tpl for="."><div class="search-item">',
'<p><b>{address_type}</b></p>',
'<p>{address_1}</p>',
'<p>{address_2}</p>',
'<p>{city}, {state_code} {zipcode}</p>',
'</div></tpl>'
),
itemSelector: 'div.search-item',
hidden: true,
triggerAction: 'all',
listeners: {
select: function(combo, record, index) {
me.entityAddressDisplay.update(address_template.apply(record.data));
me.entityAddressDisplay.show();
}
}
});
The list shows the full address when expanded, but once selected the combobox will only show the displayField, which is the address type (Home, Work, etc.).
In the case that two "Home" addresses are listed (same type but different addresses), if I change the combobox from one "Home" address to the other - calling:
this.entityAddressField.getValue();
will return the entity_address_id of the originally selected item, instead of the newly selected.
Are there rules unknown to me that prevent the combobox from having two records with the same displayField set, even though the valueField between the two is unique?
Or am I missing something else?
When the combobox is closed, it will display the displayField value. It is unaffected by your modified tpl configuration on the combobox.
One workaround would be to create a dynamic field in your record definition that concats the values together.
Ext.data.Record.create({
{name: 'address_type', mapping: 'address_type'},
..........,
..........,
..........,
// simple name concat
{name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+obj.address_2+" "+obj.city+", "+obj.state_code+" "obj.zipcode'}
});
You can also nest ternary operators and such into this field if you need to do conditionals on optional fields like address 2....
Ext.data.Record.create({
{name: 'address_type', mapping: 'address_type'},
..........,
..........,
..........,
// simple name concat
{name: 'simple_name', mapping: 'address_type+" "+obj.address_1+" "+(obj.address_2 ? obj.address_2+" ": "")+obj.city+", "+obj.state_code+" "obj.zipcode'}
});
It sounds like you're having a similar problem to this one. Make sure you have the idProperty set in your store or reader. It's what the store uses to uniquely identify records it contains.