The strongest learning notes in ext's first week history-gridpanel (basic)

If you want to implement special effects, this text is not suitable for you, but if you want ext Article I think Xiaowen is very suitable for you.
In addition, this tutorial is based on ext2.2. This is not described in many tutorials. Confusing. I would like to note here
There are many tutorials on the Internet, but there are not many practical examples. I would like to give my friends on the Internet some help as a weekly summary. I hope you can use it. I will explain in every detail, and try not to miss the basic knowledge that beginners need to know. The first time I wrote a tutorial, I laughed.
Because I learned this process, I learned about other controls through a control, and the rest is the property query API. I am translating the CHM version of the API. Because it is a personal operation. So time is limited .. Sorry.
In Ext. The first thing we need to deal with is grid. So do I. I am tied to grid and ext.
Next, let's talk about the declaration form of the ext class.
Take grid as an Example
JS Code Copy code The Code is as follows: var grid = new Ext. Form. gridpanel ({
Here is the property.
});
VaR grid = new Ext. Form. gridpanel ({
Here is the property.
});

This statement is very similar to Java object-oriented. Using the new keyword as an example of creating the gridpanel class, the basic knowledge about object-oriented is not shown here. It is only common to use the object-oriented concept when writing this summary. I personally think that learning Program No matter whether you want to learn Java. Think in Java must be read. If you want to learn it well, you 'd better read the English version. Because you can try again and again. Deepen your impression. I have seen half of them think that he has played a major role in a person's procedural thinking. Okay.
Anyone who knows OOP knows that there is a constructor in the class. When implementing the class instance, the property values or call methods in the constructor will be initialized.
However, the attribute value assignment in ext is not "=" ":".
The above is the theory. In fact, the process is like this.
VaR grid = new Ext. Form. gridpanel (); instantiate the object of a class.
{} Contains the initialization property value passed to this class. Because I haven't studied the core code, and I haven't gotten to it yet, it doesn't explain how to transfer and implement it. It will be explained in my later ext learning experience.
Extend the example above.
Java code Copy code The Code is as follows: var grid = new Ext. Form. gridpanel ({
ID: 'LIST-account-panel ',
DS: datastore,
CM: usercm,
SM: selectboxmodel,
Tbar: menubar,
Bbar: pagingbar,
Loadmask: {MSG: loading data ...'},
Layout: 'fit ',
Autoscroll: True
});
VaR grid = new Ext. Form. gridpanel ({
ID: 'LIST-account-panel ',
DS: datastore,
CM: usercm,
SM: selectboxmodel,
Tbar: menubar,
Bbar: pagingbar,
Loadmask: {MSG: loading data ...'},
Layout: 'fit ',
Autoscroll: True
});

These are common attributes that will be extended from here to other parts.
In this way, a strength object is declared and initialized.
You understand this process. If you really understand it, as long as you are familiar with the API and understand the attributes and methods of components, you can create any components you want. For example, gridpanel. Panel and tree. The truth is hutong. Now, let's take a look at this key basic part, followed by Attributes. If you are interested, continue to look at it.
In some tutorials, an attribute El of ext2.2 is used here. This attribute binds the control to the specified page element, but because of this El, instead, you can only bind your thinking to page elements. In fact, you sometimes need to add the grid to the tabpanel. At this time, El is not required. Sometimes you can create a new gridpanel class and inherit the gridpanel class. The Ext. applyif method is used during the creation process to demonstrate that the new class does not have the attributes of the original class. In this way, when calling a new class, the new class can pass an attribute value such as El. I have created a class encapsulation. Next we will talk about the encapsulation of this extension class. Finish the basic knowledge of grid first.
Let's take a look at the example above. ID is the unique ID number set up by Ext. the ID number should be as unique as possible throughout the project, which makes it easy for you to identify other problems. For example, the ID issue occurs when tabpanel component HTML is called.
DS, which is used to set the data source.
The sample code is as follows:
Java codeCopy code The Code is as follows: datastore = new Ext. Data. Store ({
Proxy: New Ext. Data. httpproxy ({
URL: 'php/article_list.php ',
Disablecaching: false
}),
Reader: New Ext. Data. jsonreader ({
Root: 'results ',
Totalproperty: 'Total ',
ID: 'id'
},[
{Name: 'id '},
{Name: 'name '},
{Name: 'typename '},
{Name: 'time '},
])
});
This. datastore. Load ({Params: {start: 0, limit: This. mypagesize }});
Datastore = new Ext. Data. Store ({
Proxy: New Ext. Data. httpproxy ({
URL: 'php/article_list.php ',
Disablecaching: false
}),
Reader: New Ext. Data. jsonreader ({
Root: 'results ',
Totalproperty: 'Total ',
ID: 'id'
},[
{Name: 'id '},
{Name: 'name '},
{Name: 'typename '},
{Name: 'time '},
])
});
This. datastore. Load ({Params: {start: 0, limit: This. mypagesize}); there are many things to explain here ..
Since ext is used on a website, it is certainly not static, because most of me is for server interaction rather than directly reading XML files. So here I use the server to read data.
Proxy: New Ext. Data. httpproxy ({
URL: 'php/article_list.php ',
Disablecaching: false
});

This is simple. You can see it at a glance. Httpproxy: This is a data transfer request to a local file. This is easy to understand. The core code is not studied, and the specific operation process is not named. But as a class. You only need to know how to use it.
However, here is a concept where anonymous functions are used. It cannot be an anonymous function... How can this problem be solved...
The proxy property sends a request to a file in one form .. Attribute assignment can be the name of the created instance or an anonymous instance created with the new keyword. I don't know if I can understand this.
Reader sets the Data Reading method for this data source. In this example, jsonreader is used. arreyreader can also be used. This depends on the specific requirements. The property value can be an object or an anonymous instance object. It may also be a method. I have never tried it. It's just an idea.Copy codeThe Code is as follows: New Ext. Data. jsonreader ({
Root: 'results ',
Totalproperty: 'Total ',
ID: 'id'
},[
{Name: 'id '},
{Name: 'name '},
{Name: 'typename '},
{Name: 'time '},
])

Let's talk about this part. This is a concise and standard jsonreader method.
First, describe the JSON data format. This is very important. I have carried a big heel on it. I only know what format to use for JSON data transmission, but I don't know what format it is.
({"Total": "5", "Results": ["ID": "28", "name": "sampeng", "typename": "This is a type ", "Time": "2008.02.02"]})
This is a returned record. If there are multiple.
({"Total": "5", "Results": ["ID": "28", "name": "sampeng", "typename": "This is a type ", "Time": "2008.02.02", {second },{ third },{ fourth}]})
Can you see it? Well, I don't know how many words I can use. To sum up.
If you build a JSON array for Ext. It should be in this format.
{Test: 'test '}
This braces must be added.
The name attribute stated above in test is used as a tag to tell jsonreader how to truncate the data.
I wrote in PHP and returned the JSON data returned in the above example.
Echo $ callback. '({"Total": "'. $ article_num. '", "Results":'. json_encode ($ result_array ).'})';
Have you seen it. I must construct the JSON array format, and the markup symbol must be the same as that on jsonreader.
That is, the value intercepted by total and results is specified in this return. If the format is different, no data can be read.
Looking back at the root attribute, It is the JSON data format value after the results tag. Attributes after jsonreader
{Name: 'id '},
{Name: 'name '},
{Name: 'typename '},
{Name: 'time '},
Is used to intercept the JSON array.
Finally, load. This is just a definition and is instantiated. You have not performed any operations on it.
This is easy to understand. It's like you wash your clothes and keep them in the washing machine. But if you don't switch on or power off, your clothes won't be clean.
Because the stroy data source is created, you can call its method. One method in stroy is load. Load the data. That is, the laundry is started. Haha ~
Next, return to the gridpanel attribute above.
CM: usercm
This is the column header of the table. What. You don't know what a column header is .. You can wash and sleep.
Java code
VaR CM = new Ext. Grid. columnmodel ([
Selectboxmodel,
{Header: 'Article No. ', dataindex: 'id', tooltip: 'Article No '},
{Header: 'Article title', dataindex: 'name', tooltip: 'Article name '},
{Header: 'Article type', dataindex: 'typename', tooltip: 'Article category '},
{Header: 'modification time', dataindex: 'time', tooltip: 'modification time '}
]);
Cm. defaultsortable = false;
VaR CM = new Ext. Grid. columnmodel ([
Selectboxmodel,
{Header: 'Article No. ', dataindex: 'id', tooltip: 'Article No '},
{Header: 'Article title', dataindex: 'name', tooltip: 'Article name '},
{Header: 'Article type', dataindex: 'typename', tooltip: 'Article category '},
{Header: 'modification time', dataindex: 'time', tooltip: 'modification time '}
]);
Cm. defaultsortable = false; do not want to say anything .. The only note here is that tooltip enables the mouse prompt. There is no difference between other and new instances. New-> class name-> constructor-> attribute
Defaultsortable is used to set whether to sort data. I set false because my ext is not localized. The sort button is in English. So I set false. You can also set columns separately.
Tbar: menubar,
Bbar: pagingbar,
These two attributes are used to set the header toolbar and the bottom toolbar. There can be buttons on the toolbar.
This is the tool button at the bottom and top. The description is written in the program code .. I have the habit of writing descriptions.
Java code
VaR menubar = [{
<Span style = "color: #000000"> text: 'add ',
Tooltip: 'Add a new file', <span> // button reminder function </span>
Iconcls: 'additem', // <span> icon. I understand everything in English. </span>
Handler: function () {// <span> the handler attribute is followed by a method that binds the event processing result after you click this button </span>
VaR createwin = new sampeng. Account. Create (); // <span> I compress the file into a class package. Therefore, create an instance directly. </Span>
Createwin. Show (); // <span> Add the page to display. This method ignores the El binding problem. </Span>
}
},'-',{
ID: 'grid-edit-click ',
Text: 'modify ',
Tooltip: 'modify this topic ',
Iconcls: 'edititem ',
Disabled: True,
Handler: function (){
VaR record = ext. getcmp ('LIST-account-panel '). getselectionmodel (). getselected ();
VaR editwin = new sampeng. Grid. Edit ({ID: record. ID });
Editwin. Show (); // modify the interface display
}
},'-',{
ID: 'grid-delete-click ',
Text: 'delete ',
Tooltip: 'delete selected articles ',
Iconcls: 'delete ',
Disabled: True,
Handler: function (){
New sampeng. Grid. deleteitem ({panel: 'LIST-account-panel '});
}
}];
VaR pagingbar = new Ext. pagingtoolbar ({
Pagesize: This. mypagesize,
Store: This. datastore,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: "No data"
}); // <Span> This is the bottom button of a page. Uh .. I don't know how to explain it. I have written a copy directly to someone else. I think there is no need to change. </Span>
VaR menubar = [{
Text: 'add ',
Tooltip: 'Add a new article ', // button reminder function
Iconcls: 'additem', // pull the icon. I understand everything in English.
Handler: function () {// the handler property is followed by a method, which is bound to the event processing after you click this button.
VaR createwin = new sampeng. Account. Create (); // I compress the file into a class package. Therefore, create an instance directly.
Createwin. Show (); // displayed on the add page. This method ignores the El binding issue.
}
},'-',{
ID: 'grid-edit-click ',
Text: 'modify ',
Tooltip: 'modify this topic ',
Iconcls: 'edititem ',
Disabled: True,
Handler: function (){
VaR record = ext. getcmp ('LIST-account-panel '). getselectionmodel (). getselected ();
VaR editwin = new sampeng. Grid. Edit ({ID: record. ID });
Editwin. Show (); // modify the interface display
}
},'-',{
ID: 'grid-delete-click ',
Text: 'delete ',
Tooltip: 'delete selected articles ',
Iconcls: 'delete ',
Disabled: True,
Handler: function (){
New sampeng. Grid. deleteitem ({panel: 'LIST-account-panel '});
}
}];
VaR pagingbar = new Ext. pagingtoolbar ({
Pagesize: This. mypagesize,
Store: This. datastore,
Displayinfo: True,
Displaymsg: 'display records from {0} to {1}, total records from {2 ',
Emptymsg: "No data"
}); // This is the bottom button of a page. Uh .. I don't know how to explain it. I have written a copy directly to someone else. I think there is no need to change. OK. The basics are finished... In the next article, I will explain how to encapsulate it in the class and use it as a new class that inherits the gridpanel class.
Repeat the statement. You cannot get a complete example here, not because I don't have it, but because I think it hurts you. What you need more is to query the API. If you know the method format, check the API. Isn't the rest of the work done to complete your program ideas. Thank you for reading my tutorial. Thank you.
I hate fast food tutorials, but I don't know if it's a common practice. Haha. Hope to help you.
Transcoder... I know there are such uploaders. The practicality of the connected content changes without looking at it.
Author: sampeng. Thank you.
I don't want to teach anyone any advanced technology, because I am also studying it. I just want to teach everyone a way of thinking. I have the ability to draw inferences from each other, so that I can really learn ext and start to understand it in depth. If you want to implement special effects, this text is not suitable for you, but if you want to learn ext with me, I think Xiaowen is very suitable for you.