Extjs learning 2

1. icons in the extjs dialog box

To add an image in the dialog box, you can easily add a style:

<Style>

. Milton-Icon {Background: URL (images/milton-head-icon.png) No-Repeat ;}

</Style>

Then, in the dialog box, Set

Ext. msg. Show ({

Title: 'millon ',

MSG: 'Have you seen my stapler? ',

Buttons: {yes: True, No: True, cancel: true },

Icon: 'milton-Icon ',

Set the icon here and point out its CSS style.

2. Dialog Box selection, including clicking different button responses

Ext. onready (function (){

Ext. msg. Show ({

Title: 'millon ',

MSG: 'Have you seen my stapler? ',

Buttons: {yes: True, No: True, cancel: true },

Icon: 'milton-Icon ',

Defaultbutton: 'no ',

FN: function (BTN ){

Switch (BTN ){

Case 'yes ':

Ext. msg. Prompt ('millon', 'Where is it? ', Function

(BTN, txt ){

If (txt. tolowercase () = 'The Office '){

Ext. Get ('My _ id'). Dom. innerhtml = 'work

Sucks ';

} Else {

Ext. Get ('My _ id'). Dom. innerhtml = txt;

}

});

Break;

Case 'no ':

Ext. msg. Alert ('millon', 'im going to burn the building

Down! ');

Break;

Case 'cancel ':

Ext. msg. Wait ('saving tables to disk... ', 'file copy ');

Break;

}

}

});

});

3 ext references a div ID. You can use Ext. Get ('myid') to set

4 ext calendar, you can disable certain dates and support regular expressions, such

{

Xtype: 'datefield ',

Fieldlabel: 'released ',

Name: 'released ',

Disableddays: [1, 2, 3, 4, 5]

}]

The day of week 6 is prohibited. All days except the day are disabled. 0 indicates Sunday, and 6 indicates week 6.

5. Set the verification style, for example:

{

Xtype: 'textfield ',

Fieldlabel: 'ctor ctor ',

Name: 'ctor ctor ',

Vtype: 'alpha'

}

Vtype has a verification style. For example, Alpha has to allow letters and numbers, emails, URLs, and so on.

6. Create a custom authentication method

For example, if you want to create a verification with spaces between strings to be entered

{

Xtype: 'textfield ',

Fieldlabel: 'ctor ctor ',

Name: 'ctor ctor ',

Vtype: 'name'

}

Ext. form. vtypes. nameval =/^ ([A-Z] {1}) [A-Za-Z \-] + ([A-Z] {1 }) [A-Za-Z \-] + /;

Ext. Form. vtypes. namemask =/[A-Za-Z \-]/;

Ext. Form. vtypes. nametext = 'in-valid Director name .';

Ext. Form. vtypes. Name = function (v ){

Return Ext. Form. vtypes. nameval. Test (v );

};

 

Xxxxval is a regular expression used for matching. xxxmask is used to block user input. xxxxtext is used for error messages.

7. In the form, listen to the press ENTER event.

Items :[{

Xtype: 'textfield ',

Fieldlabel: 'title ',

Name: 'title ',

Allowblank: false,

Listeners :{

Specialkey: function (FRM, EVT ){

If (EVT. getkey () = EVT. Enter ){

Movie_form.getform (). Submit ();

}

}

}

8. Cell display function in Grid

Use HTML and graphics in a column, for example:

{Header: "cover", dataindex: 'coverthumb', Renderer: cover_image },

Function cover_image (VAL ){

Return ' ';

}

9. A row in the grid is selected;

SM: New Ext. Grid. rowselectionmodel ({

Singleselect: True,

Listeners :{

Rowselect :{

FN: function (SM, index, record) {Ext. msg. Alert ('you

Selected', record. Data. Title );}

}

}

}),

Note that the first action is 0.

10. Click a button to edit the data of a row.

Tbar :[{

// Changes the title of the currently selected row usign A MessageBox

Text: 'change title ',

Handler: function (){

VaR Sm = grid. getselectionmodel ();

// Get the selected row (if exists)

VaR sel = Sm. getselected ();

// Has something been selected?

If (Sm. hasselection ()){

Ext. msg. Show ({

Title: 'change title ',

Prompt: True,

Buttons: Ext. MessageBox. okcancel,

Value: SEL. Data. title,

FN: function (BTN, text ){

If (BTN = 'OK '){

// Set a new value for one of

// Columns in our selected row

Sel. Set ('title', text );

}

}

});

}

}

11 In editorgrid, you can determine that some rows cannot be edited by using the Afteredit event.

Listeners :{

Afteredit: function (e ){

If (E. Field = 'ctor ctor '& E. value = 'mel gibson '){

Ext. msg. Alert ('error', 'mel Gibson movies not allowed ');

E. Record. Reject ();

} Else {

E. Record. Commit ();

}

}

Note that E. Filed is used to determine the column where E. value is located.