ExtJS 4.1.0 ComboBox "setValue" Method

Posted By Vitalii | June 26, 2012 | ExtJS 4.1.0
0 5772
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

Posted By Vitalii | June 26, 2012 | ExtJS 4.0.7
0 3221
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

Posted By Vitalii | April 26, 2012 | ExtJS 3.4.0
0 2957
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

Posted By Vitalii | April 09, 2012 | ExtJS 4.0.7
0 2731
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

Posted By Vitalii | April 05, 2012 | ExtJS 4.0.7
0 3418
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'
});