Ext JS SuperBoxSelect component - javascript

As you can see in the following screenshot, the SuperBoxSelect component can show multiple selected items on the same line e.g Conneticut and Florida
I would like to change this behavior so that each selection is shown on its own line

try setting stackItems property to true
stackItems When set to true, the items will be stacked 1 per line. Defaults to false which displays the items inline.
stackItems: true

Related

How to select item(s) out of a FlatList?

I want to select items using FlatList like when you select multiple photos on your photo galery (in this case, I am using a flatlist with 2 rows like a grid of 2x10). I want to select (for example) 3 items using onLongPress.
Something like this, but with 2 rows.
What about this:
Every item rendered would have an onLongPress, and an isPicked property.
Initially, and in renderItem(), you would implement an if statement that either renders checked square or empty square every time an item executes executes; To indicate if the item is selected or not (based on isPicked).
onLongPress invokes isPicked and rerenders everything (to toggle the square). So if isPicked is true it becomes false, and if false becomes true. You can achieve that by simply doing this: this.item.isPicked = !this.item.isPicked
Finally on Submit, filter all your initial items (data) by the isPicked === true and hurrah, you will end up with the items that were selected !

ExtJS setting menuDisabled dynamically in grid

Trying to remove column header menu containing sort dynamically.
Set menuDisabled = false on afterrender event in every column.
Ext.each(view.getColumns(), function (item) {
item.menuDisabled = true;
// item.sortable = false; //this works perfectly
});
If instead of menuDisabled I try to put sortable as false, that works perfectly.
That's because on afterrender the menu is already created, and setting the property will not disable it to appear, you should try it on init, or instead like you already did disable the sorting of the column.
Yes, menuDisabled is a config taken into account at column rendering, and changing it after that worthless. But there is a tricky way for toggling the column menu that will only work if the column was rendered with menuDisabled set to false.
So if dive into the column class source code, we will see that in the renderTpl config there is the following piece of code:
'<tpl if="!menuDisabled">',
'<div id="{id}-triggerEl" data-ref="triggerEl" role="presentation" unselectable="on" class="',
Ext.baseCSSPrefix, 'column-header-trigger', '{childElCls}" style="{triggerStyle}"></div>',
'</tpl>',
It will render a div el that will toggle the menu. So by toggling the visibility of this div, you will toggle the menuDisabled "state".
column.triggerEl.show();
column.triggerEl.hide();
In your case, you can disable the menu showing for all columns like so:
Ext.each(view.getColumns(), function(item) {
item.triggerEl.hide();
});
Here is a working fiddle: https://fiddle.sencha.com/#view/editor&fiddle/1r2h.

Filterizr, applying a filter on initial load

I am using Filterizr for a portfolio.
http://yiotis.net/filterizr/#docs
I have 5 categories, which I have buttons for, that apply filters on click.
I am initialising with the following code:
<script>
var filterizd = $('.filtr-container').filterizr({
layout: 'packed'
});
</script>
The filters all work perfectly.
But, when the page initially loads, no filters are applied, and so all the images load and it's far too many.
I would like to have the script load one of my filters when the page initially loads - so prior to any of the filter buttons actually clicked:
data-filter="1"
I suspect that something could be added to the script options along with my layout option, but I couldn't see anything on the page documentation.
Appreciate any help please
You need to set the initial filter in the options object to the category you want to display on init, just like this:
<script>
var filterizd = $('.filtr-container').filterizr({
filter: 1,
layout: 'packed'
});
</script>
This would initialize your gallery with category nr 1 set to active.

How to set viewrecords property of jqgrid dynamically?

I want to set viewrecords property of jqgrid dynamically. By default this property is set as false. I want to set this to true or false (sometimes to show and at times not to show the recordText at the table footer) depending upon the data that I am populating in the grid dynamicaly. I tried with the following but with no avail-
jQuery("#gridID").jqGrid({viewrecords : true});
jQuery("#gridID").setGridParam({viewrecords : true});
I recommend you to use viewrecords: true and just hide the div.ui-paging-info inside of loadComplete depend from the current number of records. For example
loadComplete: function (data) {
if (parseInt(data.records, 10) > 10) {
$("#pager div.ui-paging-info").show();
} else {
$("#pager div.ui-paging-info").hide();
}
}
The demo demonstrate the approach. If you open on the demo the searching dialog and filter for the client data equal to test you will see only one record and the viewrecords field will be not visible:
Clicking on the "Reload Grid" navigator button will follow to show the viewrecords field back.

Ext.PagingToolbar not working properly

I have a grid that displays images based on a category selection box next to the grid. For example if the all photos tab is selected, the grid displays all photos. If the hawaii tab is selected it only displays photos from hawaii. I have a mediaStore that keeps track of all the images.
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: mediaStore,
displayInfo: true,
displayMsg: 'Displaying images {0} - {1} of {2}',
emptyMsg: "No data to display"
})
Here is the code i used to display the paging tool bar. It works perfectly for the all photos tab but when i click on any other category, say a category that has 50 photos, it displays 1 page of 2 with the next and back buttons. If you click on the next button, the grad switches back to displaying the all photos category and the page number jumps from 1 of 2 to 2 of 5 instead of 2 of 2. Does anyone know what the problem could be?
This is because your mediaStore still contains all the records (image details). The filtering is just hiding the rows. Call the load method after you call the filterBy method:
mediaStore.load(mediaStore.lastOptions);
I ended up setting the baseParams to contain a selectionid and initially set it to '' in the jsonstore.
baseParams:
{
selectionid: ''
}
then when a selection is changed i modified the value of the baseParam using
mediaStore.setBaseParam('selectionid', record.id);

Categories