0
У меня есть окно, которое появляется для создания нового элемента ... когда я передаю запись для моих связанных полей, диалоговое окно заметно отстает. Запись - это всего лишь новая запись, которую я создал, поэтому она не имеет никаких связанных с ней значений, кроме того, что предоставляет инфраструктура по умолчанию. В this example, у меня есть 3 кнопки:ExtJS 5: производительность привязки полей отображения
- Первый создает диалог с новой записью ... это одна с наиболее заметным отставанием
- Второй создает диалог без каких-либо записей, так обновление связанных полей не происходит ... отставание здесь едва заметно
- Третий использует пройденный в записи, чтобы загрузить значения поля через форму ... отставание здесь сопоставимо со вторым один
Похоже, эта проблема с производительностью была addre ssed в ночных сборках для Ext JS 5 и 6, но у меня нет времени на обновление до 6, а 5.1.3 еще не вышло ... так что в основном, что я делаю неправильно? Есть ли что-нибудь, что я могу сделать для решения этой проблемы (кроме использования формы)? В идеале я все еще был бы обязательным, так как значения таблиц должны будут динамически меняться.
Делая небольшое исследование, я придумал this SO thread, который не появляется, чтобы облегчить некоторые из лаг, если я изменю displayfields к textfields, но я предпочел бы не сделать это, из-за семантики.
Ext.define('HeaderView', {
extend: 'Ext.panel.Panel',
alias: 'widget.headerView',
bodyPadding: '0 15',
border: true,
collapsible: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
margin: '0 20 0 0',
width: 515,
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 70,
hidden: true,
bind: {
hidden: '{isNew}'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'displayfield',
flex: 1,
cls: 'tightened-form-field'
},
items: [{
fieldLabel: 'Status',
bind: {
value: '{currentRecord.Status}'
}
}, {
fieldLabel: 'Condition',
bind: {
value: '{currentRecord.StatusCombinedCondition}'
}
}, {
fieldLabel: 'Type',
bind: {
value: '{currentRecord.Type}'
}
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'displayfield',
flex: 1,
cls: 'tightened-form-field'
},
items: [{
fieldLabel: 'Status Date',
bind: {
value: '{currentRecord.StatusDate}'
}
}, {
fieldLabel: 'Create Date',
bind: {
value: '{currentRecord.CreateDate}'
}
}, {
fieldLabel: 'Number',
bind: {
value: '{currentRecord.Number}'
}
}]
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
cls: 'summary-table',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1,
xtype: 'displayfield',
cls: 'right-align-field'
}
},
items: [{
cls: '',
items: [{
value: '',
cls: 'table-header'
}, {
value: 'Missed',
cls: 'table-header status-text-error-background'
}, {
value: 'Offered',
cls: 'table-header status-text-success-background'
}, {
value: 'Difference',
cls: 'table-header status-text-new-background'
}, {
value: 'Old Total',
cls: 'table-header status-text-error-background'
}, {
value: 'New Total',
cls: 'table-header status-text-success-background'
}]
}, {
items: [{
value: 'Total'
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.ValueTotal1}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.ValueTotal2}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.ValueTotal3}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.ValueTotal4}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.ValueTotal5}'
}
}]
}, {
items: [{
value: '# Things'
}, {
bind: {
value: '{currentRecord.CountTotal1}'
}
}, {
bind: {
value: '{currentRecord.CountTotal2}'
}
}, {
bind: {
value: '{currentRecord.CountTotal3}'
}
}, {
bind: {
value: '{currentRecord.CountTotal4}'
}
}, {
bind: {
value: '{currentRecord.CountTotal5}'
}
}]
}, {
items: [{
value: 'Points'
}, {
bind: {
value: '{currentRecord.Points1}'
}
}, {
bind: {
value: '{currentRecord.Points2}'
}
}, {
bind: {
value: '{currentRecord.Points3}'
}
}, {
bind: {
value: '{currentRecord.Points4}'
}
}, {
bind: {
value: '{currentRecord.Points5}'
}
}]
}, {
items: [{
value: 'Cost'
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.Cost1}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.Cost2}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.Cost3}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.Cost4}'
}
}, {
renderer: Ext.util.Format.usMoney,
bind: {
value: '{currentRecord.Cost5}'
}
}]
}]
}]
}, {
xtype: 'container',
maxWidth: 450,
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textarea',
name: 'Comment',
fieldLabel: 'Comment',
flex: 1,
bind: {
disabled: '{!isNew}'
}
}, {
xtype: 'textarea',
name: 'RejectReason',
fieldLabel: 'Reject Comment',
height: 70,
flex: 1,
hidden: true,
bind: {
hidden: '{isNew}',
disabled: '{!isNew}'
}
}]
}]
});
Ext.define('HeaderViewForm', {
extend: 'Ext.form.Panel',
alias: 'widget.headerViewForm',
bodyPadding: '0 15',
border: true,
collapsible: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'container',
layout: {
type: 'vbox',
align: 'stretch'
},
margin: '0 20 0 0',
width: 515,
items: [{
xtype: 'container',
layout: {
type: 'hbox',
align: 'stretch'
},
height: 70,
hidden: true,
bind: {
hidden: '{isNew}'
},
items: [{
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'displayfield',
flex: 1,
cls: 'tightened-form-field'
},
items: [{
fieldLabel: 'Status',
name: 'Status'
}, {
fieldLabel: 'Condition',
name: 'StatusCombinedCondition'
}, {
fieldLabel: 'Type',
name: 'Type'
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'displayfield',
flex: 1,
cls: 'tightened-form-field'
},
items: [{
fieldLabel: 'Status Date',
name: 'StatusDate'
}, {
fieldLabel: 'Create Date',
name: 'CreateDate'
}, {
fieldLabel: 'Number',
name: 'Number'
}]
}]
}, {
xtype: 'container',
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
defaults: {
xtype: 'container',
cls: 'summary-table',
layout: {
type: 'hbox',
align: 'stretch'
},
defaults: {
flex: 1,
xtype: 'displayfield',
cls: 'right-align-field'
}
},
items: [{
cls: '',
items: [{
value: '',
cls: 'table-header'
}, {
value: 'Missed',
cls: 'table-header status-text-error-background'
}, {
value: 'Offered',
cls: 'table-header status-text-success-background'
}, {
value: 'Difference',
cls: 'table-header status-text-new-background'
}, {
value: 'Old Total',
cls: 'table-header status-text-error-background'
}, {
value: 'New Total',
cls: 'table-header status-text-success-background'
}]
}, {
items: [{
value: 'Total'
}, {
renderer: Ext.util.Format.usMoney,
name: 'ValueTotal1'
}, {
renderer: Ext.util.Format.usMoney,
name: 'ValueTotal2'
}, {
renderer: Ext.util.Format.usMoney,
name: 'ValueTotal3'
}, {
renderer: Ext.util.Format.usMoney,
name: 'ValueTotal4'
}, {
renderer: Ext.util.Format.usMoney,
name: 'ValueTotal5'
}]
}, {
items: [{
value: '# Things'
}, {
name: 'CountTotal1'
}, {
name: 'CountTotal2'
}, {
name: 'CountTotal3'
}, {
name: 'CountTotal4'
}, {
name: 'CountTotal5'
}]
}, {
items: [{
value: 'Points'
}, {
name: 'Points1'
}, {
name: 'Points2'
}, {
name: 'Points3'
}, {
name: 'Points4'
}, {
name: 'Points5'
}]
}, {
items: [{
value: 'Cost'
}, {
name: 'Cost1',
renderer: Ext.util.Format.usMoney
}, {
name: 'Cost2',
renderer: Ext.util.Format.usMoney
}, {
name: 'Cost3',
renderer: Ext.util.Format.usMoney
}, {
name: 'Cost4',
renderer: Ext.util.Format.usMoney
}, {
name: 'Cost5',
renderer: Ext.util.Format.usMoney
}]
}]
}]
}, {
xtype: 'container',
maxWidth: 450,
flex: 1,
layout: {
type: 'vbox',
align: 'stretch'
},
items: [{
xtype: 'textarea',
name: 'Comment',
fieldLabel: 'Comment',
flex: 1,
bind: {
disabled: '{!isNew}'
}
}, {
xtype: 'textarea',
name: 'RejectReason',
fieldLabel: 'Reject Comment',
height: 70,
flex: 1,
hidden: true,
bind: {
hidden: '{isNew}',
disabled: '{!isNew}'
}
}]
}]
});
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'Status',
type: 'string'
}, {
name: 'StatusCombinedCondition',
type: 'string'
}, {name: 'Type', type: 'string'},
{name: 'StatusDate', type: 'string'},
{name: 'CreateDate', type: 'string'},
{name: 'Number', type: 'string'},
{name: 'ValueTotal1', type: 'string'},
{name: 'ValueTotal2', type: 'string'},
{name: 'ValueTotal3', type: 'string'},
{name: 'ValueTotal4', type: 'string'},
{name: 'ValueTotal5', type: 'string'},
{name: 'CountTotal1', type: 'string'},
{name: 'CountTotal2', type: 'string'},
{name: 'CountTotal3', type: 'string'},
{name: 'CountTotal4', type: 'string'},
{name: 'CountTotal5', type: 'string'},
{name: 'Points1', type: 'string'},
{name: 'Points2', type: 'string'},
{name: 'Points3', type: 'string'},
{name: 'Points4', type: 'string'},
{name: 'Points5', type: 'string'},
{name: 'Cost1', type: 'string'},
{name: 'Cost2', type: 'string'},
{name: 'Cost3', type: 'string'},
{name: 'Cost4', type: 'string'},
{name: 'Cost5', type: 'string'},
{name: 'Comment', type: 'string'},
{name: 'RejectReason', type: 'string'}]
});
Ext.define('MyController', {
extend: 'Ext.app.ViewController',
alias: 'controller.myView',
init: function() {
var me = this;
// push onto call stack to let view model breathe
setTimeout(function() {
me.getView().setLoading(false);
}, 1)
}
})
Ext.application({
name : 'Fiddle',
launch : function() {
Ext.create('Ext.button.Button', {
text: 'currentRecord',
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
layout: 'fit',
items: [{
xtype: 'headerView',
height: 500,
width: 500
}],
listeners: {
afterrender: function(view) {
view.setLoading(true)
}
},
viewModel: {
data: {
isNew: false,
currentRecord: Ext.create('MyModel')
}
},
controller: 'myView'
})
}
}
})
Ext.create('Ext.button.Button', {
text: 'no currentRecord',
renderTo: Ext.getBody(),
listeners: {
click: function() {
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
layout: 'fit',
items: [{
xtype: 'headerView',
height: 500,
width: 500
}],
listeners: {
afterrender: function(view) {
view.setLoading(true)
}
},
viewModel: {
data: {
isNew: false
}
},
controller: 'myView'
})
}
}
})
Ext.create('Ext.button.Button', {
text: 'currentRecord form',
renderTo: Ext.getBody(),
listeners: {
click: function() {
var myModel = Ext.create('MyModel');
console.log(myModel)
Ext.create('Ext.window.Window', {
height: 500,
width: 500,
autoShow: true,
layout: 'fit',
items: [{
xtype: 'headerViewForm',
height: 500,
width: 500,
bind: {
currentRecord: '{currentRecord}'
},
setCurrentRecord: function(record) {
console.log(record)
if (record) {
this.loadRecord(record)
}
}
}],
listeners: {
afterrender: function(view) {
view.setLoading(true)
}
},
viewModel: {
data: {
isNew: false,
currentRecord: myModel
}
},
controller: 'myView'
})
}
}
})
}
});