I'm trying to add some dynamic data into a "livesearch" combo box.
I've a set of 2 combos.
The first one allow you to select some data.
The second combo is a "livesearch" combo that should have a dynamic parameter from the first combo.
So the 2nd combo is linked to a model, which is linked to a datastore that queries the server and outputs the data. But that data has to be filtered according to the first combo parameter...
Anyone knows how to do that ?
I did that before. The key is to pass the value of the first combo with the request for the values of the second combo, and then filter the results on the server. Other approach would be to load both combos with all possible values and then set a filter on the second combo's store after a value is selected in the first combo.
EDIT: Here's the I used.
Ext.define('Ext.ux.FilteredCombo', {
extend: 'Ext.form.field.ComboBox',
alias: 'widget.filteredcombo',
queryCaching: false,
getParams: function (queryString) {
var params = this.callParent(arguments);
if (Ext.isArray(this.formParams)) {
var form = this.up('form');
if (form) {
var bf = form.getForm();
for (var i = 0; i < this.formParams.length; i++) {
var field = bf.findField(this.formParams[i]);
if (field)
params[this.formParams[i]] = field.getValue();
}
}
}
return params;
}
});
Related
I have a checkbox group component and each checkbox value upon form submit is passed as a separate parameter like so:
mycheckboxgroup: val1
mycheckboxgroup:val2
mycheckboxgroup:val3
How can I instead submit all checkbox group values in a comma separated string?
mycheckboxgroup: val1, val2, val3
I tried using the getSubmitData method but that did not work. The values are still submitted in separate params.
Here is a snippet of my CheckBoxGroup class:
Ext.define("MyApp.view.form.field.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
vertical:true,
columns:2,
getSubmitData:function(){
var fldNm = this.name;
return this.getValue()[fldNm].toString();
},
initComponent:function(){
.....
.....
this.callParent(arguments);
}
});
I am using Ext 6.0.2
Thanks
The problem is that your form, upon submission, will query the checkboxes, not the group as a whole.
You can, however, create a custom component with non-persistent checkboxes and a hidden field that aggregates the value. It may need some fine tuning, but something like this:
Ext.define("MyApp.ux.CheckboxGroup",{
extend:"Ext.form.CheckboxGroup",
xtype:'mycheckboxgroup',
initComponent:function() {
var me = this,
hf = Ext.widget({xtype:'hiddenfield',name:me.name});
me.callParent(arguments);
var checkboxes = me.query('checkbox'),
onChange = function(cb, nv) {
var arr = [];
Ext.each(checkboxes,function(item) {
if(item.checked) arr.push(item.inputValue);
});
hf.setValue(arr.join(', '));
};
Ext.each(checkboxes, function(item) {
console.log(item);
item.on('change',onChange);
item.submitValue = false; // do not submit the checkbox value
})
me.add(hf);
}
});
Relevant fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1mim
I have a grid that on selection binds the record to a form.
gridSelectionChange: function (model, records) {
if (records[0]) {
this.getFormdata().getForm().loadRecord(records[0]);
}
},
Everything works fine, but if I change any field value the grid is not updating the record and neither the datastore.
I have read that I have to call:
form.updateRecord();
But how can I call it on every lost of focus of my fields (textfield, combos, etc.)?
Is there a way to do the two way binding?
You can see a working example under Ext JS 4 SDK examples/app/simple/simple.html
It binds a grid to a form inside a window.
This is the code that do the trick:
editUser: function(grid, record) { // this function fires when dblClick on itemRow
var edit = Ext.create('AM.view.user.Edit').show(); //creates a window a shows it
edit.down('form').loadRecord(record); //reference the form and load the record
},
updateUser: function(button) { //this function fires on save button of the form
var win = button.up('window'), //get a reference to the window
form = win.down('form'), // get a reference to the form
record = form.getRecord(), // get the form record
values = form.getValues(); // get the values of the form
record.set(values); //set the values to the record (same object shared with the grid)
win.close(); //close window
this.getUsersStore().sync(); // this line is only necesary if you want to synchronize with the server
}
Bottom line do:
var record = form.getRecord(),
values = form.getValues();
record.set(values);
I am trying to load data dynamically in a fieldset.
So I have a fieldset in which I dynamically add items, in my example I have two comboboxes. I want to fill those comboboxes with data coming from a store, knowing that each combobox will have different data according to its ID.
Here's what I've tried to do :
var targetFieldset = targetView.down('fieldset[id=myfieldset]');
targetFieldset .items.each(function (item) {
myStore.getProxy().url ='combo_items.php?id_combo=' + item.id;
myStore.autoSync = true;
myStore.load({
params : {
id_combo: item.id
}
})
});
How can I do this please ? Any help would be appreciated.
EDIT :
I have tried this as well, but it always binds the values corresponding to the last item id to all the comboboxes.
targetFieldset.items.each(function (item) {
myStore.clearFilter(true);
myStore.filter('id_combo', item.id);
alert(item.id);
item.bindStore(myStore);
myStore.loadData([], false);
});
Okay I managed to do it by cloning the filtered store to an array and then binding that array to the fieldset items.
I'm trying to use the ng-grid setup and I have the following problem.
The data I am displaying changes very frequently, every 5 seconds or so. But not a lot of new data gets added to the list.
When i set data to the ng-grid the user can start looking at the data. but when I update the data after about 5 seconds the selections the user has made and the grouping is lost.
http://plnkr.co/edit/eK1aeRI67qMROqDUtPnb
Is there anyway to keep the selection and/or the grouping?
You're going to have to go through and merge the data in a for loop. If you replace the entire array, you're replacing the object references, and therefor you will lose any changes you've made.
The other option would be to keep your selections in a different array or dictionary, then remap your properties after you replace your array. Notice here you're going to need to use a reference type so changes persist to your selections array.
So like [psuedo-code]:
// a dictionary of reference types (IMPORTANT that they are objects!)
// to hold selection data.
var selections = {
'Name1' : { value: 'selection' },
'Name2': { value: 'selection2' }
}
$scope.getMyData = function () {
// do whatever to get your data here.
$scope.myData = [
{ name: 'Name1' },
{ name: 'Name2' }
];
// update your objects in your array.
for(var i = 0; i < $scope.myData.length; i++) {
var data = $scope.myData[i];
var selection = selections[data.name];
if(selection) {
data.selection = selection;
}
}
};
// initial load
$scope.getMyData();
// your test interval
setInterval(function () {
$scope.$apply(function (){
$scope.getMyData();
});
}, 5000);
We are going to be adding a primaryKey option in the next version that will allow the grid to key off that instead of references.
I am loading values from a Store, and then filtering it with a condition (for example name == Matt). The code is shown below;
var store = Ext.getStore('mystore');
store.on('load', function() {
store.filter({
filterFn: function(rec) {
return Ext.Array.indexOf(arr, rec.get('name')) > -1;
}
});
});
store.load();
Later on, in another view, i need to use the filtered result (shown above) and filter it against another array of values. How can i do this;
My approach was to load the records again (Paste the above code again - but without the filter part of it). But this is incorrect. So how can i Filter results from the previously filtered result array ?
You can define filters to run on store load in its filters property and setting filterOnLoad property to true.
To filter records against new filter conditions:
store.clearFilter(true); // Clears old filters
store.filter([
{
filterFn: function(rec) {
return Ext.Array.indexOf(arr, rec.get('name')) > -1;
}
}
]);