Extjs framework Learning (1)

I recently came into contact with extjs framework (Version 2.0) because of my work. however, it is complicated to use. I will expose the problems I encountered during the learning process and the solutions to the problems for later reference, correction, and research.
Because of the data format conversion problem, newtonsoft is used here. JSON converts a business object to a string. it is an open-source tool that can be searched and downloaded online and used legally.
I want Program The most common task is to read data from a data source and present it on a carrier. first, we will use extjs to read two pieces of data from the database (SQL Server.
First, let's do what we are most familiar with. Visit the database and read several records. we can choose to create a new ASPX page, but remember to clean up the HTML elements, do not leave a little bit, and then write and access the database in page_load (). Code (Skipped), and then response. write (JSON), remember, this string JSON is a string in the converted JSON format. check the page, yeah. of course, there is a better way, that is, to create a new handler and ashx file, which can avoid HTML characters during the transmission process and will not be detailed. There is no difference with the code in the page_load () method, but the response. server side is basically finished in processrequest.

Then, return to the client and add the smallest set of extjs. Don't forget to add CSS :)
It is time to write JS at the critical moment. I hate writing JS most, but I can't help it. First, let's take a look at it. Haha, there are three lines of the five lines of code. I am dizzy. This onready method tells us that we can read the page. Now I understand it. It can be regarded as pageload.Well, there is a problem here. The onready function is exactly implemented after page loading. Its execution is after pageload, so it cannot be regarded as pageload. Haha :)

Ext. onready (function ()
{
Loaddata ();
}
)

Then let's take a look at the loaddata () method. This is a real item. 1
2 function loaddata ()
3 {
4 var CM = new Ext. Grid. columnmodel ([
5 {Header: 'itemid', dataindex: 'itemid', sortable: true} ,
6 {Header: 'unitprice', dataindex: 'unitprice '} ,
7 {Header: 'itemname', dataindex: 'itemname '} ,
8 {Header: 'categoryid', dataindex: 'categoryid '} ,
9 {Header: 'picturepath', dataindex: 'picturepath '}
10]);
11
12 var store = new Ext. Data. Store ( {
13 URL: '../testhandler/handler. ashx ',
14 reader: New Ext. Data. jsonreader ( {
15 ID: 'itemid ',
16 fields :[
17 {Name: 'itemid '} ,
18 {Name: 'unitprice '} ,
19 {Name: 'itemname '} ,
20 {Name: 'categoryid '} ,
21 {Name: 'picturepath '} ]
22})
23});
24
25 store. Load ();
26
27 var grid = new Ext. Grid. gridpanel ( {
28 El: 'grid1 ',
29 store: store,
30 cm: cm,
31 Height: 500,
3width: 800
33} );
34
35
36 grid. Render ();
37}

Let's take a look at the details?
First, define a cm. What is it? This is Ext. Grid. columnmodel. Ext provides us with the column model of the table, which can define the column sorting function and so on.
Then a store is defined, which is like a table. The data to be displayed is placed in it. according to the URL we entered to access a process, return a string (note the format of this string), and then use the corresponding reader to read the string type, you can also set key values and other features.
OK. Finally, the data is taken from the database.
The rest is to put the data in the grid. Define a div with ID = grid1 on the page, and then return to the new gridpanel in JS. Then, it is OK to pass in the attributes such as ID value, data source, column, and height and width.
Finally, don't forget to load () the store and render () the grid. Oh, let's see the effect. What? If you have any questions, write them down to see who can help you.