Filter using checkboxes - Logic Issue - extjs4

I have a grouped Checkbox, and it has 4 checkboxes in it.
When the user selects a checkbox I need to filter a data store based on the value of the text box. When i select 2 textboxes, I get the output of ["Albert","Francis"], and when I select only the 1st textbox I get ["Albert"] and so forth.
Now, i need to know how to filter this ?
onCheckBoxGroupChange : function (field,newValue,oldValue,options) {
var chkv=newValue.chb;
console.log (chkv);
var st= Ext.getStore('People');
st.on('load', function() {
st.filter({
filterFn: function(rec) {
return rec.get('name') == chkv;
The problem I am having is, when I select both the CheckBoxes, chkv becomes ["Albert","Francis"] (Like an array), therefore I am unable to return the value since rec.get('name') == chkv; doesn't look for an array.
Can someone help me?

what about:
filterFn: function(rec) {
return Ext.Array.contains(chkv, rec.get('name'));
}
I want to make sure you know that you do not have to reload the store if you want to filter it. It looks like that is what you are doing in the snippet you provided above.
There are other problems actually, what your onCheckBoxGroupChange handler will actually do (if you leave it the way you have it above), is the following:
Every time a user clicks a checkbox it will first reload the store from the server, and then add the selected filter to the store's filters and then filter the store by the filters it has saved.
E.g.:
User clicks "Albert" checkbox
Store reloads
Store adds `["Albert"]` filter function
Store performs filtering with `["Albert"]` filter function
User clicks "Francis" checkbox
Store reloads
Store adds `["Albert", "Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function
User unclicks "Albert" checkbox
Store reloads
Store adds `["Francis"]` filter function
Store performs filtering with `["Albert"]` filter function
Store performs filtering with `["Albert", "Francis"]` filter function
Store performs filtering with `["Francis"]` filter function
You would just progressively get more and more filters. Plus unnecessarily reloading the store many times. I don't think that is what you are going for.
You should review the docs on datastore filtering for more data on how to go about this.
Also, in your question you said that you had this problem when you selected two checkboxes because it returned an array. According to the text of your question you are also getting an array when you select one checkbox (["Albert"]). It only has one item in it but it is an array.
That is why my solution (which requires your chkv variable to be an array) would work.

Related

Form reset for all fields except one Vue.js

I'm trying to find a way to to exclude one field input in my form that is disabled and contains the value of a users ID number
I would like to know how I can tweak this.$refs.form.reset(); because it works perfectly but it clears EVERYTHING and I wish to contain the ID value and resets the rest of the fields like name surname age income etc
The reason why I the ID is important is that the user gives this in a sign-up step at the start and this form that I am talking about is located somewhere else to complete his profile I don't want to ask the user again to type his ID in again.
If anyone knows how to accomplish this it would be a great help
The reset method of the form simply looks at all the inputs bound to it and resets each one within a loop then empties the error bag, observe:
reset (): void {
this.inputs.forEach(input => input.reset())
this.resetErrorBag()
},
There's no reason you can't do the same, except for when they're disabled:
resetForm() {
this.$refs.form.inputs.forEach(input => {
if (!input.disabled) {
input.reset()
}
})
this.$refs.form.resetErrorBag() // necessary to remove validation errors after the field values are removed
}
Then you can call that function (against your Vue instance, not your VForm) with this.resetForm() and it should work out the way you want.
Disclaimer: Can't test it at the moment. input.disabled may not be readily available and may require further inspection of the input element.

Store as Json Blob or Make Columns?

I am building a "filter component" that displays all available filters for that "product type".
Pretty standard pretty much just think of bestbuy, amazon, craiglist style filter.
Right now I am focusing on how to generate the filter options(not how to handle once a user clicks on a filter option and it must then go off and filter the results down).
So I created a json object that has something like this,
which will create each header section(HardDrive,Ram Size, Number of CPU Cores), what type is it(checkboxes, textboxes),
should the section be opened,
should it have a search box in it.
{
type: "", // this is what type of filter it will be (textbox, checkboxes and etc)
header: "Filter Header",
property: "", // this maps it back to the column name in db used when filter is actually triggered.
hasSearchBox: false, // some filter options are long so search box can be shown.
isOpen: true, // controls if this filter should be in an open or closed state.
for: ["What Products this filter applies to. Some of these filters are common between all products"]
},
Now I need to figure out if I should store the above as is or if I should break it into a column format.
Ie
Filters Tbl
Id
ProductTypeId
type
header
property
hasSearchBox
isOpen
This does make it easier to add a new filter in the future, but I am bit concerned if some new option comes in that might only be for some filters and not others(ie lots of null columns) or if I need a more complex objects in the future(like setting the placeholder name for the textbox).
or if I should store it like this
ProductTypeTable
Id
FilterOptions <--- json from above gets store in here.

Yii2 Gridview get all selected row for all pagination

I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H

Extjs4 Combo's and Stores: Remove filter when queryMode=local?

I'm getting frustrated because my store keeps getting filtered whenever I use it to back a combofield. Is there any way I can disable this?
The Scenario
I have a Store with a data field on it; an array of objects loaded when the store is instantiated. I use this store to drive a bunch of combo's in different areas of my app. Unfortunately, my combos are applying filters on the store, causing other combos using the same store to only display the filtered values later on, not the whole list.
Workarounds
My goofy workaround is to call combo.getStore().clearFilter() after I'm done with the combo, but that's going to get old very quick, and probably introduce a bug somewhere, I'm sure.
If I remove queryMode:'local' from my combo's config, all is well, except that now the handy type-ahead feature no longer works; I'm just shown a list of items in a drop-down that I can't even navigate around my typing letters of matching items. That's worse than a regular html select tag!
Any ideas?
Thanks!
You can't do that since the filtering is applied not on the combo but on the store. You could try creating multiple instances of the same store and work with that. Though I don't know if it'll work.
Ext.create('combo', {
//other config
store : Ext.create('my.store')
});
It'll work if you make the combo non-editable since no filtering can be applied then. But, as you say, you need the type ahead feature, you'll need to create multiple instances of the store.
In light of the fact that combos will add filters on the backing store, hence affecting all combos that use the store within my application, I've opted to add an override to the combo class so it will clear the filter on the store when the combo box is destroyed.
Ext.define('MAP.override.Combo', {
override : 'Ext.form.field.ComboBox',
initComponent : function()
{
this.callParent(arguments);
this.on('beforedestroy',function(combo){
if(combo.leaveFilter === true) return;
console.log('clearing filter on store');
combo.getStore().clearFilter();
});
}
});
it's a bit of a hack, but I do allow for the escape hatch of indicating not to clear the filters, too.
The simplest way I have found to handle this solution is to add the following listener to the combo:
listeners: {
beforequery: function(queryPlan){
queryPlan.query = true;
}
}
by default queryPlan.query is the text currently in the combo field which is used for filtering. Setting it to false cancels the query, but setting it to true allows the query to go through without a filter value, therefore keeping all values in the drop down list for all combo fields.
I've had similar problem with ExtJS 4.2 and combo. Store kept being filtered but I couldn't use clearFilter() because after that combo was unusable. My solution, which worked, is this listener on combo:
listeners: {
blur: function(combo) {
if (combo.queryFilter) {
combo.queryFilter.setValue('');
combo.getStore().filter();
}
}
}

dojox.grid.DataGrid: how to access data from a click event?

I'm using Dojo 1.5 (including dojox). I have a dojox.grid.DataGrid where each row represents a user. When I click a row, I want to redirect to a URL like /users/USER_ID. The user ID is one of the fields in the grid, so all I need to do in my onRowClick callback is to grab the user ID for the row that was clicked.
The click event contains a rowIndex property, and, indeed, I found a (rather old) post elsewhere that suggested I should be able to do:
var row = dijit.byId('grid').model.getRow(e.rowIndex);
/* (Then grab the 0th field of the row, which is the user ID.) */
(Sorry, I've since lost the URL.)
But my grid object has no model attribute. What's up with that? Has the API changed? (My grid certainly is populated with data, which I can see, click, sort by column, et cetera).
So I'm stuck for now. Note, BTW, that it won't work to use rowIndex to directly access the grid's underlying dojo.data.ItemFileReadStore. That's because the grid is sortable, so there's no guarantee that the grid's rows will be in the same order as the store's.
Any hints would be deeply appreciated. I hope that the question is clear, and sufficiently general that any answers can help others in my predicament. Many thanks.
I have a similar scenario and I grab the value like this:
onRowClick: function(e) {
open_link(my_grid._getItemAttr(e.rowIndex, 'object_path'));
}
In this case my_grid is a reference to the datagrid and object_path is the column where I store the path to the object. open_link is of course a custom function of mine that as it implies, requests a server path.
So just change the specifics to suite your case and you should be fine.