PHP5

Текстовые поля в ExtJS

Текстовые поля в ExtJS представлены классом Ext.form.TextField:

Ext.onReady(function(){	
	var formPanel = Ext.create('Ext.Panel', {
                    title: 'Форма ввода',
                    width: 250,
                    autoHeight: true,
                    bodyPadding: 10,
                    defaults: {
                        labelWidth: 100
                    },
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Ваше имя:',
                        name: 'name'
                    }],
					renderTo: Ext.getBody()
                });
});

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

//.....................
items: [{
	xtype: 'textfield',
	fieldLabel: 'Ваше имя:',
	allowBlank:false,
	name: 'name'
}],
//................

Мы можем запретить ввод определенных символов, задав маску. Например, второе поле запрещает ввод всех не числовых символов с помощью регулярного выражения. Также мы можем задать максимально и минимально допустимое количество или текст по умолчанию:

Ext.onReady(function(){

	var formPanel = Ext.create('Ext.Panel', {
                    title: 'Форма ввода',
                    width: 250,
                    autoHeight: true,
                    bodyPadding: 10,
                    defaults: {
                        labelWidth: 100
                    },
                    items: [{
                        xtype: 'textfield',
                        fieldLabel: 'Ваше имя:',
						allowBlank:false,
						emptyText: 'введите текст', //текст по умолчанию
						minLength: 3,
						maxLength: 15,
                        name: 'name'
                    },
					{
                        xtype: 'textfield',
                        fieldLabel: 'Номер счета:',
						allowBlank:false,
						maskRe:/[1-9]/i, //только числа
                        name: 'account'
                    }],
					renderTo: Ext.getBody()
        });
});

Похожую функциональность предоставляет компонент Ext.form.field.TextArea, только в отличие от обычного текстового поля он представляет многострочное поле:

Ext.onReady(function(){
	var formPanel = Ext.create('Ext.Panel', {
                    title: 'Форма ввода',
                    width: 250,
                    autoHeight: true,
                    bodyPadding: 10,
                    defaults: {
                        labelWidth: 100
                    },
                    items: [{
                        xtype: 'textareafield',
						grow      : true,
                        fieldLabel: 'Введите сообщение:',
						allowBlank:false,
						emptyText: 'введите текст сообщения',
                        name: 'text'
                    }],
					renderTo: Ext.getBody()
                });
});