ExtJs 4 -如何在动态更新可关闭属性时更新Ext.window.Window布局
ExtJs 4 - How to update Ext.window.Window layout when closable property was updated dinamically?
我遇到了一个主题中描述的问题。我有ExtJs应用程序。我的任务显示弹出窗口填充网格。默认为window.closable = false;
我在控制器的某个地方定义了窗口,它看起来像这样:
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
});
}
);
用户应该做以下操作:在popupShow上找到网格中的任何一行,单击它。之后,弹出窗口将被隐藏,选定的行将被添加到父网格与所有的数据。
当prodStore.sum('stock')
-表示列中所有值的总和大于零时,它可以正常工作。当'stock'
列中的所有值都为零时,用户应该可以直接关闭窗口。
当我调试这段代码时,窗口的closeable属性变为true并可以显示。但在正常运行中,没有。同时,当尝试检查控制台Ext.getCmp('popupWidow').closable
时,它返回true
,因为我需要。
我认为布局应该更新。我在窗口显示后就这样做。但不幸的是,
这里还有其他适用的方法吗?
在callback
函数中创建resultWindow
对象,初始化时设置closable
属性
所以,你可以这样做:
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;
}
});
});
如果你看一下Ext.window.Window文档,你可以看到这个属性没有set函数,这意味着你不能仅仅通过改变这个属性来更新UI。
相关文章:
- Css order属性不't在Jquery设置时更新
- 更新属性工作不正常Meteor/MongoDB
- 阵列中的localstorage更新属性
- 数组中嵌入文档的集合更新属性
- Javascript object.defineProperties 以自动更新属性
- 使用 ajax 调用轨道更新属性
- X3DOM 更新属性
- React未从数组内的对象更新属性
- 如何使用 Ember 更新属性后滚动到 DOWN
- 如果JavaScript对象是通过引用传递的,为什么不;t更新属性值更新局部变量
- 余烬模板不更新属性变量的变化
- 如何使用jQuery更新属性?
- 更新属性指令值
- Jquery /js:脚本在输入值改变后不更新属性
- OrientDB通过JavaScript更新属性
- 猫鼬模式方法和“这个”更新属性 - NodeJS
- 不更新属性值的二传手函数
- Backbone.js正在更新属性被更改的模型
- 克隆和更新属性
- 如何在从子控制器更新属性后刷新应用程序模板