extjs中gridpanl中使用日期控件

extjs中gridpan在编辑的时候，如果使用的是日期控件，就会出一些问题，比如如下的代码中，按照一般的方式书写

  var celledit=Ext.create("Ext.grid.plugin.CellEditing",{
            clicksToEdit:1
            });

            Ext.define("UserModel",{
            extend:"Ext.data.Model",
            fields:[{
                           name:"username",type:"string"
                     },{
                         name:"birthday",type:"date"
                   }]
            });

            var userstore=Ext.create("Ext.data.Store",{
            model:"UserModel",
             data:[{ username:"展博", birthday:"1986-06-23" }]
            });

            var grid=Ext.create("Ext.grid.Panel",{
            store:userstore,
            columnLines:true,
            width:580,
            title:"可编辑的日期", 
            renderTo:Ext.getBody(),
            viewConfig:{stripeRows:true},    
            columns:[Ext.create("Ext.grid.RowNumberer"),
            {
              text:"姓名",
              dataIndex:"username",
              width:80,
              editor:{
              xtype:"textfield"
              }
            },{
              text:"生日",
              dataIndex:"birthday",
              width:450,
              editor:{
                          xtype:"datefield"
               }
            }],
            plugins:celledit
            });

View Code

呈现出来如下：

日期不对，后来在编辑的生日列中加入   renderer: Ext.util.Format.dateRenderer('Y-m-d')，

显示正常了

可编辑生日列的时候就成下面的了

在编辑生日列中加入下面代码

editor:{
xtype:"datefield",
format:"Y-m-d"
},

不错，又可以了

但是点击编辑，但是不编辑，还会有一个更改的红点如下：

为啥呢？肯定是编辑时候的数据和编辑之前的数据不一样的嘛，后来发现确实是这样，如果把生日的原始的数据变为1986-06-23 00:00:00就可以了，嗯，不错，所有的 问题都解决了

 

 

转载于:https://www.cnblogs.com/mayantao/p/3314226.html