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.
留言
張貼留言