ExtJS 2.0 tips

Initialize the header
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script type = "text/javascript" src = ".../ext2/source/locale/ext-lang-zh_CN.js"> </script>
<Link rel = "stylesheet" type = "text/css" href = ".../ext2/resources/css/ext-all.css"/>
<Script type = "text/javascript" src = ".../ext2/adapter/ext/ext-base.js"> </script>
<Script type = "text/javascript" src = ".../ext2/ext-all.js"> </script>

GridPanel loads remote json data
Var labs = new Ext. data. JsonStore ({
Url: 'http: // 127.0.0.1: 8080/LabShiftPrj/bookAction! GetBookLabs. action? UserName = '+ Ext. get ("userName"). getValue (),
Fields: ['index', 'value'],
AutoLoad: true,
Root: 'labs ',
Method: 'post'
// Data: {"labs": [{"index": 1, "value": "LAB-CMP-1" },{ "index": 2, "value ": "LAB-CMP-2" },{ "index": 3, "value": "LAB-PHY-1"}]}
});
 
Var g = new Ext. grid. GridPanel ({
RenderTo: document. body,
Frame: true,
Title: 'reserved labs ',
Height: 200,
Width: 500,
Store: labs,
Columns :[
{Header: 'number', dataIndex: 'index', sortable: true },
{Header: 'label', dataIndex: 'value', sortable: true}
],
Sm: new Ext. grid. RowSelectionModel ({
SingleSelect: true,
Listeners :{
Rowselect :{
Fn: function (sm, index, record ){
Ext. Msg. alert (record. data. value );
}
}
}})
});

FormPanel instance
Var fm = new Ext. FormPanel ({
RenderTo: document. body,
Frame: true,
Title: 'register ',
Width: 500,
Items :[
{
Xtype: 'textfield ',
FieldLabel: 'name ',
Name: 'name ',
Vtype: 'alpha'
},
{
Xtype: 'timefield ',
FieldLabel: 'date ',
Name: 'D'
},
{
Xtype: 'Radio ',
FieldLabel: 'sex ',
Name:'s ',
BoxLabel: 'male'
},
{
Xtype: 'Radio ',
Name:'s ',
BoxLabel: 'female ',
FieldLabel :'',
LabelSeperator :''
},
{
Xtype: 'checkbox ',
Name: 'join ',
FieldLabel: 'join'
},
{
Xtype: 'combo ',
Name: 'city ',
FieldLabel: 'city ',
Store: cities,
Mode: 'local ',
DisplayField: 'value ',
Width: '20140901'
},
{
Xtype: 'textea ',
Name: 'description ',
FieldLabel: 'description ',
Width: 300
}
],
Buttons :[
{
Text: 'OK ',
Handler: function ()
{
Ext. Ajax. request ({
Url: 'www .126.com ',
Params :{
Name: fm. getForm (). findField ('name'). getValue (),
Date: fm. getForm (). findField ('description'). getValue ()
},
Success: function (response, options ){
Ext. Msg. alert ('success ');
},
Failure: function (response, options ){
Ext. Msg. alert ("fail ");
}
});
}
},
{
Text: 'cancel ',
Handler: function ()
{
Fm. getForm (). reset ();
}
}
]
});

ToolBar instance
Var tb = new Ext. Toolbar ({
RenderTo: document. body,
Items :[
{Xtype: 'tbbutton ', text: 'file', menu :[
{Text: '1', handler: function (){
Ext. Msg. alert ("1 ");
}},
{Text: '2', handler: function (){
Ext. Msg. alert ("2 ");
}},
{Text: '3', handler: function (){
Ext. Msg. alert ("3 ");
}
}]
},
{Xtype: 'tbbutton ', text: 'project', menu: [{text: '1'}, {text: '2'}, {text: '3'}]},
{Xtype: 'tbbutton ', text: 'configuration', menu: [{text: '1'}, {text: '2'}, {text: '3'}]},
{Xtype: 'textfield ', name: 'search', listeners: {specialkey: function (f, e ){
If (e. getKey () = e. ENTER)
{
Ext. Msg. alert (this. getValue ());
}
}}}]
});

 

Prompt instance
Ext. MessageBox. prompt ('this is a test ',
'Please input ',
Function (bnt, content)
{
Ext. MessageBox. alert ('content', content, function (bnt ){});
}
);

 

Date formatting
Var gedt = Ext. util. Format. date (fm. getForm (). findField ('currentdate'). getValue (), 'Y-m-d ');

 

DateField Deformation
Var chromeDatePickerCSS = ". x-date-picker {border-color: # 1b376c; background-color: # fff; position: relative; width: 185px ;}";
Ext. util. CSS. createStyleSheet (chromeDatePickerCSS, 'chromedatepickerstyle ');

 

Chinese support
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8">
<Script type = "text/javascript" src = "../ext2/source/locale/ext-lang-zh_CN.js"> </script>

Ajax submission form
Ext. Ajax. request ({
Url: 'http: // 127.0.0.1: 8080/LabShiftPrj/userAction. action ',
Params :{
UserName: fm. getForm (). findField ('username'). getValue (),
Password: fm. getForm (). findField ('Password'). getValue ()
},
Success: function (response, options ){
Var respText = Ext. util. JSON. decode (response. responseText );

Ext. MessageBox. alert ('register ', respText. result );
Fm. getForm (). findField ('username'). setValue ("");
Fm. getForm (). findField ('Password'). setValue ("");
},
Failure: function (response, options ){
Ext. MessageBox. alert ('register ', 'create account failed .');
}
});

 

Check box
{
Xtype: 'checkbox ',
FieldLabel: 'marital status ',
Name: 'marry'
}

If (fm. getForm (). findField ('marry'). getValue () = true)
{
Ext. Msg. alert ('marital status', 'married ');
}
Else
{
Ext. Msg. alert ('marital status', 'unmarried ');
}

 

Static tree
New Ext. tree. TreePanel ({
RenderTo: document. body,
Animate: true,
Title: "Extjs static Tree ",
Collapsible: true,
RootVisible: true,
AutoScroll: true,
AutoHeight: true,
Split: true,
Width: 200,
Lines: true,

Loader: new Ext. tree. TreeLoader ({
PreloadChildren: true,
ClearOnLoad: false
}),
Root: new Ext. tree. AsyncTreeNode ({
Id: "root ",
Text: "Root Node ",
Expanded: true,
Leaf: false,
Children :[{
Text: 'subnode 1 ',
Leaf: true
},{
Text: 'subnode 2 ',
Children :[{
Text: "111 ",
Leaf: true,
Href: 'www .126.com'
}]
}]
}),
Listeners :{
Click: function (n ){
Ext. Msg. alert ('navigation Tree click', 'you clicked: "'+ n. attributes. text +'", id = '+ n. attributes. href );
}
}
});

 

Confirm Box
Ext. MessageBox. confirm ('confirmed', 'Do you really need to delete you '+ userName +' the specified lab '+ labName, function (B ){
If (B = 'yes ')
{
Ext. Msg. alert ('result', 'deleted successfully! ');
}
});