`
qinjingkai
  • 浏览: 259864 次
  • 性别: Icon_minigender_1
  • 来自: 广州
文章分类
社区版块
存档分类
最新评论

Ext之日期处理

阅读更多

    Ext开发中为了把一个对象显示到页面,首选就是ColumnMode了,但如果一个对象的属性是日期类型的话就 要注意很多细节了。很多人喜欢在后台写一个日期转化成字符串的类,其实这是不太合理的,一个是因为不够灵活,而是因为这些Ext已经为我们做了封装没必要做那么多额外的工作;先总结如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>测试001.html</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="../scripts/ext/resources/css/ext-all.css"/>
    <script type="text/javascript" src="../scripts/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-all.js"></script>
    <script type="text/javascript" src="../scripts/ext/examples.js"></script>
    <script type="text/javascript" src="../scripts/ext/ext-lang-zh_CN.js"></script>
     <script type="text/javascript" src="stu.js"></script>
    <style>
            .color_red{
                background:lightgreen;
            }
        </style>
   
    <script type="text/javascript">
   
    function formatDate(value){ 
                    alert("value调用了");             
                return Ext.util.Format.date(value,"Y-m-d");
            }
   
   
      
       Ext.onReady(function(){
       Ext.QuickTips.init();
            Ext.form.Field.prototype.msgTarget='side';
       var sm=new Ext.grid.CheckboxSelectionModel();
      
           var ds=new Ext.data.Store ({
            proxy:new Ext.data.HttpProxy({
                  url:'../getSomeStu.do',
                  method:'post'
            }),
            reader:new Ext.data.JsonReader({
               root:'list',
               totalProperty:'totalCount',
               fields:[
                      {name:"stuId"},
                      {name:"name"},
                      {name:"sex"},
                      {name:"birthday"},
                      {name:"passport"},
               ]
            })
       
         });
      
      
       var cm=new Ext.grid.ColumnModel ([sm,
                                         {header:'编号',dataIndex:'stuId',width:100},
                                         {header:'名字',dataIndex:'name',width:100},
                                         {header:'性别',dataIndex:'sex',width:100},
                                         {header:'出生年月',dataIndex:'birthday',width:170,
                                              renderer:function(value,cellmeta,record,rowIndex,columnIndex,color_store){
                                                if(value!=null){
                                                  return temp=new Date(value.time).format('Y-m-d');
                                               
                                                
                                                }else{
                                                    return null;
                                                }
                                                
                                              }
                                            },
                                         {header:'身份证号',dataIndex:'passport',width:100},
                                         {header:'操作',dataIndex:'stuId',width:300,
                                             renderer:function(value,cellmeta,record,rowIndex,columnIndex,color_store){
                                                var hrefHtml="<a href=javascript:createStuForm("+null+")><img src='../images/add.gif' title='新增学生'></a>";
                                                  hrefHtml+="<a href=javascript:createStuForm("+value+")><img src='../images/forum.gif' title='查看学生信息'></a>"
                                                 return hrefHtml;
                                              }
                                         }
                                         ]);
      
     
     
         var totalStudent=new Ext.grid.GridPanel ({
                     el:'totalStudent',            
                     renderTo:'totalStudent',
                     width:1000,
                     height:400,
                     ds:ds,
                     cm:cm,
                     sm:sm,
                     bbar:new Ext.PagingToolbar({
                     store:ds,
                     pageSize:2,
                     displayInfo:true,
                     emptyMsg:'找不到相关数据'
                     })
       
         });   
      
         ds.load({params:{start:0,limit:2}});
         totalStudent.render();
                                    
      
      
       });
   
   
   
    </script>
 

  </head>
 
  <body>
     <div id="totalStudent"></div>
  </body>
</html>

 

要特别注意Y-m-d的大小写形式,否则可能就不是你想要的日期格式了;具体格式可以参考http://hintcnuie.iteye.com/blog/254294

分享到:
评论

相关推荐

    ext校验日期统一处理方法

    ext校验日期统一处理方法,可以使用此方式一次性处理好时间段校验问题

    Ext Js权威指南(.zip.001

    7.2.5 使用ajax处理数据的代理:ext.data.proxy.ajax与ext.data.proxy.rest / 308 7.2.6 跨域处理数据的代理:ext.data.proxy.jsonp / 312 7.2.7 为ext.direct服务的代理:ext.data.proxy.direct / 312 7.2.8 ...

    精通JS脚本之ExtJS框架.part1.rar

    7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...

    gson-ext:GSON (google-gson) 的扩展。 启用轻量级 JSON 转换为 XML 和自动处理 ISO 8601 日期等功能

    这对于利用 XPATH 处理 JSON 字符串等任务非常方便。 因为 XML 比 JSON 更冗长,并且需要将元素包装在匹配的标签中,所以 gson-ext 在生成的 XML 中注入了一些标签,而 JSON 则没有。 主要有六种情况(忽略嵌套。...

    Ext JS 4实现带week(星期)的日期选择控件(实战二)

    前言 JavaScript 中的日期和时间 Ext JS 4实现带week(星期)的日期选择控件(实战一) 如对本篇的一些预备知识需详尽了解,可参考以上两篇。 Javascript 有提供Date 对象用于处理时间。但是Date 并没有提供获取星期的...

    简洁的EXTJS日期选择插件.rar

    一款简洁的外观基于EXTJS的日期选择插件,日历插件,在网页上选择日期使用的小插件,按照ext DatePicker素材及思想简化重新实现日历选择器,尚未实现:键盘导航,小时分钟选择,  1.Date api ,某日属于周几,某月...

    ExtJS 3.3.1正式版下载

    无论是界面之美,还是功能之强,ext的表格控件都高居榜首。 此地址可下载ExtJS3.2中文说明 http://download.csdn.net/source/2993411 ExtJS可以用来开发RIA也即富客户端的AJAX应用,是一个用javascript写的,主要...

    精通JS脚本之ExtJS框架.part2.rar

    7.2.6 日期输入控件Ext.form.DateField 7.2.7 在线编辑器Ext.form.HtmlEditor 7.3 ExtJS表单组件的综合应用 第8章 设计表格类布局 8.1 表格简介 8.1.1 表格的基本属性 8.1.2 制作第一个表格 8.2 表格常用功能...

    ExtJSWeb应用程序开发指南(第2版)

    4.1.14 Ext.form.field.Date日期选择框 4.1.15 Ext.form.field.Hidden隐藏字段 4.1.16 Ext.form.field.HtmlEditor编辑器字段 4.1.17 Ext.form.field.Display只读文本字段 4.1.18 Ext.form.Label标签字段 4.1.19...

    Extjs中DisplayField的日期或者数字格式化扩展

    使用 Ext.form.FormPanel 来处理数据时候,某些字段是需要只读的。当然我们可以使用 Ext.form.TextField,然后设置成 ReadOnly,不过这样子的显示效果不是很好,因为始终会有个输入框。所以我们必须使用 Ext.form....

    Understanding the Linux Kernel

     更新时间和日期  更新系统统计数  软定时器和延迟函数  与定时测量相关的系统调用  第七章进程调度  调度策略  调度算法  调度程序所使用的数据结构  调度程序所使用的函数  多处理器系统中运行队列的...

    ExtJs中处理后台传过来的date对象显示到页面上

    在使用ExtJs开发时会遇到...下面解决办法:例如:在员工查询页面上,员工表中有个生日这一字段,在页面上我们需要显示日期即Date。从后台传过来的是employer这个对象,这个对象中有一个birthday这一字段(Date)类型。

    基于SpringBoot+Druid+Mybatis+Vue+Elementui的小区物联网平台项目源码+数据.rar

    accessControl 心跳 HC小区管理系统 门禁处理java adapt 对接不同的门禁 考勤 停车 适配器 包,重要,二开主要开发适配器 aop 系统切面处理 登录拦截 外部api token拦截校验等 ... util 工具类 如断言 日期 等工具类

    Extjs4如何处理后台json数据中日期和时间

    当ASP.NET后台使用JavaScriptSerializer这个组件将对象序列化为json,或者使用ScriptMethod特性的json [ScriptMethod(ResponseFormat = ResponseFormat.Json), WebMethod(EnableSession = true)] ...

    ExtAspNet_v2.3.2_dll

    -Grid的BoundField增加NullDisplayText属性,用于处理数据库中的null值,如果没有设置则默认为空字符串。 -修正DatePicker中的一个bug(31/01/2010将会返回NULL)使用DateFormatString来生成SelectedDate属性...

    extjs 时间范围选择自动判断的实现代码

    extjs中 有时需要选择一个日期范围,需要自动判断,选择的开始日期不能大于结束日期,或结束日期不能小于开始日期,实现的代码如下 效果图: 从上图可以看到,当选择了一个开始时间后,会自动限制结束时间的选择范围,实现...

    轻松搞定Extjs_原创

    三、日期选择器Ext.DatePicker 55 四、小结 56 第十章:数据与ComboBox 57 一、数据在这里是动词 57 二、Ext.data.DataProxy类 57 三、Ext.data.DataReader类 58 四、Ext.data.Store类 59 五、下拉列表框 60 六、...

    Java读写Excel的jar包

     支持字体、数字、日期操作  能够修饰单元格属性  支持图像和图表  应该说以上功能已经能够大致满足我们的需要。最关键的是这套API是纯Java的,并不依赖Windows系统,即使运行在Linux下,它同样能够正确的处理...

Global site tag (gtag.js) - Google Analytics