My ext example

<Div id = "grid1"> </div>
<Div id = "grid2"> </div>
<Div id = "tree1"> </div>
<Div id = "tree2"> </div>

 

 

Ext. quicktips. INIT ();
Ext. onready (function (){

VaR fields = ["Address", "company", "name", "personid"];
VaR pagesize = 5;

Function createform (){
VaR newform = new Ext. Form. formpanel ({
Frame: True,
Border: false,
Width: 400,
Labelalign: 'right ',
Defaults :{
Xtype: 'textfield ',
Width: 150
},
Items :[{
Name: 'name ',
Fieldlabel: 'name ',
Allowblank: false,
Blanktext: 'name cannot be blank'
},{
Name: 'address ',
Fieldlabel: 'address ',
Allowblank: false,
Blanktext: 'address cannot be blank'
},{
Name: 'company ',
Fieldlabel: 'company ',
Allowblank: false,
Blanktext: 'Company name cannot be blank'
},{
Name: 'personid ',
Xtype: 'ddy'
}]
});
Return newform;
};

VaR CM = new Ext. Grid. columnmodel ([{
Header: "Address ",
Dataindex: "Address ",
Editor: New Ext. Grid. grideditor (New Ext. Form. textfield ({
Allowblank: false
}))
},{
Header: 'company ',
Dataindex: 'company ',
Editor: New Ext. Grid. grideditor (New Ext. Form. textfield ({
Allowblank: false
}))
},{
Header: 'name ',
Dataindex: 'name ',
Editor: New Ext. Grid. grideditor (New Ext. Form. textfield ({
Allowblank: false
}))
},{
Header: 'number ',
Dataindex: 'personid'
}]);

Function createjsonstroe (URL, fields ){
VaR storetemp = new Ext. Data. jsonstore ({
Root: 'root ',
Totalproperty: 'totalproperties ',
URL: URL,
Fields: Fields
});
Return storetemp;
};

Function createeditgridpanel (title, store, CM, Sm, afterediturl, addurl,
Delurl, editurl ){
VaR gridtemp = new Ext. Grid. editorgridpanel ({
Enabledragdrop: True,
Columnwidth:. 4,
Title: title,
Store: store,
CM: cm,
SM: Sm,
Autowidth: True,
Autoheight: True,
Viewconfig :{
// Forcefig: True
},
Listeners :{
"Afteredit": function (e ){
Ext. Ajax. Request ({
URL: afterediturl,
Params :{
ID: E. Record. Data. personid,
Field: E. Field,
Value: E. Value
},
Success: function (){
Ext. msg. Alert ("prompt", "modification successful! ");
Gridtemp. Store. Reload ();
},
Failure: function (){
Ext. msg. Alert ("prompt", "modification failed! ");
Gridtemp. Store. Reload ();
}

});
}

},

Bbar: New Ext. pagingtoolbar ({
Pagesize: pagesize,
Store: store,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: 'No records ',
Forcefit: True
}),
Tbar: New Ext. toolbar (['-',{
Text: "add ",
Handler: function (){
VaR fm = createform ();
VaR win = new Ext. Window ({
Title: 'add user ',
Modal: True,
Width: 400,
Buttonalign: 'center ',
Items: [FM],
Buttons :[{
Text: 'save ',
Handler: function (){
If (FM. getform (). isvalid ()){
FM. getform (). Submit ({
URL: addurl,
Success: function (){
Gridtemp. Store
. Reload ();
Win. Close ();
},
Failure: function (){
Ext. msg
. Alert (
"Prompt ",
"An error occurred while adding data. Please try again later! ");
}
});
}
}
},{
Text: 'reset ',
Handler: function (){
FM. getform (). Reset ();
}
},{
Text: 'cancel ',
Handler: function (){
Win. Close ();
}
}]
});
Win. Show ();
}

},'-',{
Text: 'delete ',
Handler: function (){
Ext. msg. Confirm ('info', 'Are you sure you want to delete it? ', Function (BTN ){
If (BTN = 'yes '){
VaR selectrow = gridtemp
. Getselectionmodel ()
. Getselections ();
For (VAR I = 0; I <selectrow. length; I ++ ){

VaR pid = selectrow [I]
. Get ("personid ");
Ext. Ajax. Request ({
URL: delurl,
Params :{
Personid: PID
},
Success: function (){
}
})
}
Ext. msg. Alert ("prompt", "deleted successfully! ");
Gridtemp. getstore (). Reload ();
}
})
}
},'-',{
Text: 'editor ',
Handler: function (){
VaR fm = createform ();
VaR record = gridtemp. getselectionmodel ()
. Getselections ();
If (record ){
FM. getform (). loadrecord (record [0]);
VaR win = new Ext. Window ({
Title: 'edit user ',
Modal: True,
Width: 400,
Items: [FM],
Buttonalign: 'center ',
Buttons :[{
Text: 'save ',
Handler: function (){
FM. getform (). Submit ({
URL: editurl,
Success: function (){
Ext. msg. Alert ("prompt ",
"Edited successfully! ");
Gridtemp. Store
. Reload ();
Win. Close ();
},
Failure: function (){
Ext. msg. Alert ("prompt ",
"Editing failed! ");
Win. Close ();
}
});
}
},{
Text: 'reset ',
Handler: function (){
FM. getform (). Reset ();
}
},{
Text: 'cancel ',
Handler: function (){
Win. Close ();
}
}]
})
Win. Show ();
}
}
}])
});
Return gridtemp;
};

VaR store = createjsonstroe ("person. Do? Method = personlist ", fields );
VaR grid = createeditgridpanel ("first table", store, CM,
New Ext. Grid. rowselectionmodel ({
Singleselect: false
}), "Person. Do? Method = Afteredit ",
"Person. Do? Method = saveperson "," person. Do? Method = deleteperson ",
"Person. Do? Method = updateperson ");
Grid. Render ("grid1 ");
Store. Load ({
Params :{
Start: 0,
Limit: pagesize
}
});

VaR store2 = createjsonstroe (
"Persondragtarget. do? Method = persondragtargetlist ", fields );
VaR grid2 = createeditgridpanel ("second table", store2, CM,
New Ext. Grid. rowselectionmodel ({
Singleselect: false
}), "Persondragtarget. do? Method = Afteredit ",
"Persondragtarget. do? Method = savepersondragtarget ",
"Persondragtarget. do? Method = deletepersondragtarget ",
"Persondragtarget. do? Method = updatepersondragtarget ");
Grid2.render ("grid2 ");
Store2.load ({
Params :{
Start: 0,
Limit: pagesize
}
});

VaR ddrow1 = new Ext. dd. droptarget (grid. View. mainbody ,{
Ddgroup: 'griddd ',
Copy: false,
Yydrop: function (DD, E, data ){
// How many rows are selected
VaR rows = data. Selections;
// Drag to the row
VaR Index = dd. getdragdata (e). rowindex;
If (typeof (INDEX) = "undefined "){
Index = 0;
}
// Modify the store
For (I = 0; I <rows. length; I ++ ){
VaR rowdata = rows [I];
If (! This. Copy ){
Ext. Ajax. Request ({
URL: 'persondragtarget. do? Method = deletepersondragtarget ',
Params :{
Personid: rowdata. Get ("personid ")
},
Success: function (){
}
});
Store2.remove (rowdata)
}
Ext. Ajax. Request ({
URL: 'person. do? Method = saveperson ',
Params :{
Name: rowdata. Get ("name "),
Address: rowdata. Get ("Address "),
Company: rowdata. Get ("company ")
},
Success: function (){
},
Failure: function (){
}
});
Store. insert (index, rowdata );
}
}
});

VaR ddrow2 = new Ext. dd. droptarget (grid2.view. mainbody ,{
Ddgroup: 'griddd ',
Copy: false,
Yydrop: function (DD, E, data ){

If (E. gettarget () = grid2.view. mainbody ){
Alert ("aaaa ");
Return;
}
// How many rows are selected
VaR rows = data. Selections;
// Drag to the row
VaR Index = dd. getdragdata (e). rowindex;
If (typeof (INDEX) = "undefined "){
Index = 0;
}
// Modify the store
For (I = 0; I <rows. length; I ++ ){
VaR rowdata = rows [I];
If (! This. Copy ){
Ext. Ajax. Request ({
URL: 'person. do? Method = deleteperson ',
Params :{
Personid: rowdata. Get ("personid ")
},
Success: function (){
}
});
Store. Remove (rowdata)
}
Ext. Ajax. Request ({
URL: 'persondragtarget. do? Method = savepersondragtarget ',
Params :{
Name: rowdata. Get ("name "),
Address: rowdata. Get ("Address "),
Company: rowdata. Get ("company ")
},
Success: function (){
},
Failure: function (){
}

});
Store2.insert (index, rowdata );
}
}
});

VaR root = new Ext. Tree. asynctreenode ({
ID: '0 ',
Text: 'I am the root'
});

VaR tree1 = new Ext. Tree. treepanel ({
Title: 'First demo ',
El: 'tree1 ',
Root: Root,
Loader: New Ext. Tree. treeloader ({
Dataurl: 'tree. do? Method = treeload'
}),
Enabledrag: True,
Ddgroup: 'treepanelgrounp'
});

VaR panel3 = new Ext. Panel ({
Columnwidth:. 2,
ID: 'target ',
Title: 'tree node information ',
Height: 300,
Bbar :['-',{
Text: 'add to the first table ',
Handler: function (){
If (! Panel3.body. Child ('table ')){
Alert ("select a message from the tree ");
Return;
}
VaR TDS = ext. Query ('# showmessage table TD ');
VaR name = TDS [0]. innerhtml;
VaR address = TDS [1]. innerhtml;
VaR Company = TDS [2]. innerhtml;
Ext. Ajax. Request ({
URL: 'person. do? Method = saveperson ',
Params :{
Name: Name,
Address: address,
Company: Company
},
Success: function (){
Ext. msg. Alert ("prompt", "saved successfully ");
Ext. Get ('showmessage'). Update ("drag the tree node on the right into the panel ");
Store. Reload ();
},
Failure: function (){
Ext. msg. Alert ("prompt", "failed to save ");
}
});
}
},'-',{
Text: 'add to second table ',
Handler: function (){
If (! Panel3.body. Child ('table ')){
Alert ("select a message from the tree ");
Return;
}
VaR TDS = ext. Query ('# showmessage table TD ');
VaR name = TDS [0]. innerhtml;
VaR address = TDS [1]. innerhtml;
VaR Company = TDS [2]. innerhtml;
Ext. Ajax. Request ({
URL: 'persondragtarget. do? Method = savepersondragtarget ',
Params :{
Name: Name,
Address: address,
Company: Company
},
Success: function (){
Ext. msg. Alert ("prompt", "saved successfully ");
Ext. Get ('showmessage'). Update ("drag the tree node on the right into the panel ");
Store2.reload ();
},
Failure: function (){
Ext. msg. Alert ("prompt", "failed to save ");
}
});
}
}, '-'],
HTML: '<Div id = "showmessage" style = "height: 270px "align =" center "> drag the tree node on the right into the Panel </div> <Div id =" TBB "style =" height: 50px "> </div> ',
Afterrender: function (){
Ext. Panel. Prototype. afterrender. Apply (this, arguments );
This. droptarget = This. Body. Child ('div # showmessage ');
VaR T = new Ext. xtemplate ('<Table Style = "font-size: 20"> <tr> <TH> Name: </Th> <TD> "{name}" </TD> </tr> '+
'<Tr> <TH> company: </Th> <TD> {company} </TD> </tr>' +
'<Tr> <TH> address: </Th> <TD> {address} </TD>' +
'</Table> ');
T. Compile ();
VaR ddtg = new Ext. dd. droptarget (this. droptarget ,{
Ddgroup: 'treepanelgrounp ',
Yydrop: function (DD, E, node ){
Ext. domhelper. Overwrite ('showmessage ','');
T. append ('showmessage', node. node. attributes );
// Var MSG = '<Table Style = "font-size: 20px"> <tr> <TH> name: </Th> <TD>'
// + Node. node. Attributes. Name
// + '</TD> </tr>'
// + '<Tr> <TH> company: </Th> <TD>'
// + Node. node. Attributes. Company
// + '</TD> </tr>'
// + '<Tr> <TH> address: </Th> <TD>'
// + Node. node. Attributes. Company
// + '</TD> </tr>'
// + '</Table> ';
// Panel3.body. Child ('div # showmessage'). Update (MSG );
}
});
}
});

VaR center = new Ext. tabpanel ({
Region: 'center ',
Activetab: 0,
Items :[{
Layout: 'column ',
Title: 'Basic table functions ',
Layoutconfig :{},
Items: [panel3, grid, grid2]
}]

});

VaR West = new Ext. Panel ({
Width: 200,
Region: 'west ',
Layout: 'accordion ',
Title: 'demo wizard ',
Defaults :{},
Layoutconfig :{},
Items: [tree1 ,{
Title: 'Third demo ',
HTML: 'Third demo'
}]
});

VaR view = new Ext. viewport ({
Layout: 'border ',
Items :[{
Region: 'north ',
Height: 80,
HTML: 'North'
}, West, center]
});

});