Bevis_
Bevis_
采纳率25%
2017-04-05 06:50 阅读 1.0k
已采纳

这是网上找的extjs3.4的代码(可以运行),需要做哪些更改升级为4.2的,谢谢大神们。学习当中

50

Ext.onReady(function () {
Ext.QuickTips.init(); //HtmlEditor需要这个,不加,编辑时不提示
var sm = new Ext.grid.CheckboxSelectionModel({ handleMouseDown: Ext.emptyFn });
var cm = new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(), //显示行号
sm,
{ header: '编号', dataIndex: 'ID', sortable: true },
{ header: '姓名', dataIndex: 'Names' },
{ header: '时间', dataIndex: 'Date', renderer: Ext.util.Format.dateRenderer('Y-m-d') },
{ header: '描述', dataIndex: 'Descn' }
]);

//创建数据源
var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({ url: '1' }),
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalCount',
        root: 'roots'
    },
    [
      { name: "ID" },
      { name: "Names" },
      {
          name: "Date", dateFormat: 'Y-m-d', convert: function (v) {
              if (v == null) {
                  return null;
              }
              var d = new Date();
              var str = v.toString();
              var str1 = str.replace("/Date(", "");
              var str2 = str1.replace(")/", "");
              var dd = parseInt(str2);
              d.setTime(dd);
              return d;
          }
      },
      { name: "Descn" }
    ])

});
//加载数据
store.load({ params: { start: 0, limit: 5 } });

//创建form表单
var frm = new Ext.form.FormPanel({
    id: "frmDemo",
    frame: true,
    lableWidth: 75,
    lableAlign: "right",
    items: [
      { xtype: "hidden", id: "types" },
      { xtype: "numberfield", fieldLabel: "编号", id: "id", allowNegative: false, allowBlank: false, blankText: "请输入有效的整数" },
      { xtype: "textfield", fieldLabel: "姓名", id: "name" },
      { xtype: "datefield", fieldLabel: "日期", id: "date", format: "Y-m-d" },
      { xtype: "textfield", fieldLabel: "描述", id: "descn" }
    ]
});

//创建窗体
var window = new Ext.Window({
    title: '基本信息',
    width: 400,
    height: 300,
    minWidth: 300,
    minHeight: 200,
    closeAction: 'hide',
    modal: true, //弹窗遮层
    plain: true,    //与背景色保持协调
    bodyStyle: 'padding:5px;',
    buttonAlign: 'center',
    items: frm,     //添加内容
    buttons: [
  {
      text: '提交', handler: function () {
          var types = Ext.getCmp("types").getValue();
          var id = Ext.getCmp("id").getValue();
          var name = Ext.getCmp("name").getValue();
          var date = Ext.getCmp("date").getValue();
          var descn = Ext.getCmp("descn").getValue();
          if (types == "add") {
              if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
                  Ext.MessageBox.alert("提示", "请填写完整的数据");
                  return;
              }
              Ext.Ajax.request({
                  url: "3",
                  method: "post",
                  params: { id: id, name: name, date: date, descn: descn },
                  success: function (response, opts) {
                      if (response.responseText == "false") {
                          Ext.MessageBox.alert("提示", "添加失败");
                          return;
                      }
                      Ext.MessageBox.alert("提示", "添加成功");
                      window.hide();
                      store.reload();
                      Ext.getCmp("id").setValue("");
                      Ext.getCmp("name").setValue("");
                      Ext.getCmp("date").setValue("");
                      Ext.getCmp("descn").setValue("");
                  }
              });
          } else if (types == "update") {
              if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
                  Ext.MessageBox.alert("提示", "请填写完整的数据");
                  return;
              }
              Ext.Ajax.request({
                  url: "2",
                  method: "post",
                  params: { id: id, name: name, date: date, descn: descn },
                  success: function (response, opts) {
                      if (response.responseText == "false") {
                          Ext.MessageBox.alert("提示", "修改失败");
                          return;
                      }
                      Ext.MessageBox.alert("提示", "修改成功");
                      window.hide();
                      store.reload();
                      Ext.getCmp("id").setValue("");
                      Ext.getCmp("name").setValue("");
                      Ext.getCmp("date").setValue("");
                      Ext.getCmp("descn").setValue("");
                  }
              });
          }
      }
  },
 {
     text: "重置", handler: function () {
         Ext.getCmp("id").setValue("");
         Ext.getCmp("name").setValue("");
         Ext.getCmp("date").setValue("");
         Ext.getCmp("descn").setValue("");
     }
 }
    ]


});


//创建显示面板
var grid = new Ext.grid.GridPanel({
    autoHeight: true,
    forceFit: true,  //智能分配每列宽度
    loadMask: true,   //未加载前显示loading...
    store: store,
    stripeRows: true, //斑马线
    sm: sm,
    cm: cm,
    tbar: [
     {
         xtype: "button", text: "添加", handler: function (btnAdd) {
             Ext.getCmp("types").setValue("add");
             Ext.getCmp("id").setValue("");
             Ext.getCmp("name").setValue("");
             Ext.getCmp("date").setValue("");
             Ext.getCmp("descn").setValue("");
             window.show();
         }
     },
     {
         xtype: "button", text: "删除", handler: function (btnDel) {

             var gd = btnDel.ownerCt.ownerCt;
             var st = gd.getStore();
             var data = gd.getSelectionModel().getSelections();
             if (data.length == 0) {
                 Ext.MessageBox.alert("提示", "请至少选择一条数据删除");
                 return;
             } else {
                 if (confirm('是否删除选中的信息?')) {
                     var ids = "";
                     for (var i = 0; i < data.length; i++) {
                         ids += data[i].json.ID + ",";
                     }
                     Ext.Ajax.request({
                         url: "4",
                         params: { ids: ids },
                         method: "post",
                         success: function (response, opts) {
                             if (response.responseText == "false") {
                                 Ext.MessageBox.alert("提示", "删除失败");
                                 return;
                             }
                             Ext.MessageBox.alert("提示", "删除成功");

                             store.reload();
                         }
                     });
                 }
             }
         }
     },
     {
         xtype: "button", text: "修改", handler: function (btnUpdate) {
             var gd = btnUpdate.ownerCt.ownerCt;
             var st = gd.getStore();
             var data = gd.getSelectionModel().getSelections();
             if (data.length != 1) {
                 Ext.MessageBox.alert("提示", "请选择一条信息进行修改");
                 return;
             }
             var emp = data[0];
             Ext.getCmp("types").setValue("update");
             Ext.getCmp("id").setValue(emp.json.ID);
             Ext.getCmp("name").setValue(emp.json.Names);
             Ext.getCmp("date").setValue(emp.json.Date);
             Ext.getCmp("descn").setValue(emp.json.Descn);
             window.show();

         }
     }
    ],
    bbar: new Ext.PagingToolbar({
        pageSize: 5,
        store: store,
        displayInfo: true,
        displayMsg: '显示第{0}条到{1}条记录,一共{2}条',
        emptyMsg: "没有记录",
        plugins: new Ext.ux.ProgressBarPager()    //分页进度条
    }),
    viewConfig: {
        columnsText: '显示的列',
        forceFit: true,
        sortAscText: '升序', /*调试成可用的*/
        sortDescText: '降序'
    },
    autoExpandColumn: 'Descn',
    collapsible: true,
    animCollapse: false
});
//渲染
grid.render('grid');

});

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享

3条回答 默认 最新

  • 已采纳
    showbo GoCityPass新加坡曼谷通票 2017-04-05 08:49

    这个改动大了。。自己看下面的注释标注出来的。。

    自己多看下API:http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.tree.Panel

    
        Ext.onReady(function () {
            Ext.QuickTips.init(); //HtmlEditor需要这个,不加,编辑时不提示
            //////////////////////////////////////////////////////////////////////
            var sm = new Ext.selection.CheckboxModel/*Ext.grid.CheckboxSelectionModel*/({ /*handleMouseDown*/selectionchange: Ext.emptyFn });
            var cm = /*new Ext.grid.ColumnModel(*/[
            new Ext.grid.RowNumberer(), //显示行号
           // sm,
            { header: '编号', dataIndex: 'ID', sortable: true },
            { header: '姓名', dataIndex: 'Names' },
            { header: '时间', dataIndex: 'Date', renderer: Ext.util.Format.dateRenderer('Y-m-d') },
            { header: '描述', dataIndex: 'Descn' }
            ]//);
    
            //创建数据源
            var store = new Ext.data.Store({
                proxy: {
                    type: 'ajax',
                    url: 'data.txt',
                    reader: {
                        totalProperty: 'totalCount',
                        root: 'roots'
                    }
                },
                fields: [
              { name: "ID" },
              { name: "Names" },
              {
                  name: "Date", dateFormat: 'Y-m-d', convert: function (v) {
                      if (v == null) {
                          return null;
                      }
                      var d = new Date();
                      var str = v.toString();
                      var str1 = str.replace("/Date(", "");
                      var str2 = str1.replace(")/", "");
                      var dd = parseInt(str2);
                      d.setTime(dd);
                      return d;
                  }
              },
              { name: "Descn" }
                ], listeners: { load: function () { alert(this.getCount())}}
            });
            //////////////////////////////////////////////////////////////////////
            //加载数据
            store.load({ params: { start: 0, limit: 5 } });
    
            //创建form表单
            var frm = new Ext.form.FormPanel({
                id: "frmDemo",
                frame: true,
                lableWidth: 75,
                lableAlign: "right",
                items: [
                  { xtype: "hidden", id: "types" },
                  { xtype: "numberfield", fieldLabel: "编号", id: "id", allowNegative: false, allowBlank: false, blankText: "请输入有效的整数" },
                  { xtype: "textfield", fieldLabel: "姓名", id: "name" },
                  { xtype: "datefield", fieldLabel: "日期", id: "date", format: "Y-m-d" },
                  { xtype: "textfield", fieldLabel: "描述", id: "descn" }
                ]
            });
    
            //创建窗体
            var window = new Ext.Window({
                title: '基本信息',
                width: 400,
                height: 300,
                minWidth: 300,
                minHeight: 200,
                closeAction: 'hide',
                modal: true, //弹窗遮层
                plain: true,    //与背景色保持协调
                bodyStyle: 'padding:5px;',
                buttonAlign: 'center',
                items: frm,     //添加内容
                buttons: [
              {
                  text: '提交', handler: function () {
                      var types = Ext.getCmp("types").getValue();
                      var id = Ext.getCmp("id").getValue();
                      var name = Ext.getCmp("name").getValue();
                      var date = Ext.getCmp("date").getValue();
                      var descn = Ext.getCmp("descn").getValue();
                      if (types == "add") {
                          if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
                              Ext.MessageBox.alert("提示", "请填写完整的数据");
                              return;
                          }
                          Ext.Ajax.request({
                              url: "3",
                              method: "post",
                              params: { id: id, name: name, date: date, descn: descn },
                              success: function (response, opts) {
                                  if (response.responseText == "false") {
                                      Ext.MessageBox.alert("提示", "添加失败");
                                      return;
                                  }
                                  Ext.MessageBox.alert("提示", "添加成功");
                                  window.hide();
                                  store.reload();
                                  Ext.getCmp("id").setValue("");
                                  Ext.getCmp("name").setValue("");
                                  Ext.getCmp("date").setValue("");
                                  Ext.getCmp("descn").setValue("");
                              }
                          });
                      } else if (types == "update") {
                          if (id.lenght < 1 || name.lenght < 1 || date.lenght < 1 || descn.lenght < 1) {
                              Ext.MessageBox.alert("提示", "请填写完整的数据");
                              return;
                          }
                          Ext.Ajax.request({
                              url: "2",
                              method: "post",
                              params: { id: id, name: name, date: date, descn: descn },
                              success: function (response, opts) {
                                  if (response.responseText == "false") {
                                      Ext.MessageBox.alert("提示", "修改失败");
                                      return;
                                  }
                                  Ext.MessageBox.alert("提示", "修改成功");
                                  window.hide();
                                  store.reload();
                                  Ext.getCmp("id").setValue("");
                                  Ext.getCmp("name").setValue("");
                                  Ext.getCmp("date").setValue("");
                                  Ext.getCmp("descn").setValue("");
                              }
                          });
                      }
                  }
              },
             {
                 text: "重置", handler: function () {
                     Ext.getCmp("id").setValue("");
                     Ext.getCmp("name").setValue("");
                     Ext.getCmp("date").setValue("");
                     Ext.getCmp("descn").setValue("");
                 }
             }
                ]
    
    
            });
    
    
            //创建显示面板
            var grid = new Ext.grid.GridPanel({
                autoHeight: true,
                forceFit: true,  //智能分配每列宽度
                loadMask: true,   //未加载前显示loading...
                store: store,
                stripeRows: true, //斑马线
                //////////////////////////////////////////////////////////////////////
                /*sm*/selModel: sm,
                /* cm*/columns: cm,
                //////////////////////////////////////////////////////////////////////
                tbar: [
                 {
                     xtype: "button", text: "添加", handler: function (btnAdd) {
                         Ext.getCmp("types").setValue("add");
                         Ext.getCmp("id").setValue("");
                         Ext.getCmp("name").setValue("");
                         Ext.getCmp("date").setValue("");
                         Ext.getCmp("descn").setValue("");
                         window.show();
                     }
                 },
                 {
                     xtype: "button", text: "删除", handler: function (btnDel) {
    
                         var gd = btnDel.ownerCt.ownerCt;
                         var st = gd.getStore();
                         var data = gd.getSelectionModel().getSelections();
                         if (data.length == 0) {
                             Ext.MessageBox.alert("提示", "请至少选择一条数据删除");
                             return;
                         } else {
                             if (confirm('是否删除选中的信息?')) {
                                 var ids = "";
                                 for (var i = 0; i < data.length; i++) {
                                     ids += data[i].json.ID + ",";
                                 }
                                 Ext.Ajax.request({
                                     url: "4",
                                     params: { ids: ids },
                                     method: "post",
                                     success: function (response, opts) {
                                         if (response.responseText == "false") {
                                             Ext.MessageBox.alert("提示", "删除失败");
                                             return;
                                         }
                                         Ext.MessageBox.alert("提示", "删除成功");
    
                                         store.reload();
                                     }
                                 });
                             }
                         }
                     }
                 },
                 {
                     xtype: "button", text: "修改", handler: function (btnUpdate) {
                         var gd = btnUpdate.ownerCt.ownerCt;
                         var st = gd.getStore();
                         var data = gd.getSelectionModel().getSelections();
                         if (data.length != 1) {
                             Ext.MessageBox.alert("提示", "请选择一条信息进行修改");
                             return;
                         }
                         var emp = data[0];
                         Ext.getCmp("types").setValue("update");
                         Ext.getCmp("id").setValue(emp.json.ID);
                         Ext.getCmp("name").setValue(emp.json.Names);
                         Ext.getCmp("date").setValue(emp.json.Date);
                         Ext.getCmp("descn").setValue(emp.json.Descn);
                         window.show();
    
                     }
                 }
                ],
                bbar: new Ext.PagingToolbar({
                    pageSize: 5,
                    store: store,
                    displayInfo: true,
                    displayMsg: '显示第{0}条到{1}条记录,一共{2}条',
                    emptyMsg: "没有记录",
                    plugins: new Ext.ux.ProgressBarPager()    //分页进度条
                }),
                viewConfig: {
                    columnsText: '显示的列',
                    forceFit: true,
                    sortAscText: '升序', /*调试成可用的*/
                    sortDescText: '降序'
                },
                autoExpandColumn: 'Descn',
                collapsible: true,
                animCollapse: false
            });
            //渲染
            grid.render('grid');
    
        });
    
    
    点赞 1 评论 复制链接分享
  • Bevis_ Bevis_ 2017-04-05 06:55

    这是gridpanel的代码,我想把他放在搭建好的4.2的环境中也可以运行

    点赞 评论 复制链接分享
  • smile_Arielle 从微笑开始幸福 2017-04-05 09:22

    3.0的版本和4.0的版本有差异的,会有部分效果出不来,到时候看哪些效果出不来再去照着api修改

    点赞 评论 复制链接分享

相关推荐