Not long after reaching extjs, it has always been the DOTNET camp. One day I saw coolite on the Internet. However, it is not so easy to use. It may be the reason for your first contact .. There are even fewer information about coolite on the Internet. The only thing that can be expected is the official coolite forum. Although there are many cool people on its official forum and many problems have been solved through the Forum, they always feel that they are completely knowledgeable.
First of all, I think I should remember several keywords, and the attribute names are second to each other. The key is to understand the operating mechanism of controls and objects, and the step sequence is the focus.
1. About store, gridpanel
Gridpanel + STORE mechanism, I think so.
1) store wants to customize basic attributes such as ID (haha, this is nonsense), where <reader> is used to read the data structure defined by the dataset.
2) The structure definition requires the jsonreader object (I usually use this, jsonreader is only one of them)
3) <fields> contains N field objects <Ext: recordfield> and necessary attributes such as name and type
4) <sortinfo> is used to specify sorting rules.
Example: <Ext: store id = "storeinp" runat = "server" warningondirty = "false">
<Reader>
<Ext: jsonreader readerid = "fsipdid">
<Fields>
<Ext: recordfield name = "fsipdid"/>
<Ext: recordfield name = "fsipid"/>
<Ext: recordfield name = "fpid"/>
<Ext: recordfield name = "fbuid" type = "int"/>
<Ext: recordfield name = "fbuname"/>
<Ext: recordfield name = "fpquantity" type = "int"/>
<Ext: recordfield name = "fsbatch"/>
<Ext: recordfield name = "fspackquantity" type = "int" defaultvalue = "0"/>
<Ext: recordfield name = "fssinglequantity" type = "int" defaultvalue = "0"/>
<Ext: recordfield name = "ftotalquantity" type = "int" defaultvalue = "0"/>
</Fields>
</Ext: jsonreader>
</Reader>
<Sortinfo field = "fsipdid"/>
</Ext: store>
Note:
1) warningondirty is used to set whether a warning is prompted when data changes. Two related properties are involved: dirtywarningtitle = "system warning" dirtywarningtext = "data changed. You have not saved the data. Are you sure you want to load/refresh the data? ", From the attribute values, we can see what is used.
2) onrefreshdata is a major event. Data refresh events. If the store object contains the autoload attribute and the value is true, the event is automatically triggered when the object is loaded on the page. Then we can write operations such as getting the record set and binding data in the database for this event in the background. Example:
Protected void storeinp_refreshdata (Object sender, coolite. Ext. Web. storerefreshdataeventargs E)
{
This. storeinp. datasource = [dataset] \ [datatable] \ object []; // record set
This. storeinp. databind ();
}
3) pay attention to it. When autoload is set to true, it is common for paging to add automatic loading parameters to store. For example
<Autoloadparams>
<Ext: parameter name = "start" mode = "Raw" value = "0"/>
<Ext: parameter name = "Limit" mode = "Raw" value = "15"/>
</Autoloadparams>
After the store obtains the data, what gridpanel has to do is to render it. Gridpanel is the simplest to present. You only need to set attributes and add the <columnmodel> set. Required attributes include ID, runat = "server", and storeid. To make the grid more beautiful, attributes such as trackmouseover and border can be used. Trackmouseover is the track effect for the grid when the mouse passes through. Border adds a rounded border to the grid. Example:
<Ext: gridpanel id = "gridoperator" runat = "server" striperows = "true" trackmouseover = "true" border = "true" storeid = "storeoperator">
<Columnmodel>
<Columns>
<Ext: rownumberercolumn/>
<Ext: column header = "Login Name" dataindex = "fsoplogid"/>
<Ext: column header = "name" dataindex = "fsopname"/>
<Ext: column header = "gender" dataindex = "fsow.x" width = "35">
<Renderer fn = "gridfield_sexstate"/>
</Ext: column>
<Ext: column header = "contact number" dataindex = "fsoptel"/>
<Ext: column header = "add time" dataindex = "fsopjoindt">
<Renderer fn = "gridfield_datetime"/>
</Ext: column>
<Ext: column header = "role group" dataindex = "fsrname">
</Ext: column>
<Ext: column header = "available" dataindex = "fenabled" width = "35">
<Renderer handler = "Return (value> 0 )? True: false; "/>
</Ext: column>
</Columns>
</Columnmodel>
</Ext: gridpanel>
Note: ext: rownumberercolumn is used to add an automatic number column to the grid. <Ext: column> all have required attributes such as the column header and data field name dataindex.
<Renderer> is an extension method for column rendering. FN and handler are commonly used to customize the rendering effect. FN generally corresponds to the Script Function Name and handler corresponds to the script Code , Value is the cell value obtained by the current column.
Note: When binding data in the Asp.net background code, you only need to bind the data to the store. Because the storeid attribute of the grid is associated with the store, you do not need to control it in the background.
Summary:
1. the backend obtains the database query data and binds it to the store object.
2. After the store object obtains data. The defined <reader> reads data to the local (client) memory.
3. If the grid is already associated with a data warehouse with a storeid, it is displayed through columns in columns.
4. The Renderer in the column object can flexibly extend the rendering Effect of Data Field Values.
The above is the entry-level simple gridpanel + store to present data.
