V120402- V120402C - 子畫面查詢grid 採用 CheckboxModel- checkbox 方式選擇 row, 處理勾選資料

目的: grid 畫面新增 CheckboxModel 選擇 row

處理說明:  1> var view = sub_Grid.getView();
                         view.selModel = Ext.create('Ext.selection.CheckboxModel', {
                         selectionMode: 'SIMPLE',

                            : 

                          };

                         view.updateLayout();

                   2>selectionMode:

• SINGLE表示單選
• SIMPLE或MULTI表示多選 ， 預設是多選的(如上段程式碼已經有設定單選

                   3>處理勾選的資料

                      //檢查資料是否正確

                        cur_recs = Tmp_sub_Grid.getView().selModel.getSelection();

                        console.log("cur_recs:", cur_recs);

                         if (cur_recs.length == 0) {

                              mywarnalert("請先選擇要續借的資料");

                              return;

                         }

                         for (var i = 0; i < cur_recs.length; i++) {

1>V120402C.js

 var view = sub_Grid.getView();

    view.selModel = Ext.create('Ext.selection.CheckboxModel', {

        selectionMode: 'SIMPLE',

        listeners: {

            selectionchange: function (cb, selected, eOpts) {

                console.log(view.selModel.getSelection()); //選取的值

                //console.log("selected.data[TMNO]", selected.data["TMNO"]);

            },

            RowMouseDown: function (view, record, item, index, e) {

                var me = this;

                if (index !== -1) {

                    if (!me.allowRightMouseSelection(e)) {

                        return;

                    }

                    if (e.shiftKey && me.lastFocused) {

                        me.selectRange(me.lastFocused, record, e.ctrlKey);

                        me.processSelection(view, record, item, index, e);

                    }

                    if (!me.isSelected(record)) {

                        me.mousedownAction = true;

                        me.processSelection(view, record, item, index, e);

                    } else {

                        me.mousedownAction = false;

                    }

                }

            }

        }

    });

    view.updateLayout();

2>checkbox 勾選資料s 的處理  - [續借]鈕

//檢查資料是否正確

    cur_recs = Tmp_sub_Grid.getView().selModel.getSelection();

    console.log("cur_recs:", cur_recs);

    if (cur_recs.length == 0) {

        mywarnalert("請先選擇要續借的資料");

        return;

    }

    for (var i = 0; i < cur_recs.length; i++) {

        cur_rec = cur_recs[i];

        Tmp_Str = "第" + (i + 1).toString() + "筆選擇 -條碼編號(" + cur_rec.data["TMNO"] + ")";

        //console.log(Tmp_Str, cur_rec.data["CHECK"]);

        //if ((cur_rec.data["CHECK"] == undefined) || (cur_rec.data["CHECK"] == false))

        //continue;

        Tmp_TMNO = cur_rec.data["TMNO"];

        Tmp_BRDT = cur_rec.data["BRDT"];

        Tmp_BRDAY = cur_rec.data["BRDAY"];

        if (Tmp_BRDAY >=20) {

            Tmp_Str = "第" + (i + 1).toString() + "筆條碼編號(" + Tmp_TMNO + ")已續借展延10天<br>"

                + "不可再展延<br>"

                +"請檢核<br>";

            mywarnalert(Tmp_Str);

            //cur_rec.data["CHECK"].setValue(false);

            //console.log("Ext.getCmp(Tmp_TMNO)", Ext.getCmp(Tmp_TMNO));

            isOk = false;            

            break;

        }

    }// for i=0

    if (isOk == false)

        return false;

如上為 子畫面,單純 Grid , 不套用 Template
PS: 若為 Template of   grid_Single or grid_M 正式處理方式 : 將 TMGrid 換掉 

    Ext.getCmp('grid_Single').destroy(); //20220905

    var grid_Single = Ext.create('grid_Single', {

        id: 'grid_Single',

        resizable: true,

        selModel: Ext.create('Ext.selection.CheckboxModel', {

            selectionMode: 'SIMPLE',

            listeners: {

                /*selectionchange: function (cb, selected, eOpts) {

                    //view.selModel.getSelection()

                },*/

                RowMouseDown: function (view, record, item, index, e) {

                    var me = this;

                    if (index !== -1) {

                        if (!me.allowRightMouseSelection(e)) {

                            return;

                        }

                        if (e.shiftKey && me.lastFocused) {

                            me.selectRange(me.lastFocused, record, e.ctrlKey);

                            me.processSelection(view, record, item, index, e);

                        }

                        if (!me.isSelected(record)) {

                            me.mousedownAction = true;

                            me.processSelection(view, record, item, index, e);

                        } else {

                            me.mousedownAction = false;

                        }

                    }

                }

            }

        })

    });

    Ext.getCmp('tab2').add(grid_Single); //將grid加入到tab裡面

    Ext.getCmp('tab2').updateLayout();

Question : V120402 - CheckBox & 全選CheckBox 如何處理 - Grid - 不用 CheckboxModel

目的: 如何加入 CheckBox 及全選 CheckBox

處理說明:  1>Grid.Columns 加入 CheckBox 欄 (xtype; 'checkcolumn')
                   2>如何標示每一row id , checkbox

                   ?? 3>如何全選 CheckBox 

1>*.js

var J_columns = [
{ header: "", xtype: "rownumberer", width: 50, align: "center", sortable: false },
{
header: '勾選',
dataIndex: 'CHECK',
xtype: 'checkcolumn',
width: 60,

renderer: function (value, metadata, record, rowIndex, colIndex, store) {
var tempVal = '';
if ((value === 'Y') || (value === true)) { tempVal = 'checked'; }
var Tmp_Str = "<input  type='checkbox'  name=" + (record.get('AMMNO')) + "   " + tempVal + " >";
return Tmp_Str;
},