Develop Reference

ExtJS 6 TreePanel scrolling not working

I'm stuck trying to make my treepanel scrollable in both ways.
Heres my code: https://fiddle.sencha.com/#fiddle/13cb
I could set scrollable: true in my wrapping panel, but this would not solve the horizontal scrolling problem.
Furthermore with this approach the combobox scroll up too. But I want only the treepanel to scroll horizontally and vertically. How can I achieve that?
Thanks in advance

I am not sure whether we can achieve exactly what you want. But let's try.
To get the vertical scrollbars working, you have to define a height on the treepanel. As of now, the treepanel resizes dynamically to the height of its content, since no height was defined for it. Since even the parent panel has no height defined, giving the height as percent also won't work, but e.g. height:500 would. If you require the layout to float around when the browser window is resized, have a look at the vbox or border layouts for the parent panel.
To get the horizontal scrollbars working, you have to know how grid columns work. You have not defined a columns configuration, which makes the treepanel assume that you want a single column taking up 100% of the width of the treepanel:
if (!me.columns) {
if (me.initialConfig.hideHeaders === undefined) {
me.hideHeaders = true;
}
me.addCls(me.autoWidthCls);
me.columns = [{ // define columns configuration with a single column
xtype : 'treecolumn', // the column should be a treecolumn
text : 'Name',
flex : 1, // and take up 100% of the width of the panel
dataIndex: me.displayField // and use the displayField as
}];
}
You cannot make columns take up the width required by their content automatically. But you could e.g. listen to nodeexpand and nodecollapse events and call column.autoSize().

How to add a fixed positioned summary row to the grid with infinite scroll

I have a grid with infinite scrolling.Is it possible to add a summary row to the grid with fixed position i.e bottom of the grid.
Whenever the grid is scrolled to the threshold the store loads with new page data,at the same time summary data should also be refreshed.
Any ideas or suggestions?
ExtJs version : 4.1

Take a look at this: https://stackoverflow.com/a/16549178/2085604
You can use the dock config to fix your row:
features: [{
ftype: 'summary',
dock: 'bottom'
}],
I don't know if this would work with infinite scroll. You can try.
API and example here: http://docs.sencha.com/extjs/4.2.0/#!/api/Ext.grid.feature.Summary

Customizing Ext.js grid panel's title

Is there a way to customize the title of ext.js grid panel (or is there a more generic way of customizing panel title) by adding custom controls to it, and not tool buttons?
I am tring to add a search field to the title, but with current existing implementation (found in the ux/grid example) it is shown how filter can be added to the drop down menu of the grid's title, and not to the title itself, which is what I am trying to achieve..
Any clue?

Have a look at the grid panel's header config, where you can set any configuration option of Ext.panel.Header. As it is a container, you can just specify its items there:
header: {
title: 'Test',
titlePosition: 0,
items: [{
xtype: 'textfield'
}]
}
Also check out this fiddle.

Header is a container with hbox layout so you can add/remove items to it as to any other container. You can test it (for example) here: http://extjs.eu/apps/saki-writable-grid/ by typing
Ext.ComponentQuery.query('maingridview')[0].getHeader().add({xtype:'textfield'});
in the console. The textfield appears at the header right.
As to grid filtering, see Grid Search Plugin that can be added also to the grid header.

How to customize pagination toolbar in extjs 4

i have a dataview and i am showing some images inside it. Now i am doing pagination for the dataview. I dont need the default paging bar using extjs. What i need is a customised one. That is there will be an icon for showing previos page on the left side of dataview and an icon indicating next page on the right page in between two icons i have to show the page count like "1,2,3,4,5".
Is it possible to customize the default paging bar in this way?
{
xtype: 'pagingtoolbar',
store: store,
dock: 'bottom',
displayInfo: false,
border:0
}

How can I prevent ExtJs menu container from spilling out of the body?

I am using ExtJs 4.1.1. I am using body layout, the North region of which has a top toolbar. The top toolbar has a splitButton on it's extreme right.
Problem: Sometimes when the menu item has long text the container of menu items spills out of the body and it appears truncated.
I want to ensure that the menu text and the entire menu container is always visible. How can I achieve this?
Update: Can I configure the menu to unfold leftwards instead of right? This will take care of this particular situation.

On the menu component, try adding:
listeners: {
afterrender: function(component) {
// Hide menu and then re-show so that alignment is correct.
component.hide();
component.show();
}
}
See here