3

私はextjs 4を使用しており、フィールド名承認を示すグリッドがあります。ここでは、値が true の場合にグリッドがロードされるときにチェックされるチェックボックスを示しました。ただし、dataIndex 値がフォルトの場合は、チェックボックスのみが表示されます。チェックを外したチェックボックスをクリックすると、リスナーを使用してアクションが実行されるようになりました。しかし、私はそれを行うことができません。誰でもこれについて私を助けてもらえますか? 私のコードは以下のとおりです：

{
   text: 'Approval',
   dataIndex: 'approve',
   flex: 1,
   align: 'left',
   renderer: function(value, metaData, record, row, col, store, gridView){
    if(value == true)
      {
        return '<input type="checkbox" checked="true" />';
      }else{
        return '<input type = "checkbox"  />';
         listeners: {
            this.approve();
          }
       }
     }   
  }

approve: function(){
        alert('hi');
    }
4

2 に答える 2

5

古い答え

チェックボックスには、値が変更された後に起動される変更リスナーがあります。

{
        xtype     : 'checkbox'
        boxLabel  : 'This is my checkbox',
        name      : 'mycheckbox',
        inputValue: true,
        listeners : {
              change: function(cbx, newValue, oldValue){
                     me.approve();
              }
        }
}

this関数は別のスコープ内で呼び出されるため、リスナー内では使用できないことに注意してください。

編集：

Ext.ux.CheckColumnグリッドで を使い始めます。

これで、次を使用できます。

{ 
    xtype: 'checkcolumn',
    text: 'Approval',
    dataIndex: 'approve',
    flex: 1,
    align: 'left',
    sortable: false,
    listeners:{
        checkchange:function(cc,ix,isChecked){
            alert(isChecked);
        }
    }
}
于 2012-11-28T08:18:03.930 に答える
1

アーカイブしようとしているものは、そのままでは使用できません。

チェックボックスを常に表示したいと思いますか？それ以外の場合、CellEditorプラグインはすでに探しているものです。

しかし、とにかく開始する必要があります (私は推測します)。ExtJS のクラスと画像を使用して、celleditior と共にセル内に一種の偽のコンボを表示するサンプル コードを次に示します。まだ修正する必要があると思われるものが 1 つあります。編集を開始する前に cellcontent をオーバーライドする必要があるため、celleditor はデフォルトのタイプのみを削除するように見えます。

この先行くの？もちろん、チェックボックスを一意の ID で変更し、Ext.Element をフェッチして、イベントを登録できるようにすることもできます。ただし、このアプローチには欠点が 1 つあります。レンダリング時間に注意する必要があります。そうしないと、取得しようとしているときにコンボが存在しません。したがって、このアプローチをお勧めします。レンダリングを開始する前にイメージを簡単に消去できます。

Ext.create('Ext.data.Store', {
    storeId:'simpsonsStore',
    fields:['name', 'email', 'phone'],
    data:{'items':[
        {"name":"Lisa", "email":"lisa@simpsons.com", "phone":true},
        {"name":"Bart", "email":"bart@simpsons.com", "phone":false},
        {"name":"Homer", "email":"home@simpsons.com", "phone":true},
        {"name":"Marge", "email":"marge@simpsons.com", "phone":true}
    ]},
    proxy: {
        type: 'memory',
        reader: {
            type: 'json',
            root: 'items'
        }
    }
});

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: Ext.data.StoreManager.lookup('simpsonsStore'),
    columns: [
        {header: 'Name',  dataIndex: 'name', editor: 'textfield'},
        {header: 'Email', dataIndex: 'email', flex:1},
        {header: 'Phone', dataIndex: 'phone',
         editor: { xtype: 'checkbox', inputValue: 'true', uncheckedValue: 'false' }, renderer: function(value){ 
             return value ? '<span class="x-form-cb-checked"><div class="x-form-checkbox"></div></span>' : '<div class="x-form-checkbox"></div>';  
         }
  }
    ],
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ],
    height: 200,
    width: 400,
    renderTo: Ext.getBody()
});

これがJSFiddleです

于 2012-11-28T10:05:05.627 に答える