50

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

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');

});

查看全部
Bevis_
Bevis_
2017/04/05 06:50
  • mvc
  • net
  • extjs
  • 点赞
  • 收藏
  • 回答
    私信
满意答案
查看全部

3个回复