Ext JS, delete and change Ext.Net.Store detailed tutorial

The content of this article
Introduced
Demo use Ext JS to delete and change Ext.Net.Store
Description
Resources

Introduced
When I use ext.net, I never get rid of the way that I originally developed the asp.net application, that is, the interaction between the front and the back. When you use asp.net way of thinking, develop ext.net, you will find application problems are many, I have seen, for example, the page flash very bad (refresh too many times, although also local refresh); page script error, page CSS error, and so on. This fully illustrates the erroneous use of ext.net. Not understanding Ajax. Knowing that participation is often a different one.

Now, I do not want to use asp.net nearly all the way to refresh the page (although it can be completely local refresh, but it is not convenient, especially for development), also do not want to use a similar jquery+html local refresh, because this will write too many scripts.

Ext.net This Ajax framework provides a good way to do this. Lets you weigh the scripting code against the backend code. Because, Ext.net is using the. Net Package of Ext JS, you can use Ext.net, you can also write Ext JS code freely.

For example, use Ext.net to drag and drop controls to the page, rather than write a bunch of Ext JS script to create, and, if necessary, write Ext JS scripting page elements. All operations are performed at the front end and are sent to the server side.

Demo use Ext JS to delete and change Ext.Net.Store
Gridpanel Mark
Suppose the page has a Ext.Net.GridPanel and a Ext.Net.Store. However, when page initialization (first initialization) does not load any data, the store also has no onrefreshdata events.

The code is as follows

Copy Code

<ext:gridpanel id= "GridPanel1" runat= "Server" autoheight= "true" width= "title=" "Plant" > <Store> <ext:store id= "Store1" runat= "Server" > <Reader> <ext:arrayreader idproperty= "Intcolumn" > <Fields> <ext:recordfield name= "Intcolumn" type= "Int"/> <ext:recordfield name= "Doublecolumn" type= "Float"/> <ext:recordfield name= "Stringcolumn" type= "String"/> <ext:recordfield name= "Datetimecolumn" type= "Date" dateformat= "y-m-d"/> <ext:recordfield name= "Boolcolumn" type= "Boolean"/> </Fields> </ext:ArrayReader> </Reader> <sortinfo field= "Intcolumn" direction= "ASC"/> </ext:Store> </Store> <columnmodel id= "ColumnModel1" runat= "Server" > <Columns> <ext:column header= "Intcolumn" dataindex= "Intcolumn"/> <ext:column header= "Doublecolumn" dataindex= "Doublecolumn"/> <ext:column header= "Stringcolumn" dataindex= "Stringcolumn"/> <ext:datecolumn header= "Datetimecolumn" dataindex= "Datetimecolumn" format= "y-m-d"/> <ext:column header= "Boolcolumn" dataindex= "Boolcolumn"/> </Columns> </ColumnModel> <SelectionModel> <ext:rowselectionmodel id= "RowSelectionModel1" runat= "Server" singleselect= "false" > </ext:RowSelectionModel> </SelectionModel> <View> <ext:groupingview id= "GroupingView1" runat= "Server" forcefit= "true"/> </View> </ext:GridPanel>

Manipulate the Store button tag

The code is as follows	Copy Code
<div style= "Float:left" > <div> <ext:button id= "Button1" runat= "Server" icon= "Accept" text= "Demo Store.add" > <Listeners> <click handler= "Youradd (Store1);"/> </Listeners> </ext:Button> </div> <br/> <div> <ext:button id= "Button2" runat= "Server" icon= "Accept" text= "Demo Store.insert" > <Listeners> <click handler= "Yourinsert (Store1);"/> </Listeners> </ext:Button> </div> <br/> <div>

Use Ext JS to delete and change Store

The code is as follows	Copy Code
Add (ext.data.model[] records): Array Addsorted (ext.data.model[] records): Array Insert (number index, ext.data.model[] records): void Remove (Ext.data.model/array records, Object ismove): void RemoveAll (Boolean silent): void RemoveAt (number index): void

The following demo with Ext JS to change the store.

The code is as follows

Copy Code

<script type= "Text/javascript" > var key = 0; var data = [ [1, 33.33, "String_0", "2012-01-01", true], [3, 33.33, "string_1", "2012-01-01", false], [5, 33.33, "string_2", "2012-01-01", true], [7, 33.33, "String_3", "2012-01-01", false] ]; Ext.onready (function () { Store1.proxy = new Ext.data.MemoryProxy (data), Store1.loaddata (data, true); }); var Ds_model = Ext.data.Record.create ([ ' Intcolumn ', ' Doublecolumn ', ' Stringcolumn ', ' Datetimecolumn ', ' Boolcolumn ' //]); var Ds_model = Ext.data.Record.create ([ {name: ' Intcolumn ', type: ' Int '}, {name: ' Doublecolumn ', type: ' Float '}, {name: ' Stringcolumn ', type: ' String '}, {name: ' Datetimecolumn ', type: ' Date '}, {name: ' Boolcolumn ', type: ' Boolean '} ]); var youradd = function (store) { key++; key++; var newdata = new Ds_model ( { Intcolumn:key, Doublecolumn: (Key * 100)/3, Stringcolumn: "String_" + 99, Datetimecolumn: ' 1999-01-01 ', Boolcolumn:false }) Newdata.commit (); Store.add (NewData); }; var youraddsorted = function (store) { key++; key++; var newdata = new Ds_model ( { Intcolumn:key, Doublecolumn: (Key * 100)/3, Stringcolumn: "String_" + 99, Datetimecolumn: ' 1999-01-01 ', Boolcolumn:false }) Newdata.commit (); Store.addsorted (NewData); }; var Yourinsert = function (store) { key++; key++; var newdata = new Ds_model ( { intcolumn:key++, Doublecolumn: (Key * 100)/3, Stringcolumn: "String_" + key, Datetimecolumn: ' 1999-01-01 ', Boolcolumn:false }) Newdata.commit (); Store.insert (0, NewData); }; var yourremove = function (store, grid) { var record = Grid.getselectionmodel (). getselected (); if (record!= undefined) { Store.remove (record); Grid.getselectionmodel (). Clearselections (); } else { Alert (' not selected. '); } }; var yourremoveat = function (store, removeatvalue) { Store.removeat (Removeatvalue); }; var yourremoveall = function (store) { Store.removeall (); }; var yourloaddata = function (store) { Store.loaddata (data); }; </script>

As an analogy, the Store is equivalent to the. NET Framework DataTable, and the record is equivalent to DataRow.

The code is as follows	Copy Code
Ext.Net.Store (ext.net)/Ext.data.Store (Ext JS) is equivalent to Syste.Data.DataTable Ext.Net.RecordField (ext.net)/Ext.data.Recrod (Ext JS) is equivalent to System.Data.DataRow

Description

The original website Add method's prototype is: Add (Object data): Array. is not the same as the Insert method. It's supposed to be the same. Personally feel the official website clerical error, tried half a day error. Pressing the Insert parameter is no problem.

In fact, in my opinion, with EXT JS Direct Operation Ext.Net.Store is not very meaningful, unless you want to store as a simple data cache container, not page rendering. Because, often operate the grid at the same time, is in the operation of the store, and through the grid operation store, will see the data on the page changes (when you edit the grid of a column of data, the upper right corner of the red triangle).

However, understanding the direct operation of the store will deepen understanding through the grid operation store.

The store in this example is Arrayreader and can also be used with Jsonreader.

The code is as follows

Copy Code

<ext:store id= "Store1" runat= "Server" > <Reader> <ext:jsonreader idproperty= "Intcolumn" > <Fields> <ext:recordfield name= "Intcolumn" type= "Int"/> <ext:recordfield name= "Doublecolumn" type= "Float"/> <ext:recordfield name= "Stringcolumn" type= "String"/> <ext:recordfield name= "Datetimecolumn" type= "Date" dateformat= "y-m-d"/> <ext:recordfield name= "Boolcolumn" type= "Boolean"/> </Fields> </ext:JsonReader> </Reader> </ext:Store>

But the data needs to be changed to an array of classes, not an array of the preceding arrays.

code is as follows

copy code

var data = [     {intcolumn:1, doublecolumn:33.33, Stringcolumn: "String_0", Datetimecolumn: "2012-01-01", B Oolcolumn:true},     {intcolumn:3, doublecolumn:33.33, Stringcolumn: "String_1", Datetimecolum N: "2012-01-01", Boolcolumn:false},     {intcolumn:5, doublecolumn:33.33, Stringcolumn: "String _2 ", Datetimecolumn:" 2012-01-01 ", boolcolumn:true},     {intcolumn:6, doublecolumn:33.33, Stri Ngcolumn: "String_3", Datetimecolumn: "2012-01-01", Boolcolumn:false},     {intcolumn:7, Double column:33.33, Stringcolumn: "String_4", Datetimecolumn: "2012-01-01", boolcolumn:true} ;