[英]ExtJs 4 - How to update Ext.window.Window layout when closable property was updated dinamically?
I faced with a problem described in topic. 我遇到了主题中描述的问题。 I have ExtJs application. 我有ExtJs应用程序。 My task show popup window with filled grid. 我的任务显示带有填充网格的弹出窗口。 By default window.closable = false;
默认情况下window.closable = false;
Somewhere in the controller I have defined window, it looks like that: 我在控制器的某个位置定义了窗口,看起来像这样:
Ext.define('Return.controller.ViewportController', {
extend: 'Ext.app.Controller',
views:[
'ModalWindow',
'ProductsList'
],
stores:[
...,
'ProductsStore'
],
models:[
...,
'ProductsModel'
],
resultWindow: Ext.create('Ext.window.Window', {
itemId: 'popupWindow',
id: 'popupWindow',
title: 'Result List',
layout:'fit',
width: 900,
height: 600,
modal: true,
closable: false,
closeAction: 'hide',
items:[]
})
onPopupShow: function() {
// first add grid with store to popup window;
// then need to load data into ProductsStore;
// depending on values in store_stock column need to define
// if I should show close button for Window or not.
// By default button is invisible
var prodStore = Ext.getStore('ProductsStore');
this.resultWindow.add({xtype: 'ProductsList', border: true});
prodStore.load({
params: {
stock_locations_id: 1,
query: value
},
callback: function (result) {
var app = this;
if (result.length > 0) {
//make window closable
app.resultWindow.closable = (!prodStore.sum('stock'));
//show and update Layout
app.resultWindow.show().updateLayout();
Ext.getCmp('ProductsList').getView().refresh();
return;
}
//do smth else
}, scope: this
});
}
);
User should do following actions: On popupShow find any row in the grid, click on it. 用户应执行以下操作:在popupShow上,找到网格中的任何行,然后单击它。 After that popup will be hidden and selected row will be added to parent grid with all the data. 之后,该弹出窗口将被隐藏,并且选定的行将与所有数据一起添加到父网格。
It works fine when prodStore.sum('stock')
- means total sum of all values in column is more then zero. 当prodStore.sum('stock')
-表示列中所有值的总和prodStore.sum('stock')
它工作正常。 When all the values in 'stock'
column are zero, user should be able just to close the window. 当'stock'
列中的所有值均为零时,用户应该只能关闭窗口。
When I debug that piece of code, window gets closable property to true and can be displayed. 当我调试那段代码时,窗口将closable属性设置为true并可以显示。 But in normal running - no. 但是在正常运行中-不。 The same time when trying to check in console Ext.getCmp('popupWidow').closable
it returns true
as I need. 尝试同时检入控制台Ext.getCmp('popupWidow').closable
它根据需要返回true
。
I suppose layout should be updated. 我想应该更新布局。 I do that right after window is showed. 我在显示窗口后立即执行此操作。 But unfortunately. 但不幸的是。
What other way here is applicable? 还有什么其他方法适用?
Thanks in advance. 提前致谢。
Create resultWindow
object in the callback
function and set the closable
property while initializing it. 创建resultWindow
对象中的callback
函数,并设置了closable
性能,同时对其进行初始化。
So, you could do something like: 因此,您可以执行以下操作:
Ext.define('Return.controller.ViewportController', {
extend: 'Ext.app.Controller',
...
resultWindowConfig: {
itemId: 'popupWindow',
id: 'popupWindow',
title: 'Result List',
layout:'fit',
width: 900,
height: 600,
modal: true,
closable: false,
closeAction: 'hide',
items:[]
},
onPopupShow: function() {
...
scope: this,
callback: function (result) {
var app = this;
if (result.length > 0) {
//make window closable
app.resultWindowConfig.closable = (!prodStore.sum('stock'));
var resultWindow = Ext.create('Ext.window.Window', app.resultWindowConfig);
//If you want to set resultWindow as a property of the app object just do app.resultWindow = resultWindow;
resultWindow.show();
...
return;
}
});
});
If you look at the Ext.window.Window docs, you can see that there is no set function for this property, which means that you can't update the UI just by changing this property. 如果查看Ext.window.Window文档,您会发现此属性没有设置函数,这意味着您不能仅通过更改此属性来更新UI。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.