Работа с формами в ExtJS 4

Создание форм

В предыдущих главах мы познакомились с различными элементами и компонентами и способами компоновки. И, как мы узнали, для организации множества компонентов в приложении используются контейнеры - панели, окна. В ExtJS для упорядочивания и работы с компонентами используются формы.

Формы представлены компонентом Ext.form.Panel, который по сути является той же панелькой-контейнером для других компонентов, только еще реализует дополнительный функционал форм. Создадим какую-нибудь простейшую форму, например, форму авторизации:

<style type="text/css">
    .field-margin {
        margin-left: 10%;
		margin-top:10px;
    }
</style>
<script>
Ext.onReady(function(){
    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Форма авторизации',
        width: 300,
        height:200,
		layout: 'anchor',
		defaults: {
			anchor: '80%'
		},
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Логин',
                name: 'login',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Пароль',
                name: 'password',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
              }],		
		// кнопки формы
		buttons: [{
			text: 'Оправить',
			handler: function() {
				// действие отмены
			}
		}, {
			text: 'Отмена',
			handler: function() {
				// действие отправки
				}
		}],
    });
});
</script>

По сути та же самая панель с текстовыми полями и кнопками, только теперь эти поля составляют единство - форму, подобно формам html.

Доступ к полям формы

Все компоненты формы сосредоточены в свойстве items. Чтобы получить доступ к определенному полю формы, мы можем использовать метод get, в который передается индекс компонента в контейнере. А с помощью метода getValue у компонента мы можем получить введенное значение.

Например, получим значение первого текстового поля вышеопределенной формы:

<style type="text/css">
    .field-margin {
        margin-left: 10%;
		margin-top:10px;
    }
</style>
<script>
Ext.onReady(function(){
    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Форма авторизации',
        width: 300,
        height:200,
		layout: 'anchor',
		defaults: {
			anchor: '80%'
		},
        renderTo: Ext.getBody(),
        items:[{
                xtype: 'textfield',
                fieldLabel: 'Логин',
                name: 'login',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
               }, {
                xtype: 'textfield',
                fieldLabel: 'Пароль',
                name: 'password',
                labelAlign: 'top',
                cls: 'field-margin',
                flex: 1
              }],		
		// кнопки формы
		buttons: [{
			text: 'Оправить',
			handler: function() {
				// действие отмены
			}
		}, {
			text: 'Логин',
			handler: function() {
				var login = formPanel.items.get(0).items.get(0);
				alert(login.getValue());
				}
		}],
    });
});
</script>

Также мы можем получить не значения отдельных элементов, а всю форму в целом, использовав метод getForm(). Например, мы можем вывести значения всех полей формы следующим способом:

Ext.onReady(function(){
    var formPanel=Ext.create('Ext.form.Panel',{
        title: 'Форма авторизации',
        width: 300,
        height:200,
		layout: 'anchor',
		defaults: {
			anchor: '80%'
		},
			renderTo: Ext.getBody(),
			items:[{
					xtype: 'textfield',
					fieldLabel: 'Логин',
					name: 'login',
					labelAlign: 'top',
					cls: 'field-margin',
					flex: 1
				   }, {
					xtype: 'textfield',
					fieldLabel: 'Пароль',
					name: 'password',
					labelAlign: 'top',
					cls: 'field-margin',
					flex: 1
				  }],		

		buttons: [{
			text: 'Вывести данные',
			handler: function() {
				var login = formPanel.getForm();

				for(var i in login.getValues())
				{
					alert(login.getValues()[i]);
				}
			}
		}],
    });
});