Develop Reference

extjs 6 modern combobox with infinite scrolling

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.

need to customize features for grid and collapsible: true is not working

I need help that expands/collapse on clicking the '+' or '-'. Tried collapsible: true, but it is not working..
var panel = Ext.create('Ext.grid.Panel', {
...
columns: [
{ item a }
{ item b }
],
features: [{
ftype: 'grouping',
hideGroupedHeader: true,
//collapsible:true;
groupHeaderTpl: [...]
}]
})

the config option is (like you mentiond): 'collapsible: true', which is true by default.
(see: http://docs.sencha.com/extjs/6.0/6.0.0-classic/#!/api/Ext.grid.feature.Grouping-cfg-collapsible )
Example Fiddle with Grouping:
https://fiddle.sencha.com/#fiddle/sha
Can you create a fiddle to reproduce your issue?
Did you add a groupField to your store?
Do you see any errors in your developer console?
Regards,

ExtJS 4 Grid unwanted scrolling on load and node selection

I have a problem with the ExtJS 4 grid. I am using ExtJS 4.2.1, and whenever I load data into my grid using the loadRawData function, it automatically scrolls to the bottom, or near the bottom. Also, I am using grouping in the grid, and whenever I expand or collapse the node, it auto scrolls to the bottom again. This is really frustrating, and I can't seem to find a solution. I tried any solutions in this post from the Sencha forums, but nothing seemed to work.
This is my grid config:
gridPanel = new Ext.grid.Panel({
header: false,
title: 'Resultset',
id: 'resultTable',
width: 400,
split: true,
collapsible: true,
collapseMode: 'mini',
store: {
model: 'resultset',
autoLoad: false,
pageSize: 100,
proxy: {
type: 'ajax',
url: STORE_URL,
reader: {
type: 'json',
root: 'rows'
}
},
groupField:'tid'
},
features: [{ftype:'grouping'}],
deferRowRender: false,
columns: createColumns(),
selModel: {
checkOnly: true,
moveEditorOnEnter: false,
width: 20,
mode: 'MULTI'
},
selType: 'rowmodel',
tbar: [ createMenubar() ],
bbar:[ createPagingBar() ],
/*viewConfig: {
preserveScrollOnRefresh: true
}*/
});
And then when I load the data, I just do something like this:
var store = gridPanel.getStore();
store.loadRawData(data, false);
Any help would be appreciated!

sencha touch ListPaging plugin "load more" button position issue

I'm facing an issue regarding the position of the Load More... button in sencha touch2. Here, the Load More button is added using ListPaging plugin and from the Ext.plugins.Listpaging docs it states:
Adds a Load More button at the bottom of the list. When the user
presses this button, the next page of data will be loaded into the
store and appended to the List.
But, here, the list item with load more button appears at the top of the list, not to the bottom.
See my code here:
Ext.define('MyApp.view.MyLIst', {
extend : 'Ext.dataview.List',
xtype : 'mylist',
id : 'myList' ,
requires : [Ext.data.Store','Ext.plugin.ListPaging'],
config : {
width : '100%',
height : '100%',
loadingText : 'Loading data...',
emptyText : 'No Members',
itemTpl : '<div class="mylisttitle">{title}</div>',
store : 'mylistStore',
plugins : [
{
xclass : 'Ext.plugin.ListPaging',
autoPaging : false,
loadNextPage: function() {
console.log('Load more button clicked');
// fire event here
}
}],
masked : false,
mode : 'SINGLE',
scrollable : {
direction : 'vertical',
directionLock : true
}
}
});
and see the result below:
Any idea how could I show the same button at the bottom of the list?
Thanks
EDIT: I had posted the issue in senchatouch forum to, still awaiting a solution, you can see it here

Kind of strange. Can you try removing these properties (width, height and scrollable) and adding "layout:fit" to the parent of this list.

If you have any custom css try disabling it. Or if you are able to reproduce the same issue in a fiddle it would be more easier to fix. Here is a work demo jsfiddle.net/blessenm/9ypwk
Ext.application({
launch: function () {
Ext.define('TweetStore', {
extend: 'Ext.data.Store',
config: {
fields: ['from_user', 'profile_image_url', 'text', 'created_at'],
pageSize: 25,
autoLoad: true,
proxy: {
type: 'jsonp',
url: 'http://search.twitter.com/search.json',
pageParam: 'page',
limitParam: 'rpp',
extraParams: {
q: 'sencha'
},
reader: {
type: 'json',
rootProperty: 'results'
}
}
}
});
Ext.define('MyApp.list.List', {
extend: 'Ext.List',
config: {
useSimpleItems: false,
variableHeights: true,
infinite: true,
disableSelection: true,
allowDeselect: false,
store: Ext.create('TweetStore'),
loadingText: 'Loading data...',
emptyText: 'No Members',
plugins: [{
xclass: 'Ext.plugin.ListPaging',
autoPaging: false
}],
itemTpl: Ext.create('Ext.XTemplate',
'<div>{text}</div>'),
masked: false,
mode: 'SINGLE',
scrollable: {
direction: 'vertical',
directionLock: true
}
}
});
Ext.define('MyApp.list.Container', {
extend: 'Ext.Container',
config: {
fullscreen: true,
layout: 'vbox',
items: [{
xtype: 'titlebar',
title: 'Load More Plugin',
}, {
xclass: 'MyApp.list.List',
flex: 1
}]
}
});
Ext.create('MyApp.list.Container');
}
});

Solved it:
I was missing this : infinite: true
Load more button now appears at the bottom .
Thanks #blessenm for the working Demo :-)

Reordering rows within a grid Ext JS 4

I want to be able to reorder the rows within a single grid. Im relatively new to extjs and have tried searching for this but all the resources i find are for older ext js versions and some of properties defined in those aren't valid anymore. eg- http://www.vinylfox.com/getting-started-with-grid-drag-drop/
xtype: 'grid',
id: 'row-grid',
hideHeaders: true,
store: 'SelectedRowStore',
//enableDragDrop: true,
//ddGroup: 'rowgrid-dd',
columns: [
{
header: 'Rows',
flex: 1,
sortable: false,
dataIndex: 'DisplayName'
},
{
id: 'button-column',
dataIndex: 'ID',
sortable: true,
hideable: false,
width: 35,
renderer: PA.common.RendererHelper.renderButtonForAddRowMainGrid
}
]
I'd really appreciate any help/advice on this issue.

Take a look at the grid to grid drag-n-drop example. It works with two grids, but I'm sure it can be easily modified to allow rearranging rows within one grid.

You can follow the sencha sample as Rene said or follow this:
Add this to your grid:
viewConfig: {
plugins: {
ptype: 'gridviewdragdrop',
containerScroll: true,
dragGroup: 'someuniquenameforyourgrid',
dropGroup: 'someuniquenameforyourgrid'
},
},
And, only if you need some listener to do some anction, add (inside viewConfig):
listeners: {
drop: 'onDropGrid'
}
and event handler code in your controller:
onDropGrid: function (node, data, dropRec, dropPosition) {
...
}