ExtJS4.2學習(五)表格渲染與複選框

時間 2020-01-19

標籤 extjs4.2 extjs 學習表格渲染複選框简体版

原文原文鏈接

前幾章作的例子，你有沒有發現太單調啦？呵呵，相信聰明的你必定知道，光顯示文字，那這功能太弱爆了吧，如今咱們來看下ExtJs給咱們帶來的表格渲染和複選框等功能。

有的人問我了，爲何大家的默認表格樣式和我作的效果圖不同呢，呵呵，那是由於我引入了ExtJS4.2的其餘樣式，並不是默認的樣式，換樣式很簡單，只須要更改Link引入的文件就能夠很輕鬆的換各類樣式，哇~是否是很給力啊，你敢信？
好了，不扯遠了，下面看這章要作的效果圖：

怎麼樣，是否是很豐富？
先來講文字的顏色怎麼變吧，詳細你學過HTML+CSS必定知道怎麼變，同理，在EXTJS裏只須要用到renderer便可輕鬆作成HTML的效果，看下面的代碼：javascript

{header:'狀態',dataIndex:'status',width:80,renderer:function(value){ 
            if(value=='可用'){ 
                return "<span style='color:green;font-weight:bold';>可用</span><img src='p_w_picpaths/right.gif' />"; 
            } else { 
                return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/wrong.gif' />"; 
            } 
        }}

只須要在columns定義的時候將列的返回值更改成HTML便可。
名稱列的顏色值變色也是一樣的方法，這裏爲了方便，我就自定義了一個方法，在renderer裏引入便可，以下代碼：css

//改變列顏色自定義renderner方法 
function renderMotif(data, cell, record, rowIndex, columnIndex, store){ 
    var value = record.get('name'); 
    cell.style="background-color:"+value; 
    return data; 
}

列中引用：html

{header:'名稱',dataIndex:'name',width:80, renderer:renderMotif},

那上面的查詢詳細信息是什麼呢？看下圖：

彈出這個單元格里的詳細信息，主要代碼以下：java

//自定義renderner方法 
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store){ 
    var str="<input type='button' value='查詢詳細信息'  
        "這個單元格的值是："+value +"n"+ 
        "這個單元格的配置是:{cellId:"+cellmeta.cellId+",id:"+cellmeta.id+",css:"+cellmeta.css+"}n"+ 
        "這個單元格對應行的record是："+record +",一行的數據都在裏面n"+ 
        "這是第"+rowIndex+"行n"+ 
        "這是第"+columnIndex +"列n"+ 
        "這個表格對應的Ext.data.Store在這裏:"+ store +",隨便用吧。"+"")' />"; 
    return str; 
}

列定義：app

{header:'描述',dataIndex:'descn',width:112,renderer:renderDescn}

咱們能夠在渲染函數裏獲得多個參數，以下所示：
value：將要顯示到單元格里的值；
cellmeta：單元格的相關屬性，主要有id和CSS；
record：這行的數據對象，若是須要獲取其餘列的值，能夠經過record.data["id"]的方式獲得，這個屬性很重要，咱們常常會用到；
rowIndex：行號，這裏的行號指的是當前頁中全部記錄的順序；
columnIndex：當前列的列號；
store：構造表格時傳遞的ds。表格裏的全部數據均可以經過store得到。

自動顯示行號和複選框都是renderer的延伸。先來講自動顯示行號，在列模型columns中加入RowNumber對象便可，以下代碼：ide

new Ext.grid.RowNumberer(), //自動顯示行號

一樣，複選框仍是要修改columns模型加入SelectionModel對象：函數

//加入複選框組件，{checkOnly:true}會解決在操做中不慎選中了某一行就會變成選中一行的狀況，只容許用戶經過複選框執行選中 
    var sm = new Ext.selection.CheckboxModel({checkOnly:true}); 
    //建立表格 
    var grid = new Ext.grid.GridPanel({ 
        renderTo:'grid', //渲染位置 
        width:550, 
        height:250, 
        selModel:sm, 
        store:store, //轉換後的數據 
        columns:columns, //顯示列 
        stripeRows:true, //斑馬線效果 
        //enableColumnMove: false, //禁止拖放列 
        //enableColumnResize: false, //禁止改變列寬度 
        loadMask:true //顯示遮罩和提示功能,即加載Loading…… 
        //forceFit:true //自動填滿表格 
    });

注：{checkOnly:true}會解決在操做中不慎選中了某一行就會變成選中一行的狀況，只容許用戶經過複選框執行選中。
下面給出完整示例代碼，代碼中還說到了Ext.grid.GridView，你們注意看下。學習

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<!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>Hello Extjs4.2</title> 
<link href="../ExtJS4.2/resources/css/ext-all-neptune.css" rel="stylesheet"> 
<script src="../ExtJS4.2/ext-all.js"></script> 
<script src="../ExtJS4.2/locale/ext-lang-zh_CN.js"></script> 
<script type="text/javascript"> 
//表格數據最起碼有列、數據、轉換原始數據這3項 
Ext.onReady(function(){ 
    //定義列 
    var columns = [ 
        {header:'編號',dataIndex:'id',width:50}, //sortable:true 可設置是否爲該列進行排序 
        {header:'名稱',dataIndex:'name',width:80}, 
        {header:'描述',dataIndex:'descn',width:112}, 
        {header:'狀態',dataIndex:'status',width:80,renderer:function(value){ 
            if(value=='可用'){ 
                return "<span style='color:green;font-weight:bold';>可用</span><img src='p_w_picpaths/right.gif' />"; 
            } else { 
                return "<span style='color:red;font-weight:bold';>禁用</span><img src='p_w_picpaths/wrong.gif' />"; 
            } 
        }} 
      ]; 
    //定義數據 
    var data =[ 
        ['1','小王','描述01','可用'], 
        ['2','李四','描述02','禁用'], 
        ['3','張三','描述03','可用'], 
        ['4','束洋洋','思考者日記網','可用'], 
        ['5','高飛','描述05','禁用'] 
    ]; 
    //轉換原始數據爲EXT能夠顯示的數據 
    var store = new Ext.data.ArrayStore({ 
        data:data, 
        fields:[ 
           {name:'id'}, //mapping:0 這樣的能夠指定列顯示的位置，0表明第1列，能夠隨意設置列顯示的位置 
           {name:'name'}, 
           {name:'descn'}, 
           {name:'status'} 
        ] 
    }); 
    //加載數據 
    store.load(); 
    //表格控件默認使用RowModel，按住shift或者ctrl鍵單擊鼠標就能夠選擇多行，若是但願只選擇一行，可使用singleSelect:true 
    //我發現我在寫的時候，不用的狀況下，我試了發現默認就是不可多選的 
    //var sm = new Ext.grid.RowModel({singleSelect:true}); 
    //建立表格 
    var grid = new Ext.grid.GridPanel({ 
        renderTo:'grid', //渲染位置 
        width:450, 
        height:150, 
        //selModel:sm, 
        store:store, //轉換後的數據 
        columns:columns, //顯示列 
        stripeRows:true, //斑馬線效果 
        //enableColumnMove: false, //禁止拖放列 
        //enableColumnResize: false, //禁止改變列寬度 
        loadMask:true, //顯示遮罩和提示功能,即加載Loading…… 
        //forceFit:true //自動填滿表格 
        viewConfig:{ 
            columnsText:'顯示的列', 
            scrollOffset:30, //表格右側爲滾動條預留的寬度,默認爲20 
            sortAscText:'正序', 
            sortDescText:'倒序', 
            forceFit:true //表格會自動延展每列的長度，使內容填滿整個表格 
        } 
    }); 
}); 
</script> 
</head> 
<body> 
<h1>個人ExtJS4.2學習之路</h1> 
<hr /> 
做者：束洋洋 
開始日期：2013年11月10日 22:34:26 
<h2>深刻淺出ExtJS之表格視圖--Ext.grid.GridView</h2> 
<div id="grid"></div> 
</body> 
</html>

連載中，請你們持續關注，本文出自個人我的網站思考者日記網網站

相關標籤/搜索

每日一句

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