PDA

View Full Version : Gird always shows scrollbars



dekely
17 Nov 2013, 8:45 PM
Hi All,
My grid always shoes scrollbars. how can I removed them?



Ext.define('Jacada.system.ui.tasks.TasksGrid', {
extend: 'Ext.grid.Panel',


itemId: 'tasksGrid',
autoHeight: true,
border: false,
autoScroll: true,
forceFit: true,
columns: [
{ text: getLocalizedValue('taskId'), dataIndex: 'taskId' },
{ text: getLocalizedValue('name'), dataIndex: 'name' , flex: 1, renderer: taskDataCellRenderer},
{ text: getLocalizedValue('subject'), dataIndex: 'subject' , flex: 1, renderer: taskDataCellRenderer},
{ text: getLocalizedValue('status'), dataIndex: 'status' , renderer: taskDataCellRenderer, width: 100},
{ text: getLocalizedValue('priority'), dataIndex: 'priority' , renderer: taskDataCellRenderer},
{ text: getLocalizedValue('owner'), dataIndex: 'owner' , renderer: taskDataCellRenderer, width: 100},
{ text: getLocalizedValue('created'), dataIndex: 'created', renderer: taskDataCellRenderer, width: 120}
],

scottmartin
18 Nov 2013, 10:36 AM
What version of Ext are you using?

Please note that autoScroll has no affect on the grid. This is only for parent containers.
I also recommend using flex instead of forcefit. This will help if you cannot upgrade.

dekely
18 Nov 2013, 2:40 PM
I'm using 4.2.1
Looks like forceFit does affect because the moment I add it I see scrollbars.
As you can see from my snippet, I use flex for some of the columns and fix side for others.
Even when you use flex, I believe at some point you do want to see scrollbars.

scottmartin
18 Nov 2013, 3:25 PM
Can you put together a small working example?
https://fiddle.sencha.com/#home

You can start with the grid example in the API

Do you have it in a parent?

dekely
18 Nov 2013, 9:22 PM
Thanks Scott.
A simple example on fiddle works.
I'll try to dig to find the issue.

dekely
1 Dec 2013, 4:28 AM
Hi Scott,
I think the problem is with vbox, I can't see grid scrollbars

https://fiddle.sencha.com/#fiddle/1l3

(https://fiddle.sencha.com/#fiddle/1l3)

scottmartin
1 Dec 2013, 7:46 AM
Do you mean like this?



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.panel.Panel', {
layout: {
type:'vbox', align:'stretch'},
renderTo: Ext.getBody(),
height: 200,
autoScroll: true, // scroll the panel
title: 'Simpsons',
width: 300,
items: [
{title: 'panel', html: 'some body'},
Ext.create('Ext.grid.Panel', {

title: 'where are my scrollbars?',
forceFit: true, // would be better to use column flex and not forcefit
// autoScroll: true, // provides no use in grid; scrollbars are auto and for parent containers
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]

})]

});




}
});

scottmartin
1 Dec 2013, 7:48 AM
Or like this, scrollbar in the grid:



Ext.application({
name : 'Fiddle',

launch : function() {

Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa@simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart@simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Homer', "email":"home@simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});


Ext.create('Ext.panel.Panel', {
layout: {
type:'vbox', align:'stretch'},
renderTo: Ext.getBody(),
//height: 200, // no height
title: 'Simpsons',
width: 300,
items: [
{title: 'panel', html: 'some body'},
Ext.create('Ext.grid.Panel', {

title: 'where are my scrollbars?',
forceFit: true, // would be better to use column flex and not forcefit
// autoScroll: true, // provides no use in grid; scrollbars are auto
height: 200, //height is needed
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
]

})]

});




}
});

dekely
1 Dec 2013, 10:58 AM
The height was missing.
thanks.

but I don't want to specify fixed height? I want the grid to take 100%

evant
1 Dec 2013, 1:03 PM
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa@simpsons.com",
"phone": "555-111-1224"
}, {
'name': 'Bart',
"email": "bart@simpsons.com",
"phone": "555-222-1234"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Homer',
"email": "home@simpsons.com",
"phone": "555-222-1244"
}, {
'name': 'Marge',
"email": "marge@simpsons.com",
"phone": "555-222-1254"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
Ext.create('Ext.panel.Panel', {
layout: {
type: 'vbox',
align: 'stretch'
},
renderTo: Ext.getBody(),
height: 200,
title: 'Simpsons',
width: 300,
items: [{
title: 'panel',
html: 'some body'
},
Ext.create('Ext.grid.Panel', {
flex: 1,
title: 'where are my scrollbars?',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}]
})]
});
}
});