`

我的Ext Grid例子一

EXT 
阅读更多

MsgSendPanel=function(){
 var panel=this;
 var path=getPath();
 var data=["测试短信发送。。","2010-08-12 15:36:21.0", "sa", "0", "1","21", "65", "13533445332", "总部", "001"];
 //数据信息
 var datastore=new Ext.data.Store({
   proxy : new Ext.data.HttpProxy({
    url : path+'/MessageServlet?tstate=querymessage'
   }),
  reader : new Ext.data.JsonReader({
   root : 'list',
   totalProperty : 'rowcount',
   fields:["message","stamp","username","state","messagetype","userid",
           "mid","call_no","corp_name","corp_no"]
  })  
    });
 datastore.load({params: {start:0,limit:10}}); 
 //数据显示
 var dataGrid=new Ext.grid.GridPanel({
  tbar: ['<b style="color:#15428B">[已发送信息」</b>', '->'],
  border:false,
  layout : 'fit',
  autoScroll : true,
  trackMouseOver : true,
  border : false,
  viewConfig : {
   forceFit : true,
   enableRowBody : true
  },
  store: datastore,
  cm: new Ext.grid.ColumnModel([
            new Ext.grid.RowNumberer(),  //自动行号
            {header: '短信内容',id:'message', dataIndex: 'message'},
            {header: '发送时间', dataIndex: 'stamp',width:90},
            {header: '发送人',   dataIndex: 'username',width: 90},
            {header: '短信ID',   dataIndex: 'mid',width:90,hidden:true},
            {header: '短信类型', dataIndex: 'messagetype',width: 90,renderer: renderTopic},
            {header: '用户ID',   hidden:true, dataIndex: 'userid',width: 90},
            {header: '机构名称', dataIndex: 'corp_name',width: 90},
            {header: '手机号码', dataIndex: 'call_no',width: 90},
            {header: '所属机构', hidden:true, dataIndex: 'corp_no',width: 90},
            {header: '是否成功', dataIndex: 'state',width: 90}
  ]),
  sm: new Ext.grid.RowSelectionModel({singleSelect:true})
     ,bbar:new Ext.PagingToolbar({
      pageSize: 10,
      displayInfo: true,
      store: datastore,
      displayInfo: true,
         displayMsg: '当前显示 {0} - {1}条记录   共 {2} 记录',
         emptyMsg: "没有任何记录" 
  })
  ,listeners:{
   'rowdblclick': function(grid, row){
    
   }
  }
 });
 //中间数据
 var centerPanel = new Ext.Panel({
  border:false,
  layout:'fit',
  region:"center",
  items:[dataGrid]
 });
 //开始日期
 var dateStart = new Ext.form.DateField({
  fieldLabel: '开始时间',
  format: 'Y-m-d H:i:s',
  width: 120,
  value : new Date(),
  allowBlank: false
 });
 //结束日期
 var dateEnd = new Ext.form.DateField({
  fieldLabel: '结束时间',
  format: 'Y-m-d H:i:s',
  width: 120,
  value : new Date(),
  allowBlank: false
 });
 //查询按钮
 var searchBtn = new Ext.Button({
    text : '查 询',
    handler:function(){
               if(!querPanel.getForm().isValid())
           {
              return ;
        }
      datastore.load({params: {start:0,limit:10}});  
      dataGrid.getStore().reload();
     }
  });
 //短信数据查询
 var queryPanel = new Ext.form.FormPanel({
  region: "center",
  border:false,
        height: 10,
        width: 700,
        frame: true,
        labelSeparator: ':',
        labelWidth: 60,
        labelAlign: 'right',
        layout : 'table',
  layoutConfig : {
   columns : 3
  },
  items:[{
      layout:"form",
      items:[dateStart]
    },{
      layout:"form",
      items:[dateEnd]
    },{
      layout : 'table',
      items : [{html:'<pre>   </pre>'},searchBtn]
    }]
 });
 //短信数据查询
 var searchinfo=new Ext.Panel({
  title:"短信查询",
  border:false,
  layout:'fit',
  region:"north",
  height:70,
  width:700,
  items:[queryPanel]
 });
 MsgSendPanel.superclass.constructor.call(this,{
  layout      : 'border',
     width       : 780,
     height      : 400,
     border  : true,
     items:[searchinfo,centerPanel]
 });
}
Ext.extend(MsgSendPanel, Ext.Panel); 
//获得链接地址
function getPath() {
 var location = document.location.toString();
 var temp=location;
 var contextPath = "";
 if(location.indexOf("://") != -1) {
  contextPath += location.substring(0, location.indexOf("//") + 2);
  location = location.substring(location.indexOf("//") + 2, location.length);
 }
 var index = location.indexOf("/");
 contextPath += location.substring(0, index+1);
 location = location.substring(index+1);
 index = location.indexOf("/");
 contextPath += location.substring(0, index+1); 
 return contextPath;
}
//修改信息类型
function renderTopic(value, p, record){ 
     if(value=="1") value="短信"
     if(value=="0") value="指令";
     return value;
}

分享到:
评论

相关推荐

    Ext3.2源码、API、及Demo(grid例子)

    本压缩包包含EXT3.2的核心源码、API文档以及一个名为"ExtTest"的示例项目,其中的grid例子演示了EXT3.2在数据展示和操作上的强大能力。 首先,EXT3.2的源码是理解其工作原理的关键。源码包含了EXT3.2的所有组件、类...

    jsp 实现的 EXT Grid 导出excel 例子

    总的来说,这个JSP实现的EXT Grid导出Excel例子是一个实用且常见的Web开发需求,它涉及到EXT JS的使用、AJAX通信、服务器端处理以及文件下载等多个技术点。通过这个例子,开发者可以学习到如何将前端的动态数据有效...

    ext grid tree 应用

    1. **EXT Grid**: EXT Grid是EXT JS中的核心组件之一,用于展示大量数据。它提供了丰富的特性,如排序、筛选、分页、编辑等。在这个例子中,Grid从数据库获取数据,这意味着后端可能使用了Ajax请求或者Store对象来与...

    最新的GT-Grid vs EXT-Grid例子(超级经典)

    EXT-Grid则是EXT JS框架的一部分,EXT JS是一个完整的前端开发库,提供了一套完整的UI组件。EXT-Grid拥有丰富的内置特性,如拖放、行级编辑、行合并、树形网格等。其用户界面设计精美,易于使用,且与EXT JS的其他...

    ext的grid简易例子

    在这个例子中,我们创建了一个简单的EXT Grid,包含了两个字段(姓名和年龄),并且这两个字段都是可编辑的。数据源是从数组中加载的,但也可以通过修改`store`配置来连接到服务器获取数据。 EXT Grid还可以配合...

    grid js 例子一个 ext 的

    ### 标题:Grid JS 例子一个 ext 的 该标题简略地指出了文章的主题是关于使用 Ext JS 框架中的 Grid 组件。这里提到的“Grid JS”即是指 Ext JS 中的表格组件。 ### 描述:“有用的 grid' js 实现 哪来分享!grid ...

    EXTgrid导出excel

    1. 获取EXTgrid的数据:这通常涉及遍历EXTgrid的store,提取每一行的数据对象。 2. 构建Excel工作表:使用SheetJS或其他库,根据EXTgrid的列定义创建一个新的工作表,并填充从EXTgrid获取的数据。 3. 创建Blob对象...

    用ext propertyGrid做的小例子

    标题中的“用ext propertyGrid做的小例子”表明这个压缩包包含了一个使用EXTJS库的Property Grid组件的示例。EXTJS是一个流行的JavaScript框架,用于构建富客户端Web应用程序,而Property Grid是一个数据展示组件,...

    多年积攒下来的EXT3.3例子大放送

    这个压缩包文件"多年积攒下来的EXT3.3例子大放送"显然包含了一系列EXTJS的示例代码,帮助开发者深入理解和应用EXTJS控件,以及如何进行后台数据的交互和报表展示。下面将详细探讨EXTJS、EXT3.3版本的关键特性,以及...

    Ext Grid +dwr 列表展示展示带分页

    在本文中,我们将深入探讨如何使用Ext Grid与Direct Web Remoting (DWR)技术结合,实现一个具有分页功能的列表展示。首先,让我们逐一了解这些关键组件。 1. **Ext Grid**: Ext Grid是Ext JS库中的核心组件,用于...

    ext-grid+json简单应用

    在"EXT-GRID+JSON简单应用"中,我们将探讨如何使用EXT-JS的Grid组件与JSON数据源进行集成,以创建一个动态的数据表格。 EXT-JS的Grid组件允许开发者通过定义列模型、存储器和视图来展示数据。在JSON方面,它是一种...

    一个EXT+js实现的Grid表格合并的例子源码

    "一个EXT+js实现的Grid表格合并的例子源码"这个资源应该包含了如何利用EXT和JavaScript来实现Grid表格合并的示例代码。实现这种方式通常需要对EXT Grid的配置和渲染过程有深入的理解,包括使用CellEditing插件、...

    Ext4.0分页的Grid例子

    后台使用的是struts2生成Ext所需要的json,把webroot下的ext4下面加入ext的开发包,然后再把create.sql中的脚本在数据库中执行,代码就可以跑起来了,我用的是mysql数据库

    Ext Grid表格分组统计

    在Ext JS这个强大的JavaScript框架中,`Ext Grid`是一个用于创建数据网格的组件,它能够高效地展示大量结构化数据。当我们需要对数据进行分组并同时显示统计信息时,`Ext Grid`提供了`GroupSummary`功能。在这个完整...

    在Ext的grid里实现带radio单选功能的gridlist

    1. **Selection Model**:在Ext Grid中,我们可以选择多种类型的Selection Model来控制用户的选择行为。对于单选功能,我们需要使用`Ext.selection.RowModel`类型,并设置`mode`属性为`SINGLE`。这样,每次用户点击...

    ext grid 动态扩展

    在EXT JS中,`Ext Grid` 是一个强大的数据展示组件,它可以用来显示和操作大量数据。动态扩展功能允许我们根据需求在运行时增加或减少列,增强了应用的灵活性。本篇将详细介绍如何实现 `Ext Grid` 的列动态添加。 1...

    ExtGrid使用

    这个例子在.NET环境中展示了如何有效地使用ExtGrid,包括显示数据、增删改查(CRUD)操作以及分页功能。下面将详细介绍这些知识点。 1. **Ext JS**:Ext JS是一个用于构建富客户端Web应用的JavaScript框架,它提供...

    ExtDemo例子绝对能跑起来

    "ExtDemo例子绝对能跑起来"这个标题表明我们将探讨一个关于ExtJS的示例项目,这个项目在正确配置和执行后,能够正常运行。 描述中的"ext ext例子"可能是由于输入错误,但我们可以理解为这是在强调ExtJS框架的实例。...

    EXT小例子包括(增,删,改,查)

    标题"EXT小例子包括(增,删,改,查)"暗示了这是一个关于EXT JS基础操作的示例集合,涵盖了CRUD(创建Create、读取Read、更新Update、删除Delete)这四个核心数据库操作。在Web开发中,CRUD是数据库管理和应用程序交互...

    EXT复杂表头+锁定列例子

    2. 创建EXT Grid实例:定义一个EXT Grid配置对象,包括数据源、列定义、复杂表头配置等。 3. 定义复杂表头:使用嵌套的header配置来创建多级标题。 4. 配置锁定列:指定需要锁定的列,并设置`lockable`和`locked`...

Global site tag (gtag.js) - Google Analytics