ExtJS4.2學習(14)基於表格的擴展插件（2）

時間  2020-01-19
標籤 extjs4.2 extjs 學習 基於 表格 擴展 插件 简体版
原文   原文鏈接

我曾經在第6節裏講到表格分頁，還記得以前的分頁組件是什麼樣的嗎？javascript

QQ截圖20131112003234.jpg

上面只有文字顯示，咱們來爲其製做的更美觀點，好吧，不賣關子了，講本節的內容：進度條分頁控件，這是表格擴展組件。css

首先咱們須要引入擴展組件纔可使用：html

//引入擴展組件 
Ext.Loader.setConfig({enabled: true}); 
                                                   
Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/'); 
                                                   
Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*', 
    'Ext.util.*', 
    'Ext.tip.QuickTipManager', 
    'Ext.ux.data.PagingMemoryProxy', 
    'Ext.ux.ProgressBarPager' 
]);

在表格的bbar中引入組件類：java

bbar: Ext.create('Ext.PagingToolbar', { 
            pageSize: 10, 
            store: store, 
            displayInfo: true, 
            plugins: new Ext.ux.ProgressBarPager() 
        })

OK，來看下效果怎麼樣app

04.jpg

嗯，看起來不錯、ide

可是上面的數據若是一頁顯示的條數過多的話，極可能致使性能問題，有些人說是extjs作的很差，好吧，下面給種方法讓你知道你本身錯了：性能

咱們只要爲store設置一個參數就能夠了。學習

buffered:true //緩衝式表格視圖

這原理其實就和3D遊戲裏的一種實現渲染的概念差很少，即表格裏顯示哪些數據，就把哪些數據顯示出來，這樣就不用去處理不是的那些DOM，從而提升了總體的效率。網站

分組表頭ui

藉助分組表頭（Grouping GridView）這個組件，咱們能夠實現內容更加複雜的表格組件，有時候咱們作報表可能會常常碰到，以下圖所示，

02.jpg

上面的效果是怎麼實現的呢？網上說是用擴展組件，我本身試了下，發現ExtJS4.2裏已經沒有這種方法了，我本身琢磨出來下面的方法，大家能夠試試：

//定義列 
    var columns = [ 
        { 
            text:'第一組', 
            locked: true, 
            columns:[ 
                     {header:'編號',dataIndex:'id',width:50}, 
                     {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' />"; 
                        } 
                     }}] 
        }, 
        {text:'第2組', 
            columns:[ 
                     {header:'編號',dataIndex:'id',width:50}, 
                     {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' />"; 
                        } 
                     }}] 
        } 
      ];

上面的方法主要是列裏嵌套列，這樣就能夠實現分組表頭的效果。若是想凍結列，那麼能夠在須要的分組表頭里加上locked: true

效果以下：

03.jpg

鎖定了第一組後，任憑你其餘組怎麼動，第一組就是不會變更。

下面貼上本節所學的全部代碼，方便你們學習調式：

<%@ 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.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"> 
//引入擴展組件 
Ext.Loader.setConfig({enabled: true}); 
            
Ext.Loader.setPath('Ext.ux', '../ExtJS4.2/ux/'); 
            
Ext.require([ 
    'Ext.data.*', 
    'Ext.grid.*', 
    'Ext.util.*', 
    'Ext.tip.QuickTipManager', 
    'Ext.ux.data.PagingMemoryProxy', 
    'Ext.ux.ProgressBarPager' 
]); 
//表格數據最起碼有列、數據、轉換原始數據這3項 
Ext.onReady(function(){ 
    //定義列 
    var columns = [ 
        { 
            text:'第一組', 
            locked: true, 
            columns:[ 
                     {header:'編號',dataIndex:'id',width:50}, 
                     {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' />"; 
                        } 
                     }}] 
        }, 
        {text:'第2組', 
            columns:[ 
                     {header:'編號',dataIndex:'id',width:50}, 
                     {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','禁用'], 
        ['6','小王','描述01','可用'], 
        ['7','李四','描述02','禁用'], 
        ['8','張三','描述03','可用'], 
        ['9','束洋洋','思考者日記網','可用'], 
        ['10','高飛','描述05','禁用'], 
        ['11','小王','描述01','可用'], 
        ['12','李四','描述02','禁用'], 
        ['13','張三','描述03','可用'], 
        ['14','束洋洋','思考者日記網','可用'], 
        ['15','高飛','描述05','禁用'], 
        ['16','小王','描述01','可用'], 
        ['17','李四','描述02','禁用'], 
        ['18','張三','描述03','可用'], 
        ['19','束洋洋','思考者日記網','可用'], 
        ['20','高飛','描述05','禁用'], 
        ['21','小王','描述01','可用'], 
        ['22','李四','描述02','禁用'], 
        ['23','張三','描述03','可用'], 
        ['24','束洋洋','思考者日記網','可用'], 
        ['25','高飛','描述05','禁用'] 
    ]; 
    //轉換原始數據爲EXT能夠顯示的數據 
    var store = new Ext.data.ArrayStore({ 
        data:data, 
        fields:[ 
           {name:'id'}, //mapping:0 這樣的能夠指定列顯示的位置，0表明第1列，能夠隨意設置列顯示的位置 
           {name:'name'}, 
           {name:'descn'}, 
           {name:'status'} 
        ], 
        //buffered:true //緩衝式表格視圖 
    }); 
    //加載數據 
    store.load(); 
            
    //建立表格 
    var grid = new Ext.grid.GridPanel({ 
        renderTo:'grid', //渲染位置 
        autoHeight:true, 
        width:665, 
        height: 350, 
        store:store, 
        frame:true, 
        columns:columns, //顯示列 
        stripeRows:true, //斑馬線效果 
        //enableColumnMove: false, //禁止拖放列 
        //enableColumnResize: false, //禁止改變列寬度 
        loadMask:true, //顯示遮罩和提示功能,即加載Loading…… 
        //forceFit:true //自動填滿表格 
        bbar: Ext.create('Ext.PagingToolbar', { 
            pageSize: 10, 
            store: store, 
            displayInfo: true, 
            plugins: new Ext.ux.ProgressBarPager() 
        }) 
    }); 
}); 
</script> 
</head> 
<body> 
<h1>個人ExtJS4.2學習之路</h1> 
<hr /> 
做者：束洋洋 
開始日期：2013年11月25日 22:28:49 
<h2>深刻淺出ExtJS之進度條分頁組件</h2> 
<div id="grid"></div> 
</body> 
</html>

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

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程