I've been trying to find an answer to this problem for the last 24 hours and couldn't find a way to resolve this. Here it is:
I'm using MVC architecture with ExtJS 4. I have a tabpanel that has some grid as items. When these grids load, they do not have a vertical scrollbar, even though I set autoScroll to 'true' and their content is bigger than the screen can show. Every post I read about this problem was resolved setting the grid's parent layout to 'fit', but, as you can see below, I already done it and still not have a scrollbar... If I define a height to the grid, the scrollbar works perfectly, but I need it to work with different heights... I belive I might have a overnesting problem, but I just started developing with ExtJS some days ago and it stills a little confusing to me...
The question is: how can I make this structure work with autoScroll?
SO won't let me post an image here as my reputation is lower than 10, so you can find my app's structure here
Please note that I wrote "layout: 'fix'" in the image, but I meant "layout: 'fit'" :)
This is my Main view, which has 2 panels. The 'center' one is where I load the tabpanel that has the grid.
Ext.define('MyApp.view.Main', {
extend: 'Ext.container.Container',
requires:[
// 'Ext.tab.Panel',
// 'Ext.layout.container.Border',
'MyApp.view.Menus'
],
xtype: 'app-main',
layout: {
type: 'border'
},
items: [
{
region: 'north',
xtype: 'panel',
padding: '5 5 0 5',
title: 'MyApp',
items: {
xtype: 'menus'
}
},
{
region: 'center',
itemId: 'centerPanel',
xtype: 'panel',
padding: 5,
layout: 'fit'
}
]
});
This is the view that have the fieldset and the tabpanel as items:
Ext.define('MyApp.view.licencas.List', {
extend: 'Ext.form.Panel',
xtype: 'licencaslist',
title: 'Licenças de software',
border: false,
items: [
{
xtype: 'fieldset',
title: 'Dados do Veículo',
margin: 5,
items: [
{
xtype: 'combobox',
anchor: '100%',
valueField: 'id',
displayField: 'descricao',
store: 'ComboEmpresas',
typeAhead: true,
queryMode: 'local',
name: 'empresa',
fieldLabel: 'Empresa'
},
{
xtype: 'combobox',
editable: false,
valueField: 'id',
displayField: 'descricao',
store: 'ComboSoftwares',
queryMode: 'local',
name: 'software',
fieldLabel: 'Software'
},
{
name: 'valor',
fieldLabel: 'Valor empresa:',
xtype: 'numberfield',
minValue: 0,
maxValue: 100000,
allowDecimals: true,
disabled: true,
},
{
name: 'contrato',
fieldLabel: 'Contrato:',
xtype: 'textfield',
disabled: true,
},
{
name: 'demonstracao',
xtype: 'checkbox',
fieldLabel: 'Demonstração',
disabled: true,
}
]
},
{
xtype: 'licencastabpanel',
border: false,
margin: 5
}
],
initComponent: function() {
this.callParent(arguments)
}
});
And finally this is the grid where I need the autoScroll property...
Ext.define('MyApp.view.licencas.placas.List', {
extend: 'Ext.grid.Panel',
xtype: 'licencasplacaslist',
store: 'EmpresaVeiculos',
border: false,
forceFit: true,
autoScroll: true,
plugins: [new Ext.grid.plugin.CellEditing({
clicksToEdit: 1,
})],
dockedItems: [
{
dock: 'top',
xtype: 'toolbar',
items: [
{
text: 'Alterar todos',
iconCls: 'money-16',
action: 'alterartodos',
xtype: 'button'
},
'->',
{
xtype: 'trigger',
name: 'searchfieldLicencasPlacas',
itemId: 'searchfieldLicencasPlacas',
emptyText: 'Filtrar por placa...',
width: '500px',
hideLabel: true,
selectOnFocus: true,
triggerCls: 'x-form-search-trigger'
}
]
}
],
columns: [
Ext.create('Ext.grid.RowNumberer'),
{
text: "Placa",
dataIndex: 'placa',
width: 70
},
{
text: "Serial",
dataIndex: 'serial',
width: 70
},
{
text: "Condutor",
dataIndex: 'condutor'
},
{
text: "Ativo",
dataIndex: 'ativo',
width: 50
},
{
text: "Data Início",
dataIndex: 'data_inicio',
format: 'd.m.Y',
width: 60
},
{
text: "Data Fim",
dataIndex: 'dt_fim',
format: 'd.m.Y',
width: 60,
editor: {
xtype: 'datefield',
format: 'd.m.Y'
}
},
{
text: "Contrato",
dataIndex: 'contrato',
width: 70,
editor: {
xtype: 'textfield'
}
},
{
text: "Software",
dataIndex: 'valor_software',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comunicação",
dataIndex: 'valor_comunicacao',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: "Comodato",
dataIndex: 'valor_comodato',
renderer: 'usMoney',
width: 70,
editor: {
xtype: 'numberfield',
minValue: 0,
maxValue: 1000,
allowDecimals : true
}
},
{
text: 'Empresa para faturar',
dataIndex: 'fatura',
width: 200,
editor:
{
xtype: 'combobox',
displayField: 'descricao',
valueField: 'descricao',
store: 'ComboFaturas',
name: 'software',
queryMode: 'local'
}
}
],
initComponent: function() {
this.callParent(arguments)
}
});
Please, note that I removed all "layout: 'fit'" (except from the Main view, which has influence over other views) from the code as it wasn't working anyway... :)
Please, let me know if I need to provide you any extra information. I tried to make it easier to understand with the image below.
Thank you guys!
