Я пытался найти ответ на эту проблему в течение последних 24 часов и не смог найти способ ее решить. Вот:
Я использую архитектуру MVC с ExtJS 4. У меня есть панель вкладок, в которой есть сетка в качестве элементов. Когда эти сетки загружаются, у них нет вертикальной полосы прокрутки, хотя я установил для autoScroll значение «true», и их содержимое больше, чем может отображаться на экране. Каждое сообщение, которое я читал об этой проблеме, было решено путем установки родительского макета сетки на «по размеру», но, как вы можете видеть ниже, я уже сделал это и до сих пор не имею полосы прокрутки... Если я определяю высоту сетки, полоса прокрутки работает отлично, но мне нужно, чтобы она работала с разной высотой... Я думаю, у меня может быть проблема с чрезмерной вложенностью, но я только начал разрабатывать с ExtJS несколько дней назад, и это все еще немного сбивает меня с толку...
Вопрос: как мне заставить эту структуру работать с autoScroll?
SO не разрешает мне публиковать изображения здесь, так как моя репутация ниже 10, так что вы можете найти мой структура приложения здесь
Обратите внимание, что на изображении я написал «layout: 'fix'», но имел в виду «layout: 'fit'» :)
Это мой основной вид, который имеет 2 панели. В «центре» я загружаю вкладку с сеткой.
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'
}
]
});
Это представление, в котором набор полей и панель вкладок являются элементами:
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)
}
});
И, наконец, это сетка, где мне нужно свойство autoScroll...
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)
}
});
Обратите внимание, что я удалил из кода все "layout: 'fit'" (кроме основного представления, которое влияет на другие представления), так как оно все равно не работало... :)
Пожалуйста, дайте мне знать, если мне нужно предоставить вам дополнительную информацию. Я попытался упростить понимание с помощью изображения ниже.
Спасибо вам, ребята!
