continue to move and this time, I plan to develop a small application that manages registration, to address actual cases and begin to see which parts can be difficult when you start with the study of this framework We will be playing double duty as the server-side language is PHP, which I know a fraction. But hey, you should always take a first step in starting to walk. In this first part will show only the login interface (login.js) and then see its functionality in php.
Login.js
Login, is based on a FormPanel , which is configured by default with layout: 'form', which correctly renderisa labels and text fields.
In line 4 we Ext.QuickTips.init instruction (), it enables the use of the tooltips, and Ext.form.Field.prototype.msgTarget = 'side' (line 6), means that when there validation fails, display a red icon in the side, in this case, the text field.
DefaultType (line 9) indicates that items (child objects) will post such ( xtype), in this case will be 'textfield', in can see link xtype all available.
On line 13 we find the sentence monitorValid: true, this property enables or disables the monitoring of the buttons that are configured (reported) in accordance buttons, provided these in turn are configured with the property formBind: true. The monitoring is to enable or disable the buttons according to the state of form, in other words, if the form is valid, the buttons are enabled, and if the form is not, disabled.
line 14 through 27, we have the items array of objects, which declares two components FormPanel children of type 'textfield'. In line 19 and 23, is set to be validated to not be left empty fields (allowBlank: false), if this happens, the monitorValid detects it and showing the red side with their corresponding error tooltip.
on lines 29 to 36, declaring the array of buttons, here there is only one setting:
on lines 29 to 36, declaring the array of buttons, here there is only one setting:
- monitoring this button (line 31)
- an icon (line 33)
- its label (line 34 )
of lines 39 through 54 is the instance of an object of type Ext.Window, which will be the window containing the FormPanel previously created, the configuration of their properties are clear:
example.
- layout: will use the type 'fit'.
- width: 317 pixels wide.
- height: 148 pixels high.
- title: title of the window.
- closeAction: 'hide', closing the window will only light, so that may be invoked again without instantiated.
- closable: Draw the button on the "x" to close the window.
- draggable: false set-up a window to be fixed, not floating.
- border: false, does not draw its border.
- defaults: Their behavior is similar to DefaultType, all set in this property will be taken by the child components in accordance declarandos items.
- items: has a son, the component called panel. Finally in
example.
0 comments:
Post a Comment