Use Delphi to develop Web (4) use ajax to interact with extjs

Source: Internet
Author: User

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?

 

 

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.