With the rapid development of various JS frameworks (such as extjs and jquery), many websites have begun to use these frameworks for design.
Web pages. To improve user experience, Ajax technology is widely used to dynamically implement many web pages,
This article takes grid of extjs as an example to introduce the interaction between the server using webbroke and the JS framework.
First, let's look at the following page:
This page dynamically displays a payroll for a single employee and enables page flip. This is a typical extjs grid.
The page code is as follows:
<! Doctype HTML public "-// W3C // dtd html 4.01 // en" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb3212">
<Title> Hello </title>
<LINK rel = "stylesheet" type = "text/CSS" href = "/extjs/resources/CSS/ext-all.css"/>
<SCRIPT type = "text/JavaScript" src = "/extjs/adapter/EXT/ext-base.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript" src = "/extjs/ext-all.js"> </SCRIPT>
<SCRIPT type = "text/JavaScript">
Ext. onready (function (){
Ext. blank_image_url = "/extjs/resources/images/default/s.gif ";
// Create the Data Store
VaR store = new Ext. Data. jsonstore ({
Root: 'topics ',
Totalproperty: 'totalcount ',
Idproperty: 'threadid ',
Remotesort: True,
Fields :[
'Xh', 'xm ', 'pym', 'rsxh ',
{Name: 'byts', type: 'int '},
'Jbgz ',
{Name: 'Hj ', type: 'float'}, 'sfzh'
],
Proxy: New Ext. Data. httpproxy ({
URL: '/web/OA? Path = getdata'
})
});
Store. setdefaultsort ('bh ', 'desc ');
// Pluggable renders
Function rendertopic (value, P, record ){
Return string. Format (
'<B> <a href = "http://extjs.com/forum/showthread.php? T = {2} "target =" _ blank "> {0} </a> </B> <a href =" http://extjs.com/forum/forumdisplay.php? F = {3} "target =" _ blank "> {1} Forum </a> ',
Value, record. Data. forumtitle, record. ID, record. Data. forumid );
}
Function renderlast (value, P, R ){
Return string. format ('{0} <br/> by {1}', value. dateformat ('m J, Y, G: I A'), R. data ['lastposter']);
}
VaR pagingbar = new Ext. pagingtoolbar ({
Pagesize: 25,
Store: store,
Displayinfo: True,
Displaymsg: 'number of people displayed {0}-{1} of {2 }',
Emptymsg: "No data ",
Items :[
'-',{
Pressed: True,
Enabletoggle: True,
Text: 'Show preview ',
CLS: 'x-BTN-text-Icon details ',
Togglehandler: function (BTN, pressed ){
VaR view = grid. getview ();
View. showpreview = pressed;
View. Refresh ();
}
}]
});
VaR grid = new Ext. Grid. gridpanel ({
El: 'topic-grid ',
Width: 700,
Height: 500,
Title: 'employee payroll ',
Store: store,
Trackmouseover: false,
Disableselection: True,
Loadmask: True,
// Grid Columns
Columns :[{
ID: 'topic ', // ID assigned so we can apply m css (e.g .. X-grid-col-Topic B {color: #333 })
Header: "No ",
Dataindex: 'xh ',
Width: 420,
// Renderer: rendertopic,
Sortable: True
},{
Header: "name ",
Dataindex: 'xm ',
Width: 100,
Align: 'right ',
// Hidden: True,
Sortable: True
},{
Header: "pinyin code ",
Dataindex: 'pym ',
Width: 70,
Align: 'right ',
Sortable: True
},{
Header: "days of the month ",
Dataindex: 'byts ',
Width: 70,
Align: 'right ',
Sortable: True
},{
ID: 'lastpost ',
Header: "pay-as-you-go ",
Dataindex: 'Hj ',
Width: 150,
// Renderer: renderlast,
Sortable: True
}],
// Customize view config
Viewconfig :{
Forcefit: True,
Enablerowbody: True,
Showpreview: True,
Getrowclass: function (record, rowindex, P, store ){
If (this. showpreview ){
P. Body = '<p> personnel No.:' + record. Data. rsxh + '</P> ';
Return 'x-grid3-row-expanded ';
}
Return 'x-grid3-row-collapsed ';
}
},
// Paging bar on the bottom
Bbar: pagingbar
});
// Render it
Grid. Render ();
// Trigger the data store Load
Store. Load ({Params: {start: 0, limit: 25 }});
});
/**
* @ Class Ext. UX. slidertip
* @ Extends Ext. Tip
* Simple plugin for using an Ext. Tip with a slider to show the slider Value
*/
Ext. UX. slidertip = ext. Extend (ext. Tip ,{
Minwidth: 10,
Offsets: [0,-10],
Init: function (slider ){
Slider. On ('dragstart', this. onslide, this );
Slider. On ('drag', this. onslide, this );
Slider. On ('dragend', this. Hide, this );
Slider. On ('deststroy', this. Destroy, this );
},
Onslide: function (slider ){
This. Show ();
This. Body. Update (this. gettext (slider ));
This. doautowidth ();
This. El. alignto (slider. Thumb, 'B-T? ', This. offsets );
},
Gettext: function (slider ){
Return slider. getvalue ();
}
});
</SCRIPT>
<LINK rel = "stylesheet" type = "text/CSS" href = "/IB/grid-examples.css"/>
<! -- Common styles for the examples -->
<LINK rel = "stylesheet" type = "text/CSS" href = "/IB/examples.css"/>
</Head>
<Body>
<SCRIPT type = "text/JavaScript" src = "../shared/examples. js"> </SCRIPT> <! -- Examples -->
<Div id = "Topic-grid"> </div>
</Body>
</Html>
This page mainly uses this sentence to obtain server-side data.
Proxy: New Ext. Data. httpproxy ({
URL: '/web/OA? Path = getdata'
})
What extjs needs is JSON data, while URL:/web/OA? Path = getdata is the JSON string to be returned.
The script code for getdata is:
<%
Uses sysutils, classes;
VaR
Start, limit, sort, Dir: string;
S: string;
Begin
Start: = request. queryfields. Values ['start'];
Limit: = request. queryfields. Values ['limit'];
Sort: = request. queryfields. Values ['sort '];
Dir: = request. queryfields. Values ['dir'];
S: = 'select * From gjj ';
If sort <> ''then
S: = S + 'order by "'+ sort +'" '+ ''+ dir;
Print (WM. datatojson (S, '0', '', nil ));
End.
%>
The function datatojson is used to generate a dataset Based on the SQL statements, the start line, the number of displays on each page, and the parameters, and generate a dataset Based on the dataset.
JSON string required by extjs. To generate JSON, we use the open-source super object Toolkit (haha, this is free of charge ),
Then implement this function on the server side (this example uses the Oracle database as a reference ).
Function TWM. datatojson (datasql, startp, endp: string;
Inparams: tstringlist = nil): string;
VaR
Alljson: isuperobject;
Datajson: isuperobject;
Recordjson: isuperobject;
Mycx: twebquery;
Totalcount: string;
Starti, endi, I: integer;
Begin
If startp = ''then
Starti: = 0
Else
Starti: = strtoint (startp );
Alljson: = tsuperobject. Create (stobject );
Mycx: = twebquery. Create (Self );
Mycx. Connection: = dBs;
Mycx. SQL. Clear;
Mycx. SQL. Add ('select count (*) from ('+ datasql + ')');
If inparams <> nil then
Begin
For I: = 0 to inparams. Count-1 do
Begin
If inparams. Names [I] <> ''then
Begin
Mycx. parambyname (inparams. Names [I]). asstring: =
Inparams. valuefromindex [I];
End;
End;
End;
Try
Mycx. open;
Except
On E: exception do
Begin
Result: = 'database opening error! '+ E. message;
Exit;
End;
End;
Totalcount: = mycx. Fields [0]. asstring;
If totalcount> '0' then
Begin
Datajson: = tsuperobject. Create (starray );
With mycx do
Begin
SQL. Clear;
If endp = ''then
Endi: = strtoint (totalcount)
Else
Endi: = strtoint (endp );
SQL. Add ('select * from (select tttz. *, rownum as nnnz from (');
SQL. Add (datasql );
SQL. Add (') tttz )');
SQL. Add ('where nnnz> = '+ inttostr (starti + 1) +' and nnnz <= '+ inttostr (starti + endi ));
If inparams <> nil then
Begin
For I: = 0 to inparams. Count-1 do
Begin
If inparams. Names [I] <> ''then
Begin
Mycx. parambyname (inparams. Names [I]). asstring: =
Inparams. valuefromindex [I];
End;
End;
End;
Try
Open;
Except
Result: = 'database opening error! 2 ';
Exit;
End;
While not EOF do
Begin
Recordjson: = tsuperobject. Create (stobject );
For I: = 0 to fields. Count-1 do
Begin
Recordjson. s [fields [I]. fieldname]: = Fields [I]. asstring;
End;
Datajson. O ['']: = recordjson;
Recordjson: = nil;
Next;
End;
End;
Alljson. O ['topics ']: = datajson;
Alljson. s ['totalcount']: = totalcount;
Datajson: = nil;
End;
Result: = alljson. asjson ();
Mycx. Free;
Alljson: = nil;
End;
In this way, our server can interact with extjs and generate the above page.
Haha, isn't it cool, very simple?
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
