PDA

View Full Version : Paging grid in tab with horizontal autoScroll



Mycoding
5 Jul 2010, 7:51 AM
Please give advice.
In Paging grid in tab doesn't scroll horizontal.
But usual grid in other tab does scroll horiazontal.
http://vreshenie.ru/grid.PNG
http://vreshenie.ru/grid-2.PNG
I tried to use autoScroll in tab in element with tab panel
with params


defaults:{ autoScroll:true },


Now I use defaults:{ autoScroll:true }, But that still doesn't work howerer the other but usal grid works


Ext.getCmp('center').add({
title:'????????????',
iconCls:'smallImageUsers',
closable:true,
padding:'5 5 5 5',
items: [{
xtype: 'grid',
store: store,
autoHeight:true,
columns: [
{header: 'ID', dataIndex: 'id', renderer: user_id_renderer,width:20},
{header: 'Email', dataIndex: 'email',renderer: email_renderer,width:100},
{header: '??????', dataIndex: 'parol', renderer: parol_renderer,width:100},
{header: '?????? ?????????', dataIndex: 'firstVisit', renderer: firstVisit_renderer,width:100},
{header: '??????? ?????????', dataIndex: 'prevVisit', renderer: prevVisit_renderer,width:100},
{header: 'IP', dataIndex: 'ip', renderer: ip_renderer,width:100},
{header: '?????????? ? ??????? ???????????? ??? ?????? ?????????', dataIndex: 'dataOfUserSystem', renderer: dataOfUserSystem_renderer,width:100},
{header: '?????????? ?????', dataIndex: 'money', renderer: money_renderer,width:100},
{header: '??????? ?? ???? ?????', dataIndex: 'thisMonthPaid', renderer: thisMonthPaid_renderer,width:20},
{header: '??? ?????????? ??????', dataIndex: 'allMonthPaid', renderer: allMonthPaid_renderer,width:100},
{header: '???', dataIndex: 'ban', renderer: ban_renderer,width:20},
{header: '??? ???????? + ? ????????', dataIndex: 'rateIdPlus', renderer: rateIdPlus_renderer,width:100},
{header: '??? ???????? - ? ????????', dataIndex: 'rateIdMinus', renderer: rateIdMinus_renderer,width:100},
{header: '?????????? + ? ????????', dataIndex: 'rateNPlus', renderer: rateNPlus_renderer,width:20},
{header: '?????????? - ? ????????', dataIndex: 'rateNMinus', renderer: rateNMinus_renderer,width:20},
{header: '??? ?? ?????', dataIndex: 'banMonth', renderer: banMonth_renderer,width:20}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: 'No topics to display'
})
}]
}).show();
}

Animal
5 Jul 2010, 8:03 AM
You are adding a Panel CONTAINING a GridPanel instead of just doing what the API docs say, and adding a GridPanel.

Mycoding
5 Jul 2010, 8:14 AM
Please can you give me a reference what to read to fix it

Animal
5 Jul 2010, 9:16 AM
add the GridPanel

How can I say it simpler?

Mycoding
5 Jul 2010, 9:53 AM
but

xtype:'gridpanel'
doesn't work

Animal
5 Jul 2010, 11:42 AM
Of course not.

"xtype:'gridpanel' on its own? Of course it means nothing.

Mycoding
5 Jul 2010, 11:47 AM
But how then?
Could you be so kind to give me advice?
Something like this?


Ext.getCmp('center').add( new Ext.GridPanel({
title:'????????????',
iconCls:'smallImageUsers',
closable:true,
padding:'5 5 5 5',
items: [{
xtype: 'grid',
store: store,
autoHeight:true,
columns: [


I'm not so good in ExtJS yet, please give me advice.

Animal
5 Jul 2010, 11:52 AM
Uhhhhh!!!!


WHY?

WHY DO YOU WANT to put the grid INSIDE something???

ADD.

A GRID.

TO THE TABPANEL.

That's it, there's nothing else I can say.

Add the grid to the TabPanel.

Not something which CONTAINS a grid.

A GRID!

Mycoding
6 Jul 2010, 11:01 PM
I did as you said, thanks for advice.I didn't understand the idea,
but hotrizontal scroll doesn't work still


Ext.getCmp('center').add(
new Ext.grid.GridPanel({
title:'????????????',
iconCls:'smallImageUsers',
layout:'fit',
closable:true,
padding:'5 5 5 5',
store: store,
autoHeight:true,
autoScroll:true,
columns: [
{header: 'ID', dataIndex: 'id', renderer: user_id_renderer,width:20},
{header: 'Email', dataIndex: 'email',renderer: email_renderer,width:100},
{header: '??????', dataIndex: 'parol', renderer: parol_renderer,width:100},
{header: '?????? ?????????', dataIndex: 'firstVisit', renderer: firstVisit_renderer,width:100},
{header: '??????? ?????????', dataIndex: 'prevVisit', renderer: prevVisit_renderer,width:100},
{header: 'IP', dataIndex: 'ip', renderer: ip_renderer,width:100},
{header: '?????????? ? ??????? ???????????? ??? ?????? ?????????', dataIndex: 'dataOfUserSystem', renderer: dataOfUserSystem_renderer,width:100},
{header: '?????????? ?????', dataIndex: 'money', renderer: money_renderer,width:100},
{header: '??????? ?? ???? ?????', dataIndex: 'thisMonthPaid', renderer: thisMonthPaid_renderer,width:20},
{header: '??? ?????????? ??????', dataIndex: 'allMonthPaid', renderer: allMonthPaid_renderer,width:100},
{header: '???', dataIndex: 'ban', renderer: ban_renderer,width:20},
{header: '??? ???????? + ? ????????', dataIndex: 'rateIdPlus', renderer: rateIdPlus_renderer,width:100},
{header: '??? ???????? - ? ????????', dataIndex: 'rateIdMinus', renderer: rateIdMinus_renderer,width:100},
{header: '?????????? + ? ????????', dataIndex: 'rateNPlus', renderer: rateNPlus_renderer,width:20},
{header: '?????????? - ? ????????', dataIndex: 'rateNMinus', renderer: rateNMinus_renderer,width:20},
{header: '??? ?? ?????', dataIndex: 'banMonth', renderer: banMonth_renderer,width:20}
],
bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: 'Displaying topics {0} - {1} of {2}',
emptyMsg: 'No topics to display'
})
})
).show();

http://vreshenie.ru/grid-1.PNG

Animal
6 Jul 2010, 11:41 PM
'center' being the ID of the TabPanel right? Because nobody can SEE your code.

Animal
6 Jul 2010, 11:42 PM
autoHeight:true,
autoScroll:true,

The API docs tell you not to use these. Remove them.

Mycoding
6 Jul 2010, 11:43 PM
Yes you are right.
The code is so big, that is why I don't write it here.



},{
id:'center',
region: 'center',
xtype: 'tabpanel',
defaults:{ autoScroll:true },
activeTab: 0,
items: [{
title: '? ?????',
autoLoad:'requests/about.php',
padding:'5 5 0 5'
},{
title: '???????',
xtype: 'grid',
store:store,
stripeRows: true,
columns: [
new Ext.grid.RowNumberer({width: 30}),
{header: "???????", dataIndex: 'news',width:700,renderer:news_renderer}
]
}]
},{

Mycoding
7 Jul 2010, 12:01 AM
Without that params grid is to minimal that nothing is visible

Animal
7 Jul 2010, 12:14 AM
Nope.

Without those params, the GridPanel is sized EXACTLY TO FIT inside the TabPanel.

That's how TabPanel works. It's a CARD layout.

You MUST learn about layouts if you are to ever complete an ExtJS project.

Mycoding
7 Jul 2010, 9:56 AM
Can you advice me something to read about layout?
I'm reading 'Learning ExtJS' very good book, maybe something else?

Animal
7 Jul 2010, 9:59 AM
Check out http://extjsinaction.com/

Also, the upcoming new edition of Learning ExtJS looks like it's going to be good. Updated for Ext 3.

Illiarian
16 Jul 2010, 4:16 AM
Well, actually, sometimes you do want a grid inside something and you want that grid to have scroll horizontally. A grid inside a form, or in a complex layout.

Animal
16 Jul 2010, 4:43 AM
Yes.

Mycoding
21 Jul 2010, 10:33 AM
Thanks a lot Animal.
I remove autoHeight in similar code an it works.
Horizontal scroll.