V20301 - 複製 - checkboxmodel - 多選複製後, Locate 至複製後的資料

 目的: 複製 - checkboxmodel - 多選複製後, Locate 至複製後的資料

處理說明: 1>複製資料後,重新顯示

                    //複製資料     

                    for (let i = 0; i <= cur_recs.length - 1; i++) {

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

                        cur_rec = cur_recs[i];    

                        //object 不可直接 assign ,指到原本cur_rec會改到原本的 cur_rec                    

                        //copy_rec = cur_rec;   

                        copy_rec = cur_rec.copy();

                        Tmp_NEXT_FMNO = get_NEXT_FMNO();

                        var Tmp_cur_DT = DatetoStr(now, "Y/m/d");

                        var Tmp_MDDT = DatetoStr(copy_rec.data["MDDT"], "Y/m/d");

                        copy_rec.data["FMNO"]=Tmp_NEXT_FMNO;                        

                        copy_rec.data["BTDT"] = Tmp_cur_DT;        

                        copy_rec.data["MDDT"] = Tmp_cur_DT;        

                        copy_rec.data["STATFM"] = "A";        

                        copy_rec.data["DTSOR"] = "A";        

                        copy_rec.data["OSM"] = "";                    

                        //新增資料庫資料

                        Copy_FMNO(copy_rec);

                    } //  end of for (let i=0,)                   

                       //重新顯示資料  

                       Ext.getCmp('btn_Show').fireHandler();

                       Ext.getCmp('grid_Single').getView().refresh();

                  2> 跳至最後一頁
                        var Tmp_ptb = Ext.getCmp('grid_ptb');
                        Tmp_ptb.moveLast();  

1>*.js  store load完成後 , locate 至最新的資料

     gridstore.on('load', function (me, records, successful, eOpts) {
          var Tmp_index = gridstore.find("FMNO", Tmp_NEXT_FMNO);
          var sel_rec = gridstore.getAt(Tmp_index);
          Ext.getCmp('grid_Single').getView().getSelectionModel().select(sel_rec);
         gridstore.un("load", gridstore.events.load.listeners[gridstore.events.load.listeners.length-1].fn);
       }) // end of Ext.getCmp('grid_Single')..on("load")

2>*.js  複製後, 重新顯示 store

Ext.getCmp("btn_copy").on('click', function (me, e, eOpts) {        

        var cur_recs = Ext.getCmp('grid_Single').getSelectionModel().getSelection();

        var cur_rec;

        console.log("before copy_rec");

        //var copy_rec = Ext.create('Ext.data.Model', {});            

        var copy_rec;  //?? 如何產生另一 copy_rec 不和 cur_rec 相同

        var np = {};

        console.log("after copy_rec");

        if (cur_recs.length == 0) {

            buttonModel.modelType = 0;

            mywarnalert('請先勾選要複製的資料!!');

        }

        else {

            //var gridstore = Ext.getCmp('grid_Single').store;

            me.delMessage = "確定複製勾選的資料嗎?";

            Ext.Msg.confirm('提醒', me.delMessage, callBackFunc);

            function callBackFunc(id) {

                if (id == 'yes') {

                    gridstore.on('load', function (me, records, successful, eOpts) {

                        console.log("grid_Single on load !!")

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

                        var Tmp_index = gridstore.find("FMNO", Tmp_NEXT_FMNO);

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

                        var sel_rec = gridstore.getAt(Tmp_index);

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

                        Ext.getCmp('grid_Single').getView().getSelectionModel().select(sel_rec);

                        console.log("gridstore.events:", gridstore.events);

                        gridstore.un("load", gridstore.events.load.listeners[gridstore.events.load.listeners.length-1].fn);

                    })  // end of Ext.getCmp('grid_Single')..on("load")

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

                    for (let i = 0; i <= cur_recs.length - 1; i++) {

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

                        cur_rec = cur_recs[i];                        

                        copy_rec = cur_rec;

                        console.log("0 cur_rec: ", cur_rec);

                        Tmp_NEXT_FMNO = get_NEXT_FMNO();

                        var Tmp_cur_DT = DatetoStr(now, "Y/m/d");

                        var Tmp_MDDT = DatetoStr(copy_rec.data["MDDT"], "Y/m/d");

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

                        copy_rec.data["FMNO"]=Tmp_NEXT_FMNO;                        

                        copy_rec.data["BTDT"] = Tmp_cur_DT;        

                        copy_rec.data["MDDT"] = Tmp_cur_DT;        

                        copy_rec.data["STATFM"] = "A";        

                        copy_rec.data["DTSOR"] = "A";        

                        copy_rec.data["OSM"] = "";                    

                        console.log("1 cur_rec: ", cur_rec);

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

                        //新增資料庫資料

                        Copy_FMNO(copy_rec);

                    } //  end of for (let i=0,)                    

                    //因為複製後, 按[顯示資料]鈕, 並不會顯示刪才新增的資料,& Local 新增的資料                                Ext.getCmp('btn_Show').fireHandler();

                    Ext.getCmp('grid_Single').getView().refresh();

                    //跳至最後一頁

                    var Tmp_ptb = Ext.getCmp('grid_ptb');

                    Tmp_ptb.moveLast();                    

                    buttonModel.modelType = 0;

                }  // end    if (id == 'yes')             

            }  // end of callbackfunc

        }  //end of else {}       

    }

    );

Grid 複選 - checkboxModel 的網路範例

Grid 複選 - checkboxModel 的網路範例

https://www.twblogs.net/a/5b8cc2872b717718833524ea

 

Ext --Grid複選框列

原創yanpengfeil2018-09-03 13:11

在網上找了好多但是都是所問非所答，最後找到了兩篇比較好的文章，記錄下

---

今天我們主要介紹一下grid的單選、多選功能，並告訴小夥伴們如何顯示一個選擇框列

extjs grid默認支持單選

在前面幾節的例子中，我們已經見識了extjs grid的強大。今天說到單選和多選，我們不妨打開前面的例子，其實在grid默認的情況下已經可以進行單選的，如圖：

extjs grid的行選擇

在extjs grid的配置項中，有兩個配置項和選擇有關：

• selModel：選擇類型的對象，或者選擇類型的配置對象，可以進行更多的配置（單選、多選，多選框的位置等）
• selType：選擇類型的字符串，不能進行更多的設置

selModel示例：

xtype: "grid",
store: myStore,
selModel: {
    selection: "rowmodel",
    mode: "MULTI"
},
columns: [
    { xtype: "rownumberer", text: "行號", width: 50 },
    { text: "姓名", dataIndex: "Name" },
    { text: "年齡", dataIndex: "Age" }
]

selType示例：

xtype: "grid",
store: myStore,
selType: "checkboxmodel",
columns: [
    { xtype: "rownumberer", text: "行號", width: 50 },
    { text: "姓名", dataIndex: "Name" },
    { text: "年齡", dataIndex: "Age" }
]

extjs grid 多行選則

上面已經介紹瞭如何進行選擇，下面就是實際的多選了。默認情況下extjs grid的選擇模型爲rowmodel，我們可以通過rowmodel進行行選擇（還有一個cellmodel，是用來進行單元格選擇的）。

rowmodel默認的選擇模型爲單行的選擇，也就是我們最開始看到的，只能選中一行，要想讓它支持多行選擇，就要進行相應的配置：

selModel: {
    selection: "rowmodel",
    mode: "MULTI"
}

注意配置項mode，這傢伙用來控制是單行選擇還是多行選擇的，可用的值有3個：

• SINGLE：單行選擇
• SIMPLE：多行選擇，單擊選中/取消選中行
• MULTL：多行選擇，支持CTRL、SHIFT功能鍵，如果要進行多選，需要按住ctrl鍵。用shift可以進行區域選擇

extjs grid 使用多選框

使用選擇框的選擇模型是checkboxmodel，來看看下面的代碼：

xtype: "grid",
store: myStore,
selModel: Ext.create("Ext.selection.CheckboxModel", {
    injectCheckbox: 1,//checkbox位於哪一列，默認值爲0
    mode: "single",//multi,simple,single；默認爲多選multi
    checkOnly: true,//如果值爲true，則只用點擊checkbox列才能選中此條記錄
    allowDeselect: true,//如果值true，並且mode值爲單選（single）時，可以通過點擊checkbox取消對其的選擇
    enableKeyNav: true
}),
columns: [
    { xtype: "rownumberer", text: "行號", width: 50 },
    { text: "姓名", dataIndex: "Name" },
    { text: "年齡", dataIndex: "Age" }
]

效果如下：

extjs grid 獲取選中行

要得到選中行，我們首先要找到grid，然後得到grid的selectionModel，然後再找到選擇行，代碼如下：

var grid = win.down("grid");
var records = grid.getSelectionModel().getSelection();
Ext.MessageBox.alert("提示", records.length);

---

大家都知道GridPanel是一個非常好用的控件，但是沒有像C#一樣的自定義的複選框。那我們就手工給它加一個複選框列，並實現全選清除獲取選中的數據。以下GridPanel簡稱GP。

第一種：自己增加一個CheckColumn來實現選中與否

1.首先在GP的Store裏面增加一個是否選中的字段源：<ext:ModelField Name="IsSelect" Type="Boolean" DefaultValue="0"/>。因爲不用數據庫返回，所以直接設置默認值爲0，不選中。

2.在GP的ColumnModel裏，增加我們的第一行復選框：<ext:CheckColumn runat="server" ID="c1" Text="選擇" Editable="true" DataIndex="IsSelect" Width="40" /> 。

3.實現點擊複選框的時候界面能夠實現選中狀態。在GP的事件裏增加CellClick，我們命名爲：clickOne。

4.function clickOne(gridview, td, value, data, tr) {
        if (data.data.IsSelect)
            data.data.IsSelect = 1;
        else data.data.IsSelect = 0;
        App.GP.store.commitChanges();
        App.GP.view.refresh();
    }。其實就是改變數據源的IsSelect字段的值，然後在刷新GP，界面上看到的就是選中狀態了。

那麼接下來我們實現全選和清除全選就簡單多了。在GP增加2個全選和清除按鈕。調用的事件如下：

//清除所有選擇
    function clear() { 
         var dataList = App.GP.store.data.items;
         if (dataList.length > 0) {
             for (var i = 0; i < dataList.length; i++) {
                 var data = dataList[i].data;
                 if (data.IsSelect == 1) {
                     data.IsSelect = 0;
                 }
             }
         }
         App.GP.store.commitChanges();
         App.GP.view.refresh();
     }
     //全部選擇
     function selectAllMasterial() {
         var dataList = App.GP.store.data.items;
         if (dataList.length > 0) {
             for (var i = 0; i < dataList.length; i++) {
                 var data = dataList[i].data;
                 if (data.IsSelect == 0) {
                     data.IsSelect = 1;
                 }
             }
         }
         App.GP.store.commitChanges();
         App.GP.view.refresh();
     }

即可。

得到選中的數據則更簡單了：

var dataList = App.GP.store.data.items;
        if (dataList.length > 0) {
               for (var i = 0; i < dataList.length; i++) {
                      var data = dataList[i].data;
                      if (data.IsSelect == 1) {

//這裏就是你要獲取得到的數據，然後執行你自己的操作了

       }

       }

}

 

第二種：就是EXT.NET自帶的SelectionModel

1.在GP裏增加一個選中模板：

<SelectionModel>
<ext:CheckboxSelectionModel ID="CheckboxSelectionModel1" Mode="Multi" runat="server">

//這裏，可以加一系列的選中事件，這裏只列出了3個，其他自己去看看還有哪些
<Listeners>

<BeforeSelect Fn="" />

<Deselect Fn="" />

<Select FN="" />
 </Listeners>
</ext:CheckboxSelectionModel>
 </SelectionModel>

2.如果需要特殊處理，就在選中模板裏添加自己的事件。

3.獲取選中的數據：App.gpContractList.selModel.selected;即可。

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------

轉自：https://blog.csdn.net/evilcry2012/article/details/52918064

轉自：https://blog.csdn.net/lijingrong_ljr/article/details/50555336

Question: V120103 - [新增] --> [存檔]資料後, 重新儲存資料, 並 Focus 在該目前編輯的資料

目的: Grid [新增] --> [存檔]資料後, Locate 至原本的新增的那筆資料

處理說明: 1> Grid 有分頁處理, 若新增的那筆資料, 位置在其他頁,要如何處理
                  2> store 要 如何 Scroll 至該筆資料

                  3> store.findby  用法

--> 若 [存檔]後, store.reload() ,則新增的該筆資料可能不見,

      所以應該由前端 取得 MAXITM 後, 直接設定 store.欄位值, 不重新 reload();

1>store.reload()後, 找出剛才新增的那筆資料

//onclick : 會先執行 partent.click , 才執行 this.click

    Ext.getCmp('btn_save').on('click', function () {

        console.log("btn_save click my");        

        //gridstore.reloadGirdData();

        var cur_recs = Ext.getCmp("grid_Single").getSelectionModel().getSelection();

        var cur_rec = cur_recs[0];

        console.log("cur_rec=", cur_rec);

        var Tmp_CLS, Tmp_DITM,Tmp_REPN;

        var np = {};

        Tmp_CLS = cur_rec.data["CLS"].toString();

        Tmp_DITM = cur_rec.data["DITM"].toString();

        Tmp_REPN = cur_rec.data["REPN"].toString();

        np = {

            CLS: Tmp_CLS,

            DITM: Tmp_DITM,

            REPN: Tmp_REPN,

        }

        console.log("np=", np);

//gridstore.reload(); 必需在 onload event - 讀完資料後, 才 findBy , 找到的index才會準 

        gridstore.reload();

        //gridstore.find("DITM", Tmp_DITM);

        gridstore.on('load', function () {

            console.log("inside onload");

            //若新增的資料在另一分頁, 則 reload()後, 無法找到 

            // --> 所以存檔時,即時更新 store的欄位值 , 不重新 reload() & 不locate 剛才編輯的資料

            var Tmp_index = gridstore.findBy(function (record, id) {

                var Tmp_bol = true;

                //console.log("record.data[CLS].toString()", record.data["CLS"].toString());

                //console.log("record.data[DITM].toString()", record.data["DITM"].toString());

                //console.log("record.data[REPN].toString()", record.data["REPN"].toString());

                Tmp_bol = record.data["CLS"].toString() == Tmp_CLS

                    && record.data["DITM"].toString() == Tmp_DITM

                    && record.data["REPN"].toString() == Tmp_REPN;

                console.log("Tmp_bol=", Tmp_bol);

                return Tmp_bol;   // true : 有找到

            });

            console.log(" index =", Tmp_index);

            cur_rec = gridstore.getAt(Tmp_index);

            Ext.getCmp("grid_Single").getSelectionModel().select(cur_rec);

            console.log(" Ext.getCmp(grid_Single).getSelectionModel().select(cur_rec); " );

        });

        console.log("after  onload ");

        //datastore.ITM欄位值設為 MAXITM

        //mysuccessalert("btn_save click");

    });