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.