Как получить компонент Object?

Question

У меня есть мнение, как:

Ext.define('Demo.example.OpenRequest', { 
    extend: 'Ext.draw.Component', 
    xtype: 'demo', 
    height: 280, 
    width: 1213, 
    viewBox: false, 
    listeners: { 
     'beforerender': function (panel) { 
      alert("Hi"); 
      alert(panel.param); 
      alert(panel); 
      var itemArray = panel.items; 
      itemArray.forEach(function (i) { 
       if (i.itemId == 'green-rect') { 
        i.addCls('x-hide-display'); 
       } 
      }); 
     } 
    }, 
    constructor: function (config) { 
     this.items = [{ 
       type: "image", 
       src: 'http://icons.iconarchive.com/icons/double-j-design/origami-colored-pencil/64/green-user-icon.png', 
       width: 100, 
       height: 100, 
       translate: { 
        x: 10, 
        y: 80 
       } 
      }, 
      { 
       type: 'rect', 
       itemId: 'green-rect', 
       width: 200, 
       height: 50, 
       radius: 10, 
       fill: 'green', 
       opacity: 0.5, 
       stroke: 'black', 
       'stroke-width': 2, 
       translate: { 
        x: 400, 
        y: 110 
       }, 
       listeners: { 
        click: function (as) { 
         alert('A'); 
        } 
       } 
      }, 
      { 
       type: 'rect', 
       width: 200, 
       height: 50, 
       radius: 10, 
       itemId: 'red1-rect', 
       fill: 'red', 
       opacity: 0.5, 
       stroke: 'black', 
       'stroke-width': 2, 
       translate: { 
        x: 890, 
        y: 10 
       }, 
       listeners: { 
        click: function() { 
         alert('B'); 
        } 
       } 
      }]; 

     if (this.items) { 
      Ext.apply(config, { 
       items: this.items 
      }); 
     } 
     this.callParent([config]); 
    } 
}); 

В beforerender слушателя Я хочу, чтобы скрыть зеленый прямоугольник, основанный на стоимости. Я проверяю там, если i.itemId == 'green-rec' Я добавляю класс с скрытым свойством. Но я даю ему ошибку как неопределенную функцию. Как скрыть это.

CSS:

.x-hide-display { 
    display: none; 
} 

Answer 1

Я тестировал свой код в fiddle и когда вы хотите реальные детали для iterrate над вам нужно panel.items.items. Следующий код должен работать

var itemArray = panel.items.items; //now you have the items you want to iterrate over 
Ext.Object.each(itemArray, function (key, value) { 
    if (value.itemId == 'green-rect') { 
     value.addCls('x-hide-display'); 
    } 
}); 

---

Тип panel.items является Ext.util.Collection, так что вы можете просто сделать следующее

var itemArray = panel.items; 
itemArray.each(function (item) { 
    if (item.itemId == 'green-rect') { 
     item.addCls('x-hide-display'); 
    } 
}); 

Answer 2

Сейчас попробуйте это решение, он работает, но я дон 't нравится запрос на основе элементов, основанных на ext id: -

var drawComponent = Ext.create('Ext.draw.Component', { 
viewBox: false, 
items: [{ 
    type: 'circle', 
    fill: '#79BB3F', 
    id: 'green-rect', 
    itemId:'green-rect', 
    radius: 100, 
    x: 100, 
    y: 100 
}], 
listeners: { 
    'afterrender': function(panel) { 
     alert("Hi"); 
     alert(panel.param); 
     alert(panel); 
     var itemArray = panel.items; 
     //debugger; 
     Ext.getElementById('green-rect').style.display = 'none'; 
    } 
} 

});

Ext.create('Ext.Window', { 
width: 215, 
height: 235, 
layout: 'fit', 
items: [drawComponent] 

}). Show();

Попробовал другое решение отвечал, но он не работает, потому что даже afterrender дочерних элементов не Ext компонентов, а просто конфигурации.

В объекте объектов нет скрытия или addClass или любого другого метода Ext.Component.

Answer 3

Вы можете сделать следующее:

if (var obj = itemArray.find('itemId', 'green-rect')) { 
    obj.addCls('x-hide-display'); 
} 

EDIT:

Там нет addCls метода для этого объекта. Вы должны использовать метод hide(), чтобы спрятать прямоугольник:

if (var obj = itemArray.find('itemId', 'green-rect')) { 
    obj.hide(); 
}