ExtJS 5 Textfield Chrome Bug Fix

By Vitaliy on July 03, 2015. ExtJS 5.0.0
3309
This bug can be fixed by single css line: .x-form-text { display: inline; }

Js Code

Ext.onReady(function () {
    Ext.widget({
        title: 'Form',
        xtype: 'form',
        width: 400,
        frame: true,
        bodyPadding: 10,
        items: [{
            fieldLabel: 'Bug field',
            xtype: 'textfield'
        }, {
            fieldLabel: 'Fixed field',
            xtype: 'textfield',
            fieldCls: 'fixed'
        }],
        renderTo: 'output'
    });
});    

Automatic Scroll Form To Dynamically Added Textfield

By Vitaliy on March 20, 2012. ExtJS 4.0.7
1849
Reply to thread

Js Code

Ext.widget('form', {
	title: 'Test Form',
	width: 300,
	height: 200,
	bodyPadding: 10,
	renderTo: 'output',
	autoScroll: true,
	items: [
		{
			xtype: 'textfield',
			name: 'UserName',
			fieldLabel: 'UserName',
			maxLength: 4,
			enforceMaxLength: true
		}
	],
	buttons: [
		{
			text: 'Add Phone',
			handler: function () {
				var form = this.up('form');
				var textfield = Ext.widget('textfield', {
					fieldLabel: 'Phone'
				});
				form.add(textfield);
				textfield.focus();
			}
		}
	]
});    

How to dynamically change textfield maxLength

By Vitaliy on March 20, 2012. ExtJS 4.0.7
3357
Reply to thread

Js Code

Ext.widget('form', {
	title: 'Test Form',
	width: 300,
	bodyPadding: 10,
	renderTo: 'output',
	items: [
		{
			xtype: 'textfield',
			name: 'UserName',
			fieldLabel: 'UserName',
			maxLength: 4,
			enforceMaxLength: true
		}
	],
	buttons: [
		{
			text: 'Increment MaxLength',
			handler: function () {
				var form = this.up('form');
				var textfield = form.down('textfield[name=UserName]');
				textfield.maxLength += 2;
				textfield.inputEl.dom.maxLength += 2;
			}
		}
	]
});    

Form Data Loading Example

By Vitaliy on March 16, 2012. ExtJS 4.0.7
1963
Reply to thread

Js Code

Ext.onReady(function () {
	Ext.widget('form', {
		title: 'Test Form',
		bodyPadding: 10,
		width: 600,
		renderTo: 'output',
		items: [
			{
				fieldLabel: 'Title',
				xtype: 'textfield',
				name: 'Title',
				anchor: '100%'
			},
			{
				fieldLabel: 'Body',
				xtype: 'textarea',
				height: 150,
				name: 'Body',
				anchor: '100%'
			}
		],
		buttons: [
			{
				text: 'Load Data',
				handler: function () {
					this.up('form').load({
						url: '/postdata/gettestpost',
						success: function () {

						}
					});
				}
			}
		]
	});
});