Use ExtjsDemo-gridpannel to bind local data and delete rows

Source: Internet
Author: User

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>

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.