ExtJS 5：显示字段绑定性能
ExtJS 5: displayfield binding performance
我有一个 window 弹出来创建一个新项目...当我为我的绑定字段传递记录时，对话框似乎明显滞后。该记录只是我创建的一条新记录，因此除了框架提供的默认值外，它没有任何关联值。在 this example 中，我有 3 个按钮：
- 第一个使用新记录创建对话...这是最没有table滞后的那个
- 第二个创建的对话框没有记录，因此不会更新绑定字段...此处的延迟几乎不可察觉
- 第三个是使用传入的记录通过表单加载字段值...这里的延迟与第二个相当
似乎这个性能问题已经在 Ext JS 5 和 6 的每晚构建中得到解决，但我没有时间升级到 6，而且 5.1.3 还没有出来......所以基本上， 我究竟做错了什么？我能做些什么来解决这个当前问题（除了使用表格）？理想情况下，我仍然具有约束力，因为 table 值将不得不动态更改。
做了一些研究，我想出了 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'
})
}
}
})
}
});
一位 Sencha 开发者建议将其作为 solution:
Ext.define('Foo', {
override: 'Ext.util.Scheduler',
notify: function() {
Ext.suspendLayouts();
this.callParent();
Ext.resumeLayouts(true);
}
});
Another solution I came up with was based on this SO thread，但我只是在 css 那里进行了扩展...删除了边框、光标等。这并不理想，但它确实完成了工作。
Ext.define('FauxDisplayField', {
extend: 'Ext.form.field.Text',
alias: 'widget.fauxDisplayField',
readOnly: true,
tabIndex: -1,
componentCls: 'faux-display-field'
});
.faux-display-field .x-form-trigger-wrap {
border: none;
}
.faux-display-field input {
text-shadow: 0 0 0 black; /* makes text show up without cursor */
color: transparent; /* makes blinking cursor invisible */
cursor: default;
background-color: transparent;
text-align: right;
}
我有一个 window 弹出来创建一个新项目...当我为我的绑定字段传递记录时，对话框似乎明显滞后。该记录只是我创建的一条新记录，因此除了框架提供的默认值外，它没有任何关联值。在 this example 中，我有 3 个按钮：
- 第一个使用新记录创建对话...这是最没有table滞后的那个
- 第二个创建的对话框没有记录，因此不会更新绑定字段...此处的延迟几乎不可察觉
- 第三个是使用传入的记录通过表单加载字段值...这里的延迟与第二个相当
似乎这个性能问题已经在 Ext JS 5 和 6 的每晚构建中得到解决，但我没有时间升级到 6，而且 5.1.3 还没有出来......所以基本上， 我究竟做错了什么？我能做些什么来解决这个当前问题（除了使用表格）？理想情况下，我仍然具有约束力，因为 table 值将不得不动态更改。
做了一些研究，我想出了 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'
})
}
}
})
}
});
一位 Sencha 开发者建议将其作为 solution:
Ext.define('Foo', {
override: 'Ext.util.Scheduler',
notify: function() {
Ext.suspendLayouts();
this.callParent();
Ext.resumeLayouts(true);
}
});
Another solution I came up with was based on this SO thread，但我只是在 css 那里进行了扩展...删除了边框、光标等。这并不理想，但它确实完成了工作。
Ext.define('FauxDisplayField', {
extend: 'Ext.form.field.Text',
alias: 'widget.fauxDisplayField',
readOnly: true,
tabIndex: -1,
componentCls: 'faux-display-field'
});
.faux-display-field .x-form-trigger-wrap {
border: none;
}
.faux-display-field input {
text-shadow: 0 0 0 black; /* makes text show up without cursor */
color: transparent; /* makes blinking cursor invisible */
cursor: default;
background-color: transparent;
text-align: right;
}