ExtJS grid

 1.生命週期 & 常見用法

顯示和隱藏


所有的組件都是在show和hide方法中構造的。用來隱藏組件的默認的css方法是“display:none”但是通過hidemode配置的時候就有所變化瞭:

var panel = Ext.create('Ext.panel.Panel', {

        renderTo: Ext.getBody(),

        title: 'Test',

        html: 'Test Panel',

        hideMode: 'visibility' // use the CSS visibility property to show and hide this

component

    });


    panel.hide(); // hide the component


    panel.show(); // show the component


https://www.aiwalls.com/javascript%E7%B7%A8%E7%A8%8B%E6%95%99%E5%AD%B8/20/38831.html



2.Grid 介紹

https://wadehuanglearning.blogspot.com/2017/01/ext.html


3.

https://blog.csdn.net/liu865033503/article/details/72821372


4.

https://developer.aliyun.com/article/685652


5.Java中ExtJs常用控制項配置屬性大全


原文網址:https://kknews.cc/code/mo4kegp.html

https://kknews.cc/zh-tw/code/mo4kegp.html


**6.gridPanel 詳細介紹

http://yhhuang1966.blogspot.com/2014/06/extjs-4-gridpanel.html


7.extjs 連動 comboBox

https://kevintsengtw.blogspot.com/2012/12/jquery-easyui-combobox.html


8.https://demonchang.blogspot.com/2011/06/code-extjs-combo-box.html

[Code] ExtJS combo box資料連動

最近有個project的網站是用ExtJS來寫,可是在做combo box內容的資料連動,卻出現第一次資料都不會更新,要等到第二次執行資料才會連動。上網找了一下,發現很多人都遇到一樣的問題。


解法其實很簡單,就是在combo box裡面加入’lastQuery’的參數就可以了。


lastQuery: '',

listeners: {

    'select': function() {

    store2.filter('INDEX_ID', combo3.getValue()); // combo box

data filter

    }

}, 


**9.表單功能


http://jsgears.com/viewthread.php?tid=29


**10.當我們離開編輯的儲存格時, 輸入的資料便會修改 Store 中所儲存的資料. 上例中建立 CellEditing 物件時未指定 clicksToEdit 屬性, 預設是要 double clicks 才會進入編輯模式. 在下面範例 25-1 中, 編輯欄位時不允許空白, 且單擊即可編輯儲存格.

測試範例 25-1 : http://tony1966.xyz/test/extjstest/extjs_grid_25_1.htm [看原始碼]


    Ext.onReady(function() {

      //定義表頭欄位

      var columns=[{header:"股票名稱",dataIndex:"name"},

                   {header:"股票代號",dataIndex:"id"},

                   {header:"收盤價 (元)",dataIndex:"close",

                    editor:{allowBlank:false}

                    },

                   {header:"成交量 (張)",dataIndex:"volumn",

                    editor:{allowBlank:false}

                    }

                   ];

      //定義原始資料

      var data=[["台積電","2330",123,4425119],

                ["中華電","2412",96.4,5249],

                ["中碳","1723",192.5,918],

                ["創見","2451",108,733],

                ["華擎","3515",118.5,175],

                ["訊連","5203",97,235]

                ];

      //轉成 Store 物件

      var store=Ext.create("Ext.data.ArrayStore", {

          autoLoad:true,

          data:data,

          fields:[

            {name:"name"},

            {name:"id"},

            {name:"close"},

            {name:"volumn"},

            {name:"action"}

            ]

          });

      //建立 GridPanel

      var grid=Ext.create("Ext.grid.Panel",{

        columns:columns,

        store:store,

        renderTo:"grid",

        width:450,

        forceFit:true,

        selType:"cellmodel",

        plugins:[

          Ext.create("Ext.grid.plugin.CellEditing",{clicksToEdit:1})

          ]

        });

      }); //end of onReadyhttp://yhhuang1966.blogspot.com/2014/07/extjs-4-gridpanel_8.html


11.



留言

這個網誌中的熱門文章

考績被打差了 輕率離職會更傷

Arrays - DS (Reverse array) [Easy]

WireMock