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

问题描述

以下是一些在单击按钮后起作用的代码.当我在另一个按钮单击中再次设置视图"变量(对于不同的按钮)并使用不同的网格和不同的形式运行这个确切的代码时，这两个项目完全消失了.为什么它在第一次迭代时运行，而不是第二次?

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?

更重要的是，如何正确切换这两个项目的组件?我已经尝试在这两个组件中使用itemId"配置(通过 getComponent)，我已经尝试在这些组件中使用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 的回答，我有这个代码.如何应用它来替换视图的 items 数组中的给定项?

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

推荐答案

所以为了解决这个问题，我不得不切换到另一种布局.我在 Sencha 的论坛上读到，如果通过边框布局呈现，add 函数会破坏对象.这可能就是@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"布局.然后在两个 add 函数调用中删除了 'region' 配置，因为该 'region' 定义了具有布局边框的组件的子项的位置.但是，我确实保留了视口的边框布局.还必须创建一个新商店，因为旧商店由于某种原因无法加载.我还调用了 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:单击按钮后替换视口项数组中的两个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！