I'm using the following code in order to set the selected value:
this.myCombo.setBind('{rec.my_value}');
All my data is in "rec".
Options for choose are being filled in the combo as expected but no value is set to the selected value.
Why is this happening and how to solve?
Tried already put the above bind after data is being loaded and after page is already rendered, but without success.
You can use code something like this:
{
xtype:'combo',
store:'mystore',
valueField:'id', // you will get this value by default after selection
displayField:'name', // it will responsible to show display as option on combo
listeners: {
change : function(cmp){
var value = cmp.getValue();
}
}
}
Where id and name are the record data of store. Now, whenever you select any option, then it will display.
Related
Scenario is quite simple. I have edit view which comprises of select element with multiple selection. Select element looks as follows
<select class="selectpicker" multiple
ng-model="UserBeingEdited.UberTypes"
ng-options="uberType.Id as uberType.Name for uberType in UberTypes"></select>
</div>
If I press edit for specific user then showEditModal function is called and edit pop up shows up. User has his own UberTypes objects selected so I pick theirs Ids and assign to UserBeingEdited.UberTypes.
$scope.UserBeingEdited = { UberTypes: []};
$scope.showEditModal = function (user) {
for (var i = 0; i < user.UberTypes.length; i++) {
$scope.UserBeingEdited.UberTypes.push(user.UberTypes[i].Id);
}
$("#editUserModal").modal("show");
};
Unfortunately they are not selected, no matter what. Suprisingly, if I set values to property UserBeingEdited by the time of declaring then it works, items are selected.
$scope.UserBeingEdited = { UberTypes: [1,2]}; //this works
It seems like angular does not refresh selected items within UI.
EDIT:
I have two items: Uber1 and Uber2. Both items are selected but view does not reflect it. If I open drop down menu and select Uber2 it shows Uber1 selected, apparently Uber2 was selected and another click was treated as unselection. The same happens when I click Uber1 first, Uber2 shows as selected.
As above picture depicts, Uber2 is highlighted since I have just clicked it but it shows Uber1 as selected. Both were selected in User's UberTypes but view just simply does not mark them as selected.
http://jsfiddle.net/upusq8ah/7/
I use bootstrap-select.js for select element and presumably this library causes such an error since without including it, it works fine.
Solution
After a while of struggle, I accidentally ran into below workaround. You need to call refresh on selectPicker and this has to be delayed otherwise it will bring no effect.
setTimeout(function () {
$('.selectpicker').selectpicker('refresh');
}, 100);
$("#editUserModal").modal("show");
I have this code:
grid.getSelectionModel().on('selectionchange', function(selModel, selections) {}
and inside the function with the variable 'selections' I want to get the selected row field 'name' data.
How do I do it?
I have tried 'selections.data.name' and 'selections.get('name')' but none works.
I know it's possible because Firebug shows the data of the variable 'selections'.
The answer is:
selections[0].data.name or selections[0].get('name')
I'm trying to add a select box to a Backgrid.Grid in order to fire a function that will reset the state: {pageSize} to the value the user selects. But I can't figure out how or where to bind the events to the grid.
My understanding is that the element needs to be part of the view (which I believe is the Backgrid.Grid), so I added the select box to the footer of the grid and gave it an id and tried adding an events parameter and matching function to it, but it does nothing.
So, in my footer I have
select id="changePageSize"
And in the grid
events: {
'change #changePageSize' : 'changePageSize'
},
changePageSize: function(){ console.log('hooray!');}
I believe my approach is completely wrong at this point but can't find anything to direct me down the correct path.
What I ended up doing was adding the event listener and function to the backgrid-paginator extension.
Added the select box to the _.template('...
_.template('...<div class="page-size"><select name="pageSize" class="pageSize"><option...');
Under events I added:
'change select.pageSize' : 'changePageSize'
And then created the function:
changePageSize: function(e){
e.preventDefault();
this.collection.state.pageSize = Math.floor(e.currentTarget.value);
this.collection.reset();
},
It makes sense to make this function and its display optional and to also allow a developer to assign an array to generate custom option values. When I get time.
Regarding Duffy Dolan's answer: everything si great in your example, except if you are on let's say on third page and select to have all results only on one page, you get an error.
You just need to add:
this.collection.getPage(1); // it will always select first page
I'm using Sencha Touch 1.1. I have a Ext.List and when the user selects an item, I switch to the details page using
rootPanel.setActiveItem('details');
That works fine. Now I want to get the details of the selected item and populate properties in the 'details' panel. How do I do that?
At the moment I'm passing the record around to the various panels of the details page by using this code:
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
// TODO: There must be a better way to pass the data around
CountryDetailsToolbar.setTitle(record.data.title);
var upperData = { upper: record.data.title.toUpperCase()};
CountryDetailsHeaderLeft.update(upperData);
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}
This seems a bit messy to me. Is there a cleaner way to set titles and update panels with the data "record"?
you can use rootPanel.getActiveItem() to get instance of currently selected panel, i am not sure about what do you mean by populate properties in the details tab
Update:
i think there isn't any problem in passing record data between panels, i think that is the most efficient way
onItemDisclosure: function (record) {
// user has selected a Country from the Country List.
var title = record.get('title');
CountryDetailsToolbar.setTitle(title);
CountryDetailsHeaderLeft.update({ upper: title.toUpperCase() });
CountryDetailsHeaderMonth.update(record.data);
viewport.setActiveItem('CountryDetailsCarousel');
}
I have an extjs combobox used for auto-complete having following configuration:
xtype:'combo',
displayField: 'name',
valueField:'id',
store: storeVar,
queryMode: 'remote',
minChars:2,
hideTrigger:true,
forceSelection:true,
typeAhead:true
There are two issues being faced by me:
a. If a user chooses a value from the list returned from server, but later wants to remove that value and keep combo-box empty, then also the old values re-appears on blur, not allowing combo-box to remain empty. How can I allow empty value in this combo-box in such a case? I understand it could be due to forceSelection:true, but then I need to keep it true as otherwise user can type any random value.
b. When the server returns an empty list, I want to display a message - No Values Found. I tried doing this, by putting this value in the displayField entity, i.e., {id:'', name:'No Value Found'}. But then in this case, the user is able to choose this value and send it to server which is not what is expected. Thus, how can I display the message for empty list?
Could someone please throw light on this?
For the issue related to forceSelection in the question above, following is the hack created which can serve the expected purpose:
Ext.override(Ext.form.field.ComboBox,{
assertValue: function() {
var me = this,
value = me.getRawValue(),
rec;
if (me.multiSelect) {
// For multiselect, check that the current displayed value matches the current
// selection, if it does not then revert to the most recent selection.
if (value !== me.getDisplayValue()) {
me.setValue(me.lastSelection);
}
} else {
// For single-select, match the displayed value to a record and select it,
// if it does not match a record then revert to the most recent selection.
rec = me.findRecordByDisplay(value);
if (rec) {
me.select(rec);
} else {
if(!value){
me.setValue('');
}else{
me.setValue(me.lastSelection);
}
}
}
me.collapse();
}
});
This needs to be included after library files of extjs have been included.
For the other issue of message to be shown at No Values Found - emptyText - works fine as suggested by Varun.
Hope this helps somone looking for something similar.
I've done this for Ext JS 3.3.1. I don't know if they apply to Ext JS 4, though I guess they should.
For the first problem, set autoSelect : false. autoSelect is by default set to true. This will work only if allowBlank : true is set. From the docs
true to select the first result gathered by the data store (defaults
to true). A false value would require a manual selection from the
dropdown list to set the components value unless the value of
(typeAheadDelay) were true.
For the second problem, use listEmptyText. From the docs
The empty text to display in the data view if no items are found.
(defaults to '')
Cheers.