首页 > 代码库 > Ext js ----> grid

Ext js ----> grid

<link href="http://www.mamicode.com/bootstrap32/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<link href="http://www.mamicode.com/font-awesome41/css/font-awesome.min.css" rel="stylesheet" type="text/css" />

<link href="http://www.mamicode.com/Extjs42/resources/css/ext-all-gray.css" rel="stylesheet" type="text/css" />
<script src="http://www.mamicode.com/Extjs42/bootstrap.js" type="text/javascript"></script>
<script src="http://www.mamicode.com/js/lib/jquery-1.7.1.js" type="text/javascript"></script>

 

    <script type="text/javascript">  

    var store,  ugrid;

 

     Ext.onReady(function(){

       //初始化Model

    Ext.regModel("Supplier", { fields: ["Id", "SupplierName", "Symbo", "ContactPerson", "FixedTelephone", "MoneyType", "Email"] });

      //加载数据

    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", //返回JSON格式
        root: ‘rows‘, // 数据1
        totalProperty: ‘pageCount‘//数据2
      }
     },

      pageSize: 20,//分页条件
      autoLoad: { start: 0, limit: 20 }
    });

    //grid

      ugrid = Ext.create(‘Ext.grid.Panel‘, {
        store: store,
        region: ‘center‘,
        margins: ‘90 0 0 0‘,
        columns: [
{ id: ‘Id‘, header: ‘Id‘, dataIndex: ‘Id‘, hidden: true },
{ id: ‘Symbo‘, dataIndex: ‘Symbo‘, header: ‘货币符号‘, hidden: true },
new Ext.grid.RowNumberer(),
{ id: ‘SupplierName‘, dataIndex: ‘SupplierName‘, header: ‘供应商名称‘, width: 220 },
{ id: ‘ContactPerson‘, dataIndex: ‘ContactPerson‘, header: ‘联系人‘, width: 70 },
{ id: ‘FixedTelephone‘, dataIndex: ‘FixedTelephone‘, header: ‘固定电话‘, width: 100 },
{ id: ‘MoneyType‘, dataIndex: ‘MoneyType‘, header: ‘交易币种‘, width: 60 },
{ id: ‘Email‘, dataIndex: ‘Email‘, header: ‘Email‘, width: 150 }
],

//添加监听事件    双击事件   itemdblclick
listeners: { ‘itemdblclick‘: function (e) {
var recs = ugrid.getSelectionModel().getSelection();
var Json;
if (!recs || recs <= 0) {
Ext.Msg.alert(‘提示‘, ‘请选择相应的记录!‘);
} else {
Json = { SupplierId: recs[0].get(‘Id‘), SupplierName: recs[0].get(‘SupplierName‘),
MoneyType: recs[0].get(‘MoneyType‘), Symbo: recs[0].get(‘Symbo‘)
};
}
window.returnValue = http://www.mamicode.com/Json;
window.close();

}
},

//分页
bbar: [{

xtype: ‘pagingtoolbar‘,
displayMsg: ‘显示 {0} - {1} 条,共计 {2} 条‘,
emptyMsg: "没有数据",
beforePageText: "当前页",
afterPageText: "共{0}页",
store: store,
displayInfo: true
}]
});

//布局

var viewport = new Ext.Viewport({
layout: ‘border‘,
items: [ugrid]
});

});

    </script>

 

 

 

后台

string json = "{\"pageCount\":" + PageCount.ToString() + ",\"rows\":" + str1+"}";
// JObject jo = new JObject();
//jo.Add("pageCount", PageCount.ToString());
Response.Write(json);
Response.End();

 

Ext js ----> grid