ExtJS 4.1.0 ComboBox "setValue" Method

By Vitaliy on June 26, 2012. ExtJS 4.1.0
5528
In ExtJS 4.0.7 we can set combobox value by valueField, displayField or an object.
In ExtJS 4.1.0 - only by valueField or displayField.

Reply to thread

Js Code

Ext.widget('form', {
	title: 'Test Form',
	width: 400,
	bodyPadding: 10,
	tbar: [
		{
			text: 'Set value by id',
			handler: function () {
				this.up('form').down('#combo-1').setValue(1);
			}
		},
		{
			text: 'Set value by name',
			handler: function () {
				this.up('form').down('#combo-2').setValue('User-2');
			}
		},
		{
			text: 'Set value by object',
			handler: function () {
				this.up('form').down('#combo-3').setValue({ id: 3, name: 'User-3' });
			}
		}
	],
	items: [
		{
			itemId: 'combo-1',
			fieldLabel: 'By id',
			xtype: 'combouser'
		},
		{
			itemId: 'combo-2',
			fieldLabel: 'By name',
			xtype: 'combouser'
		},
		{
			itemId: 'combo-3',
			fieldLabel: 'By object',
			xtype: 'combouser'
		}
	],
	renderTo: 'output'
});    

ExtJS 4.0.7 ComboBox "setValue" Method

By Vitaliy on June 26, 2012. ExtJS 4.0.7
3104
In ExtJS 4.0.7 we can set combobox value by valueField, displayField or an object.
In ExtJS 4.1.0 - only by valueField or displayField.

Reply to thread

Js Code

Ext.widget('form', {
	title: 'Test Form',
	width: 400,
	bodyPadding: 10,
	tbar: [
		{
			text: 'Set value by id',
			handler: function () {
				this.up('form').down('#combo-1').setValue(1);
			}
		},
		{
			text: 'Set value by name',
			handler: function () {
				this.up('form').down('#combo-2').setValue('User-2');
			}
		},
		{
			text: 'Set value by object',
			handler: function () {
				this.up('form').down('#combo-3').setValue({ id: 3, name: 'User-3' });
			}
		}
	],
	items: [
		{
			itemId: 'combo-1',
			fieldLabel: 'By id',
			xtype: 'combouser'
		},
		{
			itemId: 'combo-2',
			fieldLabel: 'By name',
			xtype: 'combouser'
		},
		{
			itemId: 'combo-3',
			fieldLabel: 'By object',
			xtype: 'combouser'
		}
	],
	renderTo: 'output'
});    

ComboBox Tooltip With Double Quotes

By Vitaliy on April 26, 2012. ExtJS 3.4.0
2857
Reply to thread

Js Code

Ext.onReady(function () {
	Ext.QuickTips.init();

	var store = ['111', '222 "asdf"', '333'];

	for (var i = 0; i < store.length; i++) {
		store[i] = Ext.util.Format.htmlEncode(store[i]);
	}

	new Ext.form.FormPanel({
		title: 'Test form',
		width: 350,
		padding: 5,
		items: [{
			xtype: 'combo',
			tpl: '<tpl for="."><div ext:qtip="tip: {field1}" class="x-combo-list-item">text: {field1}</div></tpl>',
			fieldLabel: 'Test combo',
			anchor: '100%',
			store: store
		}],
		renderTo: 'output'
	});
});    

How To Filter Combobox By Query With Special Symbol

By Vitaliy on April 09, 2012. ExtJS 4.0.7
2657
Reply to thread

Js Code

Ext.widget('combo', {
	fieldLabel: 'Choose value',
	store: ['12', '123', 'ram', '1021'],
	listeners: {
		beforequery: function (e) {
			if (e.query && e.query.indexOf('?') != -1) {
				e.cancel = true;

				var query = new RegExp(Ext.String.format('^{0}', e.query.replace(/\?/g, '[A-Za-z0-9]')));

				this.expand();
				this.store.clearFilter(true);
				this.store.filter(this.displayField, query);
			}
		ŽŸ}
	},
	renderTo: 'output'
});    

ComboBox Keypress Event

By Vitaliy on April 05, 2012. ExtJS 4.0.7
3318
Keypress input field event only fires if enableKeyEvents is set to true.

Js Code

Ext.widget('combo', {
	fieldLabel: 'Choose State',
	store: {
		fields: ['abbr', 'name'],
		data: [
			{ "abbr": "AL", "name": "Alabama" },
			{ "abbr": "AK", "name": "Alaska" },
			{ "abbr": "AZ", "name": "Arizona" }
		]
	},
	displayField: 'name',
	valueField: 'abbr',
	enableKeyEvents: true,
	listeners: {
		keypress: function (combo, e) {
			if (e.getKey() == 63) {
				Ext.Msg.alert('What\'s wrong?', 'Key "?" was pressed!');
			}
		}
	},
	renderTo: 'output'
});