[Encapsulation] using WCF + LINQ + extjs for simpler Grid

This seriesArticleList

1) security issues and solutions for Ajax access to XML Web Service

2) interaction between Ajax and WCF-the beauty of WCF

3) Ajax interaction with WCF-JSON

4) interaction between extjs and WCF: Spanning Tree

5) Use extjs + LINQ + WCF to create a simple grid

6) extjs + WCF + LINQ implement pagination Grid

7) Cross-origin access between extjs and WCF

8) Call restful WCF services Asynchronously

9) call WCF for upload and download in restful Mode

10) Cross-origin access between extjs and WCF

11) [adding bricks and tiles]: extjs + WCF + LINQ create a full-featured Grid

12) [encapsulation] create a simpler grid using WCF + LINQ + extjs

 

SendingAfter [adding bricks and tiles]: extjs + WCF + LINQ built the full-function grid article, I got a lot of attention and support from my friends and updated it several times. As a result, the article was too long, some friends also mentioned that such a programming method, hand writingCodeThe amount of code is too large, especially the amount of code in extjs is particularly heavy, which greatly affects the interest and confidence in this method. Because I also learned extjs for the first time, I still cannot be able to work well on its application. So over the past few days, I have made a comprehensive reconstruction of the implementation in the previous article. The main purpose of this reconstruction is:

1. Sort out the original messy code
2. Through encapsulation, extjs code is greatly reduced
3. Better interaction between client script framework extjs and WCF

In fact, I wrote this series of articles and didn't really care about the appearance of extjs. I think extjs is a very good Ajax framework with complete encapsulation, so I finally chose extjs, but I hope that through the interaction and encapsulation of extjs and WCF, I can also apply it to other excellent Ajax frameworks, such as jquery and Asp.net Ajax. I personally think that although these articles are simple, they are definitely not a simple test, nor are they just a few new technologies used to attract everyone's favor, I want more people to participate in and support this development model. I think it is more stylish than webform!

If this is the first time you read this article, you 'd better read the previous article [adding bricks and tiles]: extjs + WCF + LINQ to create a full-featured grid, because it is closely related to this article.

Let's take a look at the features of the encapsulated extjs grid:

1. Paging Query
2. Sort
3. Multi-field filtering
4. Excel export, including single-page export and full export
5. Multiple choice Columns
6. Batch Delete
7. Batch update
8. Add new record
9. Clear filtering and query again

After finishing the features, let's take a look at the effect of this encapsulation:

1. It shields the compent such as store, proxy, and reader in extjs. You can directly set svcurl without worrying about the interaction details between extjs and WCF.
2. Using this grid enables us to have a pattern when developing the WCF Service, which is equivalent to defining the interface, so that the service development work can be followed more regularly.

Next, let's look at the new features of the encapsulated grid.

Configuration Options	Description
Svcurl: String	This option is used to specify the WCF Service address used for extjs.
Datafields: Ext. Data. Record	This option is used to set the data structure of the interactive row record with WCF, which is equivalent to the dataitem in each row of the gridview in ASP. NET.
Datakey: String	Set the primary key attribute of the data record, which is equivalent to the datakeys of the gridview in ASP. NET.
Sortinfo: String	Default sorting expression
Pagesize: Number	Maximum number of records per page
Gridformel: String	The form must have at least one <form> On the page because it is in the update, delete, and other submission operations. Here, the value of the Form ID is set, for example, the page contains <Form ID = 'form1 '.., you can set it to 'form1 'here'
Gridformfiled: String	It is still the form required during data submission. At least one form is contained in the page, which can be set to hidden and viewed as viewstate in ASP. NET. The value of this form is the form ID.
Addpanel: Ext. formpanel	The form for adding a new record is flexible, so you need to design it separately and set this option.

 

The preceding options are required. A simple example is as follows:

// Create an editable Grid ObjectVaRGrid =NewApp. jillzhanggrid ({svcurl:'Service/pagegridservice. svc', Sortinfo: {field:"Productid", Direction:"DESC"}, Datakey:'Produtid', Datafields: product, pagesize: 25, gridformel:'Form1', Gridformfiled:'Data', Addpanel: addform, renderto:'Page-grid', CM: cm, SM: Sm2,// Set the name column to adaptive sizeAutoexpandcolumn:'Name', Height: 400, width: 600,// Custom controlPlugins: [checkcolumn, filters], title:'Product information'});
 

For specific usage, refer to the instance project to open the instance. The original code can be reduced by at least 85%.

For the Service's WCF, there is also a good mode. According to the function, we need to implement the following methods in the corresponding WCF Service

Method	Remarks
Select	Used for sorting by PAGE
Delete	Batch Delete
Add	Used to add a new record
Update	Used for batch update
Exportexcel	Export Excel-all data
Pageexportexcel	Export Excel: only export the current page

The service code is long and can be referred to in the instance Project

I will post a few below to end this article:

 

Instance project: http://files.cnblogs.com/jillzhang/ExtJs_Wcf_Linq_PageGrid_0818.rar

 

Finally, I would like to extend my warm congratulations to the Chinese table tennis team for winning the championship. Wang Hao, Ma Lin, Wang liqin, and Liu Guoliang are our heroes. They cheered for their victory and cheered for their next match!

 

List of articles in this series

1) security issues and solutions for Ajax access to XML Web Service

2) interaction between Ajax and WCF-the beauty of WCF

3) Ajax interaction with WCF-JSON

4) interaction between extjs and WCF: Spanning Tree

5) Use extjs + LINQ + WCF to create a simple grid

6) extjs + WCF + LINQ implement pagination Grid

7) Cross-origin access between extjs and WCF

8) Call restful WCF services Asynchronously

9) call WCF for upload and download in restful Mode

10) Cross-origin access between extjs and WCF

11) [adding bricks and tiles]: extjs + WCF + LINQ create a full-featured Grid

12) [encapsulation] create a simpler grid using WCF + LINQ + extjs