Based on this comment from mitchellsimoens at sencha forums i tried to implement an infinite scrolling combobox in extjs 6.5.2 modern.
The thing is that setting the combobox store to a virtual store produces this error: Uncaught TypeError: a.setExtraKeys is not a function.
I also set the floatedPicker to:
{
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null
}
Is there a way to implement an infinite scrolling combobox in extjs 6 modern without changing the default picker to a grid?
OK this actually works:
floatedPicker: {
xtype: 'boundlist',
infinite: true,
// BoundListNavigationModel binds to input field
// Must only be enabled when list is visible
navigationModel: {
disabled: true
},
plugins: {
listpaging: {
autoPaging: true,
loadMoreText: 'More records..',
noMoreRecordsText: 'No more records.'
}
},
scrollToTopOnRefresh: false,
loadingHeight: 70,
maxHeight: 300,
floated: true,
axisLock: true,
hideAnimation: null,
variableHeights: true
}
It's a bit ugly when loading but it works.
Also i used an Ext.data.store. Virtual store don't work with comboboxes.
Related
I am working on EJ2 Javascript grid. which is working fine. But my problem is i am having around 10K + records, if i am loading these into grid, page takes ages to load. So i was thinking to make pagination, for each page i will load 10-20 records, that time load time will decrease. I have checked Ej2 website as well. but i am not able to find any proper manual for that.
https://ej2.syncfusion.com/javascript/demos/#/material/grid/default-paging.html
My current code :
var grid = new ej.grids.Grid({
dataSource: data,
allowPaging: true,
allowResizing: true,
showToolbar: true,
allowExcelExport: true,
allowPdfExport: true,
allowSearching: true,
allowFiltering: true,
filterSettings: { type: 'CheckBox' },
columns: [
{ field: 'InvoiceNumber', headerText: 'Test', customAttributes: { class: "customcss" },
textAlign: 'center', width: 100 },
],
});
}
}
grid.appendTo('#tblPo');
Where we can pass offset and page records here?
As I stated here, I'm having trouble in disabling gestures totally on lower resolutions.
By using breakpoints in conjunction with as said "dedicated API touch options" such as touchRatio, shortSwipes/longSwipes, allowTouchMove, allowSlidePrev/next don't produce the expected results. This is the current implementation:
swiperProject = new Swiper('.headline__container', {
direction: 'vertical',
autoplay: {
delay: 5000,
disableOnInteraction: false,
},
speed: 500,
lazy: true,
preloadImages: false,
pagination: {
el: '.swiper-pagination',
clickable: true,
},
breakpoints: {
320: {
// I tried with allowTouchMove: false, allowSlidePrev/next: false too, but nothing
touchRatio: 0,
shortSwipes: false,
longSwipes: false
},
992: {
touchRatio: 1,
shortSwipes: true,
longSwipes: true
}
}
});
Basically, my goal is to deactivate gestures on mobile in order to prevent the scrolling blocking of the body itself - these slides are currently set on vertical mode.
Anyone know how to achieve this? I read the above tries on other questions, but they don't helped me.
Thanks in advance for any help.
For now I forced pointer-events: none on mobile. Hope in the next future the team will fix these API options soon.
Thanks everyone for the attention.
I've downloaded the latest version of TableSorter and the filter widget.
Unfortunately the filters are not working. The error when I apply a filter is:
'Uncaught TypeError: Cannot read property 'enter' of undefined'. When I debug the debugger says tskeyCodes is undefined.
I apply the scripts in a MVC Azure Application.
The script of the table sorter looks like this:
$(".tablesorter").tablesorter({
widgets: ["zebra", "filter"],
widgetOptions: {
filter_cssFilter: '',
filter_childRows: false,
filter_hideFilters: false,
filter_ignoreCase: true,
filter_saveFilters: true,
filter_searchDelay: 300,
filter_startsWith: false,
filter_hideFilters: false,
filter_external: 'input.search',
filter_reset: '.reset',
filter_functions: {
// Add select menu to this column
0: true,
1: true,
4: true
},
}
});
This behavior is present in Chrome as well as in IE.
What am I doing wrong?
I want my Extjs data view to always select at least one record. According to the document I can use mode: 'SINGLE' with allowDeselect: false to achieve this result.
{
itemId: 'data-view',
xtype: 'dataview',
trackOver: true,
overItemCls: 'data-over',
selectedItemCls: 'data-selected',
mode: 'SINGLE',
allowDeselect: false,
selModel: {
mode: 'SINGLE',
allowDeselect: false
},
itemSelector: me.selector,
tpl: me.tpl
},
I put mode and allowDeselect in two places as you can see, but it won't work.
That is, I can still click on any blank space in the data view, and the Selected item will be Deselected.
Can you tell me how to force allowDeselect to be false properly?
It must be a bug. As a workaround install this listener:
listeners:{
beforecontainerclick:function() {
return false;
}
}
I am building a caroufredsel for a responsive website (with only 3 states: 960px, 720px and 320px).
It's working great when you load the page in one of these states. It shows the correct number of items (3, 2 and 1 respectively).
But, when you resize the window, the number of visible items doesn't change. I was thinking about a $(window).resize() call, but I can't find how you can adjust the Caroufredsel settings after it is initialized.
$('#caroufredsel').carouFredSel({
infinite: true,
auto: false,
pagination: false,
prev: {
button: '#prev',
key: 'left'
},
swipe: {
onTouch: true,
onMouse: true
},
next: {
button: '#next',
key: 'right'
},
items: {
visible: 'variable'
}
});
What you need to do in your resize-callback is the following:
var $carouselContainer = $('#caroufredsel');
var resizeCallback = function() {
var showThatManyItems = 3; // determine the number of items to be shown depending on viewport size
$carouselContainer.trigger('configuration', [
'items', {
visible : showThatManyItems
}
], true);
}
If I'm not mistaken, don't you need "responsive:true," as one of the parameters?