0

下面是一些单击按钮后可以工作的代码。当我在另一个按钮单击（对于不同的按钮）中再次设置该“视图”变量并使用不同的网格和不同的表单运行这个确切的代码时，这两个项目完全消失。为什么它在第一次迭代时运行，而不是第二次？

更重要的是，如何正确切换这两项的组件？我尝试在这两个组件中使用“itemId”配置（通过 getComponent），我尝试在这些组件中使用“id”配置（通过 getCmp），我尝试使用来自父级的“items”对象这两个项目的组成部分。我没有成功。我可以让它工作的唯一方法（至少在第一次单击按钮时）是使用“区域”配置（见下文）。

单击按钮后调用的函数：

openAssociationGrid : function() {

    var view = this.getViewportAdmin();
    var main = view.down('[region=west]');
    main.removeAll();
    main.add({
        region: 'center',
        itemId: 'grid',
        xtype: 'view-association-grid',            
        width: '50%',
        store: 'Associations',
        split: true
    });
    main.add({
        region: 'east',
        itemId: 'form',
        xtype: 'view-association-form',
        width: '50%',
        split: true            
    });
},

编辑：

根据@Thevs 的回答，我有这个代码。如何应用它来替换视图的项目数组中的给定项目？

var id1 = Ext.id();
alert(id1);
var id2 = parseInt(id1.replace("ext-gen", ""));
alert(id2);

在此处输入图像描述

我尝试了以下方法，但还不行。我更喜欢使用 id，而不是这些边框布局区域，因为我将来可能会将布局更改为 vbox 或 hbox 或两者的组合。

    var view = this.getViewportAdmin();
    var center = view.down('[region=center]');
    var east = view.down('[region=east]');

    Ext.apply(center, {
        region: 'center',
        itemId: Ext.id(),
        xtype: 'view-property-grid',            
        width: '50%',
        store: 'Properties',
        split: true
    });
    Ext.apply(east, {
        region: 'east',
        itemId: Ext.id(),
        xtype: 'view-property-form',
        width: '50%',
        split: true            
    });
4

2 回答 2

0

itemId您必须为网格和表单生成唯一的 id 。您可以Ext.id()为此使用功能。

于 2013-09-05T15:11:04.417 回答
0

所以为了解决这个问题，我不得不切换到另一种布局。我在 Sencha 的论坛上读到，如果通过边框布局呈现，添加函数会破坏对象。这可能就是为什么@Thevs 回答说要使用 Ext.id()。如果使用边框布局，他的答案是正确的，但是您必须自己与另一家商店管理所有组件的 ID。

所以我只是将'main'更改为使用'hbox'布局。然后在两个添加函数调用中删除了“区域”配置，因为该“区域”定义了具有布局边框的组件的子项的位置。但是，我确实保留了视口的边框布局。还必须创建一个新商店，因为旧商店由于某种原因无法加载。我还调用了 doLayout() 来重新渲染组件。

    var view = this.getViewportAdmin();
    var main = view.getComponent('main');
    main.remove('grid', false);
    main.remove('form', false);
    main.add({
        itemId: 'grid',
        xtype: 'view-property-grid',            
        width: '50%',
        store: Ext.create('App.store.Properties'),
        split: false
    });
    main.add({
        itemId: 'form',
        xtype: 'view-property-form',
        width: '50%',
        split: true
    });
    main.doLayout(true);
于 2013-09-17T21:36:13.300 回答