Вопрос по 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

25 января 2013, 14:20

4 590

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

Василий Наумкин

26 января 2013, 09:00

По идее, они все вместе находятся в this и ты можешь сделать

console.log(this)

чтобы увидеть его. В консоли хрома можно будет погулять по этому объекту и найти те элементы, к которым ты хочешь обратиться.

Будет что-то типа

obj = this.items.elements[1];
obj.hide();

Но не уверен, я в ExtJS новичок.

TempName

29 января 2013, 11:40

Василий, спасибо за ответ

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

Василий Наумкин

29 января 2013, 11:41

Если хочешь делать хорошо — надо копать, никуда не денешься.

Я вот и сейчас копаю, глубоко-глубоко =)

Prizrak Pro

29 января 2013, 10:39

Если элементы создавать таким образом.

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

29 января 2013, 11:41

О! Суть понял, пойду править код. Вроде бы очевидное решение, но глаз был замылен. Спасибо

Авторизуйтесь или зарегистрируйтесь, чтобы оставлять комментарии.