ExtJS 6 如何动态设置 Ext,panel.Panel 项
ExtJS 6 how to set Ext,panel.Panel items dynamically
我需要根据 AJAX 请求的响应更新已安装面板上的项目。
我有这个面板:
Ext.define('myComponents.MyPanelView', {
extend: 'Ext.panel.Panel',
id: 'idMyPanel',
itemId: 'idMyPanel',
alias: 'widget.WidgetMyPanel',
scrollable: true,
requires: [],
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%',
padding: '10px'
}
},
tdAttrs: {
style: {
'vertical-align': 'top'
}
}
},
items: [
],
initComponent: function () {
this.callParent(arguments);
}
});
在控制器中我有这个:
Ext.define('myComponents.myController', {
extend: 'Ext.app.ViewController',
alias: 'controller.MyController',
requires: [],
views: ['myComponents.MyPanelView'],
stores: [],
models: [],
init: function () {
this.control({
'WidgetMyPanel #deployer': {
'itemclick': function (treenode, record, item, index, e, eOpts) {
Ext.Ajax.request({
url: 'myURL',
method: 'GET',
headers,
success: function (response) {
const myComponent = Ext.getCmp('idMyPanel');
// myComponent.setItems( items from the response )
// ^
// |---- I need something here to update the items
},
failure: function (response) { console.log('Failure'); }
});
}
}
});
}
});
我试过了
myComponent.items.items = [ //... items here ]
它没有显示错误,但不更新视图。也试过:
myComponent.items.items.push( //... items here )
再次没有错误,但视图仍然没有任何变化。
每次响应成功时我都需要显示项目,但我不知道该怎么做。我怎样才能做到这一点?
尝试使用 Ext.Panel 中的 add()
方法。
myComponent.add(item);
我需要根据 AJAX 请求的响应更新已安装面板上的项目。
我有这个面板:
Ext.define('myComponents.MyPanelView', {
extend: 'Ext.panel.Panel',
id: 'idMyPanel',
itemId: 'idMyPanel',
alias: 'widget.WidgetMyPanel',
scrollable: true,
requires: [],
layout: {
type: 'table',
columns: 4,
tableAttrs: {
style: {
width: '100%',
padding: '10px'
}
},
tdAttrs: {
style: {
'vertical-align': 'top'
}
}
},
items: [
],
initComponent: function () {
this.callParent(arguments);
}
});
在控制器中我有这个:
Ext.define('myComponents.myController', {
extend: 'Ext.app.ViewController',
alias: 'controller.MyController',
requires: [],
views: ['myComponents.MyPanelView'],
stores: [],
models: [],
init: function () {
this.control({
'WidgetMyPanel #deployer': {
'itemclick': function (treenode, record, item, index, e, eOpts) {
Ext.Ajax.request({
url: 'myURL',
method: 'GET',
headers,
success: function (response) {
const myComponent = Ext.getCmp('idMyPanel');
// myComponent.setItems( items from the response )
// ^
// |---- I need something here to update the items
},
failure: function (response) { console.log('Failure'); }
});
}
}
});
}
});
我试过了
myComponent.items.items = [ //... items here ]
它没有显示错误,但不更新视图。也试过:
myComponent.items.items.push( //... items here )
再次没有错误,但视图仍然没有任何变化。
每次响应成功时我都需要显示项目,但我不知道该怎么做。我怎样才能做到这一点?
尝试使用 Ext.Panel 中的 add()
方法。
myComponent.add(item);