ExtJS 4：按钮单击后，在Viewport项目数组中替换两个组件 [英] ExtJS 4: Replace two components in Viewport items array after button click

问题描述

下面是一个按钮点击后的一些代码。当我在另一个按钮中再次设置view变量时，单击（对于不同的按钮），并使用不同的网格和不同的表单运行这个确切的代码，这两个项目将完全展开。为什么在第一次迭代中运行，但不是第二次？

Below is some code that works after one button click. When I set that "view" variable again in another button click (for a different button) and run this exact code with a different grid and a different form, the two items disspapear completely. Why does it run on the first iteration, but not the second?

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

More importantly, how can I switch the components for these two items the correct way? I've tried using the "itemId" config in these two components (via getComponent), I've tried using the "id" config in these components (via getCmp) and I've tried using the "items" object from the parent component of these two items. I was unsuccessful. The only way I could get it to work (at least on the first button click) was with the "region" config (see below).

函数调用按钮后点击：

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答案，我有这个代码。如何应用它来替换项目数组中给定项目的视图？

Per @Thevs answer, I've got this code. How do I apply it to replace a given item in an items array for a view?

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

我尝试过以下操作，并没有工作。我更喜欢使用id，而不是使用这些边框布局区域，因为我可能会将以后的版面更改为vbox或hbox或两者的组合。

I've tried the following, and does not work yet. I'd prefer to use the id, and not these border layout regions, since I may change the layout in the future to vbox or hbox or a combination of both.

    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            
    });

推荐答案

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

So to solve this one, I had to switch to another layout. I read on Sencha's forum that the add function destroys objects if rendered via border layout. That's probably why @Thevs answer said to use Ext.id(). His answer is correct if using border layout, but then you have to manage the ids for all of your components yourself with another store.

所以我只是改变了'main'来使用'hbox'布局。然后在两个添加函数调用中删除'区域'配置，因为'区域'定义了具有布局边框的组件的子项目的位置。我确实保留了视口的边框布局。也不得不创建一个新的商店，因为旧商店不会由于某种原因加载。我也叫doLayout（）重新渲染组件。

So I just changed 'main' to use 'hbox' layout. Then removed the 'region' configs in both add function calls since that 'region' defines the location of a child item for a component with layout border. I did however keep border layout for the viewport. Also had to create a new store, since the old store wouldn't load for some reason. I also called doLayout() to re-render the components.

    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);

这篇关于ExtJS 4：按钮单击后，在Viewport项目数组中替换两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！