Чуть больше чем просто блог :)

Задать стили цвета для строк Грида

var grid = new Ext.grid.GridPanel({
	itemId : 'grid',
	store : [ store ],
	columns : [ columns ],
	view : new Ext.grid.GridView({
		getRowClass : function(row, index) {
			switch (row.get('__ROW_NAME__')) {
			case "__PARAM_1__":
				return 'grid-row-green';
				break;
			case "__PARAM_2__":
				return 'grid-row-red';
				break;
			default:
				return 'grid-row-grey';
				break;
			}
		}
	})
});
Подробнее ...

Задать значения некоторым полям при событии

formPanel.getForm().findField('__FIELD_NAME_1__').on('change', function(field, value) {
	if (!Ext.isEmpty(value)) {
		formPanel.getForm().setValues({
			__FIELD_NAME_20__ : value.record.get('__NAME_20__'),
			__FIELD_NAME_21__ : value.record.get('__NAME_21__'),
			__FIELD_NAME_25__ : value.record.get('__NAME_25__'),
			__FIELD_NAME_40__ : value.record.get('__NAME_40__')
		});
	} else {
		formPanel.getForm().findField('__FIELD_NAME_20__').reset();
		formPanel.getForm().findField('__FIELD_NAME_21__').reset();
		formPanel.getForm().findField('__FIELD_NAME_25__').reset();
		formPanel.getForm().findField('__FIELD_NAME_40__').reset();
	}
}, this);

 

Подробнее ...

Создание составных полей (N полей на одной строке)

items : [ {
	xtype : 'compositefield',
	fieldLabel : "Название составного поля",
	defaults : {
		xtype : 'textfield'
	},
	items : [ {
		name : '__FORM_NAME_1__',
		flex : 5
	}, {
		name : '__FORM_NAME_2__',
		flex : 8
	}, {
		...................
	}, {
		name : '__FORM_NAME_N__',
		flex : 3
	} ]
} ]

 

Подробнее ...

Переназначение события

Ext.extend(__OBJECT_NAME__, Ext.TabPanel, {
	initComponent : function() {
		__OBJECT_NAME__.superclass.initComponent.call(this);				
		this.__grid__.getStore().on('beforeload', this.myEventBeforeLoad, this);	
	},
	myEventBeforeLoad : function(store) {
		console.log(store.record);
	}
}
Подробнее ...

Как достучатся к любому уровню вложенности полей в форме

// formPanel - обьект панели Ext.form.FormPanel, созданный ранее.

formPanel.getComponent('tabs').getComponent('tab1').getComponent('fieldset1').getComponent('panel1')...

Где: 'tabs', 'tab1', 'fieldset1', 'panel1'... - это параметр itemId, а не id

Данный подход позволяет находить обьекты без задания каждому полю глобального ID.

Подробнее ...

ToolTips (Хинты) для КОМБО боксов внутри COMPOSITEFIELD

items : [ {
     xtype : 'compositefield',
     fieldLabel : "Название для составных полей",
     items : [ {
          xtype : 'combo',
          triggerClass : 'x-form-search-trigger',
          mode : 'local',
          name : '__NAME__',
          store : {
               .....
          },
          listeners : {
               scope : this,
               render : function (c) {
                    Ext.QuickTips.register({
                         target : c.id,
                         text : "Текст подсказки для строк в выпадающем списке"
                    });
               }
          }
     } ]
} ]

 

Подробнее ...

ToolTips (Хинты) для КОМБО боксов

items : [ {
     xtype : 'combo',
     tpl : '<tpl for=".">
                 <div ext:qtip="{CODE_FULL}" class="x-combo-list-item">
                      {CODE_FULL}
                 </div>
            </tpl>', // вывод самого хинта
     fieldLabel : "Название комбобокса",
     name : '__FIELD_NAME__',
     hiddenName : '__FIELD_NAME__',
     valueField : 'ID', // ID поля, загруженного в стор
     displayField : 'NAME', // поле NAME, загруженное в стор
     selectOnFocus : true,
     store : new Ext.data.ArrayStore({
          fields : this.comboRankFields
     })
} ]

 

Подробнее ...

Вывод хинта рядом с кнопкой

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

Подробнее ...

Найти обьект в DOM по нужному ID

Ext.getCmp('__ID_NAME__');

 

Это не совсем обьектно-ориентированный подход.

Не желательно злоупотреблять данным методом с жестким указанием ID для обьектов. Т.к. при реализации большого проекта данный метод будет включать такие трудности:

  • Возможно пересечение одинаковых названий ID;
  • Труднее отслеживать ошибки.
Подробнее ...

ToolTips (Хинты) для колонки в Gird

item : [{
	header : "Назва",
	dataIndex : '__NAME__',
	sortable : true,
	type : 'string',
	width : 380,
	renderer : function(value, metadata) {

		// Вариант 1:
		metadata.attr = 'ext:qtip="' + Ext.util.Format.htmlEncode(value) + '"';
		
		// Вариант 2:
		metadata.attr = String.format('{0}title="{1}"', metadata.attr, value);

		// Вариант 3:
		myToolTipText = "<b>Some Title</b>";
		myToolTipText = myToolTipText + "<br/>"+ value;
		metadata.attr = 'ext:qtip="' + myToolTipText + '"';
		
		// Важно указать для возвращения данных в ячейку грида
		return value;
	}
}]
Подробнее ...

Рендеринг данных в обьекте

items : [ {
	header : "НАЗВАНИЕ",
	dataIndex : '__ID__',
	type : 'string/boolean',
	sortable : true,
	renderer : function(item) {
		// STRING
		if (item == 'true') {
			return "__Текст рендера 1__";
		} else {
			return "__Текст рендера 2__";
		}
		
		// BOOLEAN
		if (item) {
			return '<img src="/images/icons/yes.png" border="0" />';
		} else {
			return '<img src="/images/icons/no.png" border="0" />';
		}
	}
}
Подробнее ...

Скрыть/отобразить поля при смене статуса checkbox-a

form.getForm().findField('__CHACKBOX_NAME__').on('check', function(field, checked) {
	if (checked) {
		form.getForm().findField('__FILD_1__').hide();
		form.getForm().findField('__FILD_2__').show();
	} else {
		form.getForm().findField('__FILD_1__').show();
		form.getForm().findField('__FILD_2__').hide();
	}
}, this);
Подробнее ...

Предустановка минимальных и максимальных значений дат в календаре

Вариант 1. Жесткое задание граничных значений:

items : [ {
	xtype : 'datefield',
	name : '__DATA__',
	fieldLabel : "Дата",
	mminValue : __START_MONTH__
	maxValue : __CURRENT_DATA__
}
Подробнее ...
Подписаться на этот канал RSS

Авторизация