Вопрос по ExtJS: обращение к элементам?


Здравствуйте

Если кратко — есть панель, она содержит в себе четыре колонки в каждой из которых по одному элементу — всего три комбобокса. Допустим при событии select у первого комбобокса необходимо что-то сделать со вторым (как пример hide). Вопрос про обработчик событий и тп. меня не волнует, я хочу понять — как правильно обращаться к элементам, которые по сути в одном объекте?

Самый простой способ обратиться ко второму комбобокус — получить его по id: Ext.getCmp('temp-combo-second').hide(); Но что-то мне подсказывает, что подобный способ далеко не самый оптимальный, ведь все комбобоксы находятся в одной панеле. Как правильнее/грамотно получить этот элемент, чтобы не нарушать принципы ООП?

Спасибо за внимание

Задачу в которой столкнулся с заданным выше вопросом — решил, но не хочу превращаться в быдлоExtJSкодера =/

Для пример набросал псевдокод:

Temp.panel.Panel = function(config) {
  config = config || {};

  Ext.applyIf(config,{
    id: 'temp-panel-id'
    ,url: Temp.config.connectorUrl
    ,layout: 'column'
    ,items: [{
      layout: 'form'
      ,items: [{
        xtype: 'modx-combo'
        ,id: 'temp-combo-first'
        //...
      }]
    },{
      layout: 'form'
      ,items: [{
        xtype: 'modx-combo'
        ,id: 'temp-combo-second'
        //...
      }]
    },{
      layout: 'form'
      ,items: [{
        xtype: 'modx-combo'
        ,id: 'temp-combo-third'
        //...
      }]
    }]
  });
  Temp.panel.Panel.superclass.constructor.call(this,config)
};
Ext.extend(Temp.panel.Panel,MODx.Panel);
TempName
TempName
25 января 2013, 14:20
modx.pro
2
4 101
0

Комментарии: 5

Василий Наумкин
Василий Наумкин
26 января 2013, 09:00
0
По идее, они все вместе находятся в this и ты можешь сделать
console.log(this)
чтобы увидеть его. В консоли хрома можно будет погулять по этому объекту и найти те элементы, к которым ты хочешь обратиться.

Будет что-то типа
obj = this.items.elements[1];
obj.hide();

Но не уверен, я в ExtJS новичок.
    TempName
    TempName
    29 января 2013, 11:40
    0
    Василий, спасибо за ответ

    К сожалению такой вариант не подходит, так как копание «руками» в объектах ExtJS гиблое дело, абсолютно бесполезное. В них столько всякого «служебного» хлама, что докопаться до нужного объекта возможно — но проще уж выбрать по ID. Приблизительно, таким макаром this.items.items[0] я лишь докопаюсь до первой колонки и надо еще глубже)
      Василий Наумкин
      Василий Наумкин
      29 января 2013, 11:41
      0
      Если хочешь делать хорошо — надо копать, никуда не денешься.

      Я вот и сейчас копаю, глубоко-глубоко =)
    Prizrak Pro
    Prizrak Pro
    29 января 2013, 10:39
    1
    0
    Если элементы создавать таким образом.

    Form = Ext.extend(Ext.FormPanel, {

initComponent: function() {
 this.comboPeriod = new Ext.form.ComboBox({
			fieldLabel: 'Период',
			width: 200,
			store: new Ext.data.ArrayStore({
				fields: ['id','name'],
				data: [
                    			[0, 'текущий месяц'],
					[1, 'за 14 дней'],
					[2, 'за 7 дней'],
					[3, 'вчера'],
					[4, 'сегодня']
				]
			}),
			value: 1,
			listeners: {
				select: {
                    			fn: this.updatePeriod,
                   			scope: this
               				}
				}
			});

 this.comboPeriodNew = new Ext.form.ComboBox({
			fieldLabel: 'Период',
			width: 200,
			store: new Ext.data.ArrayStore({
				fields: ['id','name'],
				data: [
                    			[0, '30'],
					[1, '14'],
					[2, '7'],
					[3, '1'],
					[4, '1']
				]
			}),
			value: 1
		});

},
updatePeriod: function() {
//То обращаться вот так
this.comboPeriodNew.setValue('dfgdfgdg');}
});

    Вот так можно обращаться, с использованием ООП.

    Если что не понятно спрашивай, поясню.
      TempName
      TempName
      29 января 2013, 11:41
      0
      О! Суть понял, пойду править код. Вроде бы очевидное решение, но глаз был замылен. Спасибо
      Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.
      5