Ext js----> Grid

<link href= ". /bootstrap32/css/bootstrap.min.css "rel=" stylesheet "type=" Text/css "/>

<link href= ". /font-awesome41/css/font-awesome.min.css "rel=" stylesheet "type=" Text/css "/>

<link href= ". /extjs42/resources/css/ext-all-gray.css "rel=" stylesheet "type=" Text/css "/>
<script src= ". /extjs42/bootstrap.js "type=" Text/javascript "></script>
<script src= ". /js/lib/jquery-1.7.1.js "type=" Text/javascript "></script>

<script type= "Text/javascript" >

var store, Ugrid;

Ext.onready (function () {

Initialize model

Ext.regmodel ("Supplier", {fields: ["Id", "SupplierName", "Symbo", "ContactPerson", "Fixedtelephone", "Moneytype", " Email "]});

Loading data

　　　　store = new Ext.data.JsonStore ({

　　
Fields: ["Id", "SupplierName", "Symbo", "ContactPerson", "ContactPerson", "Fixedtelephone", "Moneytype", "Email"],
Proxy: {
Type: ' Ajax ',
URL: "Supplierselect123.aspx?action=async",
Reader: {
Type: "JSON",//Return JSON format
Root: ' Rows ',//Data 1
Totalproperty: ' PageCount '//Data 2
}
},

pagesize:20,//Paging conditions
AutoLoad: {start:0, limit:20}
});

Grid

Ugrid = Ext.create (' Ext.grid.Panel ', {
STORE:STORE,
region: ' center ',
Margins: ' 0 0 0 ',
columns: [
{ID: ' id ', header: ' ID ', Datainde x: ' id ', hidden:true},
{id: ' Symbo ', dataindex: ' Symbo ', header: ' Currency symbol ', hidden:true},
New Ext.grid.RowNumber ER (),
{id: ' SupplierName ', dataindex: ' SupplierName ', header: ' Vendor name ', width:220},
{id: ' ContactPerson ', DataIn Dex: ' ContactPerson ', header: ' Contacts ', width:70},
{id: ' Fixedtelephone ', dataindex: ' Fixedtelephone ', header: ' Fixed phone ', WIDTH:100},
{id: ' Moneytype ', dataindex: ' Moneytype ', Header: ' Transaction currency ', width:60},
{id: ' Email ', dataindex: ' Em Ail ', header: ' Email ', width:150}
],

Add listener event Double-click event Itemdblclick
Listeners: {' Itemdblclick ': function (e) {
var RECs = Ugrid.getselectionmodel (). GetSelection ();
var Json;
if (!recs | | RECs <= 0) {
Ext.Msg.alert (' Hint ', ' please select the corresponding record! ‘);
} else {
Json = {supplierid:recs[0].get (' Id '), Suppliername:recs[0].get (' SupplierName '),
Moneytype:recs[0].get (' Moneytype '), Symbo:recs[0].get (' Symbo ')
};
}
Window.returnvalue = Json;
Window.close ();

}
},

Page out
Bbar: [{

Xtype: ' Pagingtoolbar ',
Displaymsg: ' Show {0}-{1} bar, total {2} ',
Emptymsg: "No Data",
Beforepagetext: "Current Page",
Afterpagetext: "A total of {0} pages",
Store:store,
Displayinfo:true
}]
});

Layout

var viewport = new Ext.viewport ({
Layout: ' Border ',
Items: [Ugrid]
});

});

</script>

Background

String json = "{\" pagecount\ ":" + pagecount.tostring () + ", \" rows\ ":" + str1+ "}";
Jobject Jo = new Jobject ();
Jo. ADD ("PageCount", pagecount.tostring ());
Response.Write (JSON);
Response.End ();

Ext js----> Grid