Ext.grid.EditorGridPanelを使用する際に発生する問題点

EditorGridPanel（使用したextのバージョンは3.3.1です）を、要件に従って、実行する過程で、いくつかの問題が発生しました。

1、どのようにFormPanelを通じてグリッド内のデータを送信する、つまり、グリッド内のデータを取得するには、データ検証の問題の前にデータを取得することである

2、どのようにグリッドにcheckColumnを配置する

3、条件を満たしているセル内のグリッドは、問題を編集することはできません

では、これらの問題をどのように解決したのか（また、より簡単な解決策は何か）教えてください。

1、FormPanelを通してグリッドのデータを送信する方法、つまり、グリッドのデータを取得するために、データ検証問題の前にデータを取得することです

大まかな流れ：グリッドでデータを取得→json形式の文字列に変換→この文字列をフォームのフィールドに入れる

(1) グリッドのデータを取得する。

a. グリッド内のストアオブジェクトを取得（js内部にはオブジェクトという概念はないようですが、オブジェクトと呼ぶことに慣れましょう）。

b. 各行のデータを取得します。主に getCount(), store.getRange(), または変更されたレコードのみを取得したい場合は getModifiedRecords() のようなメソッドを使用します。

getCount()関数は、主にストアのレコード数、つまり何行のデータがあるのかを返します。

getRange()関数は、複数のレコードを一列に並べて取得します。開始位置と終了位置のインデックス値を指定する必要があり、開始パラメータには0を、終了位置にはストアのレコード数を指定して、すべてを取得します。

getModifiedRecords()関数は、主にストア内で変更されたレコードを取得するため、いずれかのデータを変更し、元のデータに戻せば、そのデータは変更されたものとみなされます。

c. c. 取得したデータを json 形式に変換します。ここでは、配列の各行のデータを繰り返し処理し、配列を json 形式に変換するメソッドを使用しており、ext には変換用の Ext.encode() メソッドがあります。

d. この文字列をフォームフィールドに入れるのは、XXX.setValue()と同じくらい簡単です。

全体のコードは以下の通りです。

    var store=this.getLspApplyItemCL().getStore();
    var count=store.getCount();//Get the total number of records
    var records;
    var dataArr=new Array();
    var dataString="[]";
    records=store.getRange(0,count);
    for(var i=0;i<count;i++){
      dataArr[i]=records[i].data;
    }
    dataString=Ext.encode(dataArr);//convert the array to a json format string
    this.getLspApplyItem().getField("data").setValue(dataString);

(2) データを取得する前に行うべき、グリッドでのデータ検証。

このメソッドは、おそらくバージョン管理か何かの関係で、ウェブから持ってきたコードの一部を修正して使用しています。元のコードのアドレスは次のとおりです。 http://scnults.iteye.com/blog/1487637

それを引き継ぎ、赤で示したコードを変更したところ、以下のようになりました。

Ext.apply(Ext.grid.EditorGridPanel.prototype,{
        //add a generic validation method for the EditorGridPanel
  isValid : function(records){
    var cm = this.cm || this.colModel;
      var f = true;
      var column = {};
      for (var i = 0; i < cm.columns.length; i++) {
        var dataIndex = cm.getDataIndex(i);
        column[dataIndex] = i;
      }
      for (var i = 0; i < records.length; i++) {
        var o = records[i].data;
        var rowindex = i;// row id
        for (var n in o) {
          var colindex = column[n];
          if (! !colindex && ! !cm.columns[colindex].editor) {
            Ext.getCmp(cm.columns[colindex].editor.id).setValue(o[n]);//set the value for the editable control
            var flag = Ext.getCmp(cm.columns[colindex].editor.id).validate();//check after setting the value
            f = f && flag;
            if (!flag) {
              Ext.get(this.getView().getCell(rowindex,
                      colindex))
                  .addClass('x-form-invalid');//add error css style (style of form in Ext) to specific spaces that don't pass the checksum
            }
          } else {
            continue;
          }
        }
      }
      return f;
  }
})

使用すること。

this.getLspApplyItemCL().isValid(store.data.items)

2. Ext.grid.EditorGridPanel に checkColumn を設置する。

公式の例を読んで、オンラインで検索した後、それを使用する際の問題があるので、私は唯一のColumnModelで直接新規Ext.grid.CheckColumnでき、新しい後、私はまた、このplugins = thisを追加する必要があります。チェックコラム、ここで小さな問題は、私のインタフェースは2行が配列ですべて、または直接コードを見てチェックコラムを使用してくださいしています。

columnModel = Ext.extend(Ext.grid.ColumnModel, {
  checkColumn:[],
  constructor : function(config){
    this.checkColumn[0] = new Ext.grid.CheckColumn({
      header: "paperMaterials",
      dataIndex: "paper",
      width: 60,
      renderer:this.checkColumnRender,
      onMouseDown:function(e, t){
        if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) ! = -1){
          e.stopEvent();
          var index = this.grid.getView().findRowIndex(t);
          var record = this.grid.store.getAt(index);
          record.set("paperCount",!record.data[this.dataIndex]?1:0);
          record.set(this.dataIndex, !record.data[this.dataIndex]);
        }
      }
    });
    this.checkColumn[1] = new Ext.grid.CheckColumn({
      header: "Electronic materials",
      dataIndex: "papeCount",
      renderer:this.checkColumnRender,
      width: 60
    });
    var cfg=config || {
      columns:[new Ext.grid.RowNumberer(),{
        xtype: "gridcolumn", scope:this, width: 460,
        id: "zlText", dataIndex: "zlText",
        header: "MaterialName",
        editor: new Ext.form.TextField({allowBlank: false}),
        align: "left", hidden: false, sortable: true,
        renderer:this.zlTextRender
      },{
        scope:this, width: 100,
        id: "zlStyle", dataIndex: "zlStyle",
        header: "Material type",
        align: "center", hidden: false, sortable: true,
        editor: new Ext.form.ComboBox({
          store : new Ext.data.SimpleStore({
            fields : ['zlStyle', 'zlStyleText'],
            data : [["0","original"],["1","copy"],["2","original ©"]]
          }), //data source
          displayField : 'zlStyleText', //display dropdown list data value
          valueField : 'zlStyle', //data value of the dropdown list box when submitted
          typeAhead : true,
          triggerAction : 'all',
          allowBlank : false,
          forceSelection : true,
          mode : 'local'
      })
      },
        this.checkColumn[0]
      ,{
        xtype: "gridcolumn", scope:this, width: 60,
        id: "paperCount", dataIndex: "paperCount",
        header: "paper(copies)",
        editor: new Ext.form.NumberField({allowBlank: false,allowDecimals:false}),
        align: "right", hidden: false, sortable: true
      },this.checkColumn[1]]
    };
    columnModel.superclass.constructor.call(this,cfg);
  },zlTextRender:function(data,cell,record,row,col,store){
    if(record.get("infoId")==record.get("zlGroup")){
      return record.get("zlText");
    }else{
      return String.format("<span style='color:#08298A'>{0}</span><br>{1}",record.get("parentZlText" ),record.get("zlText"));
    }
  },rend:function(value){
    for(var i=0;i<ZLSTYLE_DATA.length;i++){
      if(value==ZLSTYLE_DATA[i][0]){
        return ZLST

3は、セルの値が編集可能ではない設定

この解決策では根本的な解決にはならないと思いますが、Ext.grid.EditorGridPanelのbeforeeditイベントの値をcompleteにすることで、利用することができます。

this.on("beforeedit",function(obj) {
      if(condition){
        return true;
      }else{
        return false;
      }
    });

このメソッドは、編集ボックスをクリックしたときに呼び出されます。trueは編集できることを意味し、逆も同様です。主にobjパラメータ、beforeeditのみが渡され、このパラメータは以下のデータを取得することができます。

グリッド - テーブルそのもの



record - 編集したいレコードの行です。



field - 編集する列の名前です。



value - 編集する値



row - 行番号です。



column - 列番号

カレントカラムの名前を取得したい場合は、obj.fieldだけで取得できますが、beforeeditイベントはcheckColumnに影響しません。checkColumnを無効にしたい場合は、方法が分からないので、ここではcheckColumnを直接非表示にして、rewriterメソッドを呼び出してもよいでしょう。

new Ext.grid.CheckColumn({
   header: "electronicMaterials",
   dataIndex: "papeCount",
   renderer:function(v, p, record){
    if(editable condition){
     return "";
    }
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
   },
   width: 60
  });

最終的な結果です。

CheckColumnのonMouseDown経由で、用紙（コピー）を選択時に1、キャンセル時に0にする関数を作った、コード。

record.set("paperCount",!record.data[this.dataIndex]?1:0);

もう一つチューニングしていないことがあり、それはメイン素材に枚数を持たせてはいけないということで、次に考えました。