Note the same way under the ext-3.0 will report typeError into the ext-3.1 can be. The reason is that 3.0 cannot be used. I haven't seen ext3.0 source code yet
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> Grid </title>
<Script type = "text/javascript" src = "ext-3.1.1/adapter/ext/ext-base.js"> </script>
<Script type = "text/javascript" src = "ext-3.1.1/ext-all.js"> </script>
<Link rel = "stylesheet" href = "ext-3.1.1/resources/css/ext-all.css"/>
<Script type = "text/javascript">
Ext. onReady (function (){
// Create a checkbox
Var sm = new Ext. grid. CheckboxSelectionModel ();
// Create a gridview Column
Var cl = new Ext. grid. ColumnModel ([
// Create a data column
New Ext. grid. RowNumberer (),
Sm,
{Header: "No.", dataIndex: "Id", sortable: true },
{Header: "name", dataIndex: "name", sortable: true}
]);
// After creating a column, the column includes sorting, column number, and checkbox.
// Create a data table store that is stored in the grid
Var data = [["1", "Zhang San", 25], ["2", "Li Si", 24], ["3", "Wang Wu", 33], ["4", "Zhao six", 18];
// Specify that the rule name of the recode data is the tag of the bound column. mapping indicates the position mapped to the data.
Var recode = Ext. data. Record. create ([{name: "Id", mapping: 0 },
{Name: "name", mapping: 0}]);
// Use the first field of data as the primary key
Var reader = new Ext. data. ArrayReader ({id: 0}, recode );
// Create a store and obtain its data through proxy. Resolved from reader to Standard recode object
Var store = new Ext. data. Store (
{
Proxy: new Ext. data. MemoryProxy (data ),
Reader: reader
}
);
//
// Store data to be loaded
Store. load ();
Var gpanel = new Ext. grid. GridPanel (
{
Title: "show data ",
Cm: cl, // column object
Sm: sm, // checkbox object
Height: 500,
ViewConfig: {forceFit: true}, // full line display
Store: store,
RenderTo: "gpanel"
}
);
// Delete the gridpanel row
Ext. get ("del"). on ("click", function (){
Store. remove (store. getAt (1 ));
Gpanel. view. refresh ();
});
})
</Script>
</Head>
<Body>
<Div id = "gpanel"> </div>
<Input type = "button" value = "Delete row" id = "del"/>
</Body>
</Html>