PDA

View Full Version : scrolling toolbar on a grid panel



TopoFurnier
9 Oct 2012, 12:23 PM
Hi All,
I have a grid panel with a toolbar that contains several buttons for each column.
The table is being built out of a json metada, and I keep the toolbar updated by having add/remove listeners on the table.
My problem is that the scroll bar appears for the grid doesnt affect the toolbar. I would like to move my buttons simultaneously with the grid.
I have seen similar ideas bieng done for two grids, and other stuff like that:
http://www.sencha.com/forum/showthread.php?139084-Extjs-4-grid.getView().on(-bodyscroll-function(event-target)

N (http://www.sencha.com/forum/showthread.php?139084-Extjs-4-grid.getView().on(-bodyscroll-function(event-target))ow im trying to make this work but Im having a hard time trying to move the buttons since the toolbar doesnt seem to have a lot of support for scrolling.

Does somebody know how to pull this one of?

Am I making too much of a big deal out of this? Is there any easier approach?
Thanks a lot,
Topo

scottmartin
10 Oct 2012, 10:09 AM
Can I get a screen of what you have in place? I am not sure i understand.

Would the toolbar scroll like a record?

Scott.

TopoFurnier
11 Oct 2012, 6:35 AM
Hi Scott,
I have a grid panel with a top bar with some buttons. Every buttons is alaigned with a column (semantic reasons), the issue is that when you scroll(horizontal) the gridpanel the toolbar remains still.

So I want to be able to scroll the gridpanel and the toolbar at the sametime, maybe the correct approach for this is with a plugin but I went for a something simplier - at least easier.
A little pic:
39294
The solution that I came up with is to disable the scroll on the gridpanel, and to put it on a container panel thar has a scrollbar that is able to move the whole innerpanel with header included.
There is another twist to the story,
It worked well for a moments but I think I screwed up with some property:
-scrollbar dont render on the panels they should
-borders are rendered on every panel when I am explicity telling them not to.
This is the code for the panels that later are renderer as a single 'widget.userlist' by a viewport.



Ext.define('SDweb.view.user.List' ,{ extend: 'Ext.Container',
alias : 'widget.userlist',
requires:['SDweb.view.user.StaticList',
'SDweb.view.user.NormalList'],

layout: {
type: 'hbox',
align: 'stretch'
},

scrollable: false,
autoScroll:false,
border: false,
height: 400,
width: 800,

initComponent: function(arguments){
this.lockedList = Ext.create('widget.lockedlist');
this.normalList = Ext.create('widget.normallist');


this.wrapedList = new Ext.panel.Panel({
autoScroll: true,
scrollable: true,
frame:false,
layout: {
padding:0,
autoHeight: true,
border: false,
autoSize: true
},
items:[this.normalList]
});

this.items=[this.lockedList,this.wrapedList];

this.callParent(arguments);
}
});

Ext.define('SDweb.view.user.StaticList',{
extend: 'Ext.grid.Panel',
alias: 'widget.staticlist',
store: 'UsersStore',

enableColumnMove:false,
enableColumnResize:false,
enableColumnHide:false,
disableSelection:true,
scrollable: false,
autoScroll:false,


columns : [ ],
initComponent: function(arguments){
this.dockedItems = [{
xtype: 'pagingtoolbar',
store: 'UsersStore',
dock: 'bottom'
}];

this.callParent(arguments);
}
});

Ext.define('SDweb.view.user.NormalList',{
extend: 'Ext.grid.Panel',
alias : 'widget.normallist',
requires:['SDweb.view.user.HeaderToolbar'],
store: 'UsersStore',

enableColumnMove:false,
enableColumnResize:false,
enableColumnHide:false,
disableSelection:true,
autoScroll:false,
scrollable: false,

columns : [ ],
initComponent: function(arguments){
this.dockedItems = [{
xtype: 'headertoolbar'
}];

this.callParent(arguments);
}
});



Any advice on how to disable every scroll except for the horizontal one on the 'wrapedList'?
and how can I remove EVERY border ?

Thanks,
Topo

scottmartin
11 Oct 2012, 6:42 AM
Before we pursue this, would you perhaps be interested in the following plugin?
https://market.sencha.com/users/68/extensions/95

This creates the editors in the grid below the column headers instead of a toolbar.

Scott.

TopoFurnier
11 Oct 2012, 7:01 AM
Hey Scott,
that is a great idea, but Ive already checked them out (and other plugins too) when started looking for something that I can reuse, and Since the client has some strange requirements for those inputs Ive decided to make my own.

BTW: I solved the the issue with the borders (missconfig the wrapper panel), but the scrollbars continue missbehaving.

Thanks

TopoFurnier
11 Oct 2012, 10:36 AM
Ive just fixed the scroll issue, turn out to be nested-width-related mistake.
Thanks anyways!
Topo

scottmartin
11 Oct 2012, 10:55 AM
Glad you got it working ... thank you for the update.

Scott