[Ext JS 4] 實戰之Grid, Tree Gird 添加按鈕列

時間 2019-11-16

標籤 ext 實戰 grid tree gird 添加按鈕欄目 JavaScript 简体版

原文原文鏈接

引言

貼一個grid 的例子先：javascript

有這樣一個需求：css

1. 給 Grid(or Tree Grid)添加一列，這一列顯示是Button. 點擊以後能夠對這一行進行一些操做html

2. 這一列每一行對應的按鈕不盡相同，根據每一行的數據不一樣，顯示的按鈕不一樣，對應的點擊操做也不一樣。java

解法

針對以上需求1 , 很容易就能夠解決。json

Ext JS 的Grid 有提供 Ext.grid.column.ActionView xtype: actioncolumn 這樣的列。app

只須要在grid panel 的columns 配置一欄的xtype爲actioncolumn；配置icon 爲顯示的按鈕圖；配置handler點點擊的動做就能夠了。flex

貼一個完整的例子：ui

<!-- add by oscar999 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>

<script>
Ext.onReady(function(){
	Ext.create('Ext.data.Store', {
	    storeId:'simpsonsStore',
	    fields:['name', 'email', 'phone'],
	    data:{'items':[
	        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
	        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
	        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
	    ]},
	    proxy: {
	        type: 'memory',
	        reader: {
	            type: 'json',
	            root: 'items'
	        }
	    }
	});

	Ext.create('Ext.grid.Panel', {
	    title: 'Simpsons',
	    store: Ext.data.StoreManager.lookup('simpsonsStore'),
	    columns: [
	        { text: 'Name',  dataIndex: 'name' },
	        { text: 'Email', dataIndex: 'email', flex: 1 },
	        { text: 'Phone', dataIndex: 'phone' },
	        { text: 'Actions', xtype: 'actioncolumn',icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}}
	    ],
	    height: 200,
	    width: 400,
	    renderTo: Ext.getBody()
	});
});
</script>

</head>
<body>

</body>
</html>

若是要添加多個圖標按鈕也很簡單url

	        { text: 'Actions', xtype: 'actioncolumn',
	          items:[{
	        	  icon:'../resources/themes/images/access/grid/checked.gif',handler:function(){alert("hello")}
	        	  },{
	        	  icon:'../resources/themes/images/access/grid/columns.gif',handler:function(){alert("hello")}
	        	  }	                
	          ]
	        }

如今的問題就是，如何根據這一行其餘欄的值顯示不一樣的圖標按鈕？spa

在早期使用Ext js 3 的時候，有使用過這種方法來解決這個問題：（不肯定Ext js 3 是否支持下面提到的新的方法）

舊的方法：

把圖標組成 <img src="" onclick/> 這樣的字串，當成值放入這一列。這種傳輸和控制上來講都不是很好。

下面給出新的方法。

新的 Ext.grid.column.ActionView 組件有提供 getClass 這樣的配置項，
關於這個配置項的解釋是：

getClass : Function

A function which returns the CSS class to apply to the icon image.

Available since: 3.4.0
Parameters

    v : Object

    The value of the column's configured field (if any).
    metadata : Object

    An object in which you may set the following attributes:
        css : String

        A CSS class name to add to the cell's TD element.
        attr : String

        An HTML attribute definition string to apply to the data container element within the table cell (e.g. 'style="color:red;"').
    r : Ext.data.Model

    The Record providing the data.
    rowIndex : Number

    The row index.
    colIndex : Number

    The column index.
    store : Ext.data.Store

    The Store which is providing the data Model.

一句話來講，就是這個配置能夠根據當前行的其餘欄位的值返回按鈕行不一樣的 iconClass 。這樣豈不就就能夠解決問題了：

仍是貼一個完整的例子：

<!-- add by oscar999 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="../ext-all.js"></script>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css"/>
<style type="text/css">
.icon1{
	background-image: url("../resources/themes/images/access/grid/checked.gif"); 
	background-repeat: no-repeat;
}
.icon2{
	background-image: url("../resources/themes/images/access/grid/columns.gif"); 
	background-repeat: no-repeat;
}
</style>
<script>
Ext.onReady(function(){
	Ext.create('Ext.data.Store', {
	    storeId:'simpsonsStore',
	    fields:['name', 'email', 'phone'],
	    data:{'items':[
	        { 'name': 'Lisa',  "email":"lisa@simpsons.com",  "phone":"555-111-1224"  },
	        { 'name': 'Bart',  "email":"bart@simpsons.com",  "phone":"555-222-1234" },
	        { 'name': 'Homer', "email":"home@simpsons.com",  "phone":"555-222-1244"  },
	        { 'name': 'Marge', "email":"marge@simpsons.com", "phone":"555-222-1254"  }
	    ]},
	    proxy: {
	        type: 'memory',
	        reader: {
	            type: 'json',
	            root: 'items'
	        }
	    }
	});

	Ext.create('Ext.grid.Panel', {
	    title: 'Simpsons',
	    store: Ext.data.StoreManager.lookup('simpsonsStore'),
	    columns: [
	        { text: 'Name',  dataIndex: 'name' },
	        { text: 'Email', dataIndex: 'email', flex: 1 },
	        { text: 'Phone', dataIndex: 'phone' },
	        { text: 'Actions', xtype: 'actioncolumn',
              getClass: function(v, meta, rec) {
            	  if(rec.get("name")=="Lisa")
            	  {
            		  return 'icon1';
            	  }else{
            		  return 'icon2';
            	  }
              }
		    }	        	  
	    ],
	    height: 200,
	    width: 400,
	    renderTo: Ext.getBody()
	});
});
</script>

</head>
<body>

</body>
</html>

固然， handler 也能夠藉助相似的方式

      handler: function(grid, rowIndex, colIndex) {
                        var rec = grid.getStore().getAt(rowIndex),
       }

其餘

以上第一個例子是直接指定 icon 的位置，也能夠指定 iconCls 的值

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。