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(){

       //初始化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 = 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();

时间: 2024-11-04 04:52:22

Ext js ----> grid的相关文章

Ext JS 6学习文档-第4章-数据包

数据包 本章探索 Ext JS 中处理数据可用的工具以及服务器和客户端之间的通信.在本章结束时将写一个调用 RESTful 服务的例子.下面是本章的内容: 模型 Schema Stores 代理 过滤和排序 做一个基于 RESTful 的小项目 转载请注明出处:http://www.jeeboot.com/archives/1222.html Model(模型) 一个模型包含字段,字段类型,校验,关联和代理.它是通过扩展 Ext.data.Model 类来定义的. 其中类型,校验,关联和代理都是

[Ext JS 4] 实战之Load Mask - 在Grid Reconfigure的使用状况

前言 关于 Extjs 的 load mask 的使用,可以参考: [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏 一般而言,在如下情况下可能要使用grid 的 reconfigure功能: 1. 改变grid 的显示栏位 (增加或更换, 这和 hide , show 已经有的栏位不同) 2. 切换grid 的View 和 Edit 模式(这里面的内容就比较多了) 这里要讨论的问题是: 在 reconfigure 的时候, grid 是否可以有 load mask 的遮罩

EXT Js 关于动态收缩grid的宽度

Ext js关于动态收缩grid的宽度导致grid不能正常收缩的解决方案: 1.根据"window.document.body.onresize = function ()"事件动态给grid赋值宽度,达到动态收缩的目的,效果比较好,但是会受到浏览器兼容性的限制 2.根据"Ext.EventManager.onWindowResize(function () "这个Ext自带的方法进行处理,默认会有100毫秒的收缩延迟,效果上不太理想:可以参考源码,进行修改去掉延迟

Ext JS 6学习文档-第5章-表格组件(grid)

使用 Grid 本章将探索 Ext JS 的高级组件 grid .还将使用它帮助读者建立一个功能齐全的公司目录.本章介绍下列几点主题: 基本的 grid 排序 渲染器 过滤 分页 单元格编辑 行编辑 分组 分组 grid(pivot grid) 公司目录 -一个示例项目 转载请注明出处:http://www.jeeboot.com/archives/1225.html grid 组件是 Ext JS 中最强大的一个组件.它有很多的选项和配置,能以任何你希望的形式来构建 grid. Ext JS

Ext js 新知识:grid.getSelectionModel()

今天又学到了新知识,Ext js : 看到几行代码不是很懂,关于grid的model 方面,在网上找了找,看到一位网友总结的很好,就拿过来了,先感谢了[原作者:http://my.oschina.net/u/1398304/blog/289227#OSC_h3_1] grid.getSelectionModel()的所有操作 1. var model = grid.getSelectionModel(); 2. model.selectAll();//选择所有行 3. model.selectF

[Ext JS 4] 实战之Chart 坐标控制(单坐标,双坐标)

前言 在Extjs 中, 单一的 Column Chart 的展示效果如上. 定义的步骤如下: 1.  创建一个 Ext.chart.Chart 2. 创建两个坐标轴, axes 一个 Category 类型的横坐标用来显示日期 一个Numeric 类型的纵坐标用来显示数据 3. 配置显示的图 series 配置 column 类型的柱状图. 具体代码如下: <!-- Author : oscar999 Date : ALL RIGHTS RESERVED --> <!DOCTYPE h

[King.yue]Ext.JS 弹出窗体取值赋值

//从Grid取值var name = Ext.getCmp(gridGridID).getView().getSelectionModel().getSelection()[0].data.Name; var code = Ext.getCmp(gridGridID).getView().getSelectionModel().getSelection()[0].data.Code; //赋值ID Ext.getCmp('@V.ID_TXT_NAME').setValue(name);//不用

【转】EXT JS MVC开发模式

原文链接:EXT JS MVC开发模式 在app(亦即根目录)文件夹下面创建controller.model.store和view文件夹,从名称上就知道他们该放置什么代码了吧.然后创建Application.js作为我们程序的入口文件,并在mvc.html中引用Application.js文件.目录结构-->app(根目录)------>controller------>model------>store------>view------>application.js(

[Ext JS 4] 实战之多选下拉单 (带checkbox) 续 - 带ALL 选项

前言 在 [Ext JS 4] 实战之多选下拉单 (带checkbox) 这一篇中有介绍如何开发带有checkbox 的多选菜单. 但是实际项目开发过程中, 用户的需求也是不断精进的. 使用淘宝或是其他网站购物车功能的用户对全选就特别习惯, 所以他们也希望在下拉单中也能有  "ALL" 这样的选项. 但是Extjs 本身提供的多选下拉单,功能比较有限. 之前有扩充过带 checkbox, 现在又要多扩充一个 "ALL" 选项了. 要求是: 1. 选中"AL