自己写的EXTJS 增强控件TableGrid

最新推荐文章于 2016-03-21 22:23:00 发布

lijun7788

最新推荐文章于 2016-03-21 22:23:00 发布

阅读量1.5k

点赞数 2

分类专栏： JavaScript 文章标签： extjs stylesheet function table asp.net server

本文链接：https://blog.csdn.net/Lijun7788/article/details/6611636

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

自己写的一个EXTJS增强控件，实现将普通的Table或ASP.NET的GridView控件转换为EXTJS的GridPanel功能.

Ext.TableGrid.js文件内容

/ *

程序:李君 hahaman

QQ:lj7788@126.com

功能:

1.普通Table转换为ExtJS 的GridPanel

表格式

<thead>

...

</thead>

<tbody>

<tr>

....

</tr>

....

</tbody>

</table>

Ext.onReady(function() {

var grid = new Ext.grid.TableGrid("the-table",{remove:false});

});

2.完成ASP.NET的GridView控件转化为ExtJS 的GridPanel功能

使用方法:

Ext.onReady(function() {

var grid = new Ext.grid.TableGrid("GridView1",{remove:false,netGrid:true});

});

"GridView1":ASP.NET GridView控件的名称

netGrid:true .NET必须

* /

Ext.grid.TableGrid = function(table,config){

config = config || {};

var cf = config.fields || [], ch = config.columns || [];

table = Ext.get(table);

var ct = table.insertSibling();

var fields = [], cols = [];

var headers = table.query("th");

for (var i = 0, h; h = headers[i]; i++) {

var text = h.innerHTML;

var name = 'tcol-'+i;

fields.push(Ext.applyIf(cf[i] || {}, {

name: name,

mapping: 'td:nth('+(i+1)+')/@innerHTML'

}));

cols.push(Ext.applyIf(ch[i] || {}, {

'header': text,

'dataIndex': name,

'width': h.offsetWidth,

'tooltip': h.title,

'sortable': true

}));

}

var ds = new Ext.data.Store({

reader: new Ext.data.XmlReader({

record:'tbody tr'

}, fields)

});

ds.loadData(table.dom);

var cm = new Ext.grid.ColumnModel(cols);

if(config.width || config.height){

ct.setSize(config.width || 'auto', config.height || 'auto');

}

if(config.remove !== false){

table.remove();

}

var width,height;

height=table.dom.offsetHeight+25;

width=table.dom.offsetWidth+23;

var div="<div id='"+table+"'></div>";//创建一个新的层用于显示GridPanel

var el=Ext.getBody().createChild({tag:'div',id:table.id});

table.replace(el);

if(config.netGrid){

ds.data.removeAt(0);

}

var g=new Ext.grid.GridPanel({

store:ds,

cm:cm,

renderTo:table.id,

sm: new Ext.grid.RowSelectionModel(),

height:height,

width:width

});

};

测试一： Default.aspx

<%@ Page Language="C#" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<html>
<head id="Head1" runat="server">
<title>无标题页</title>
<link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />

测试二:default2.aspx 数据使用SQL2000 Pubs库 JObs表

<%@ Page Language="C#" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <link href="resources/css/ext-all.css" rel="stylesheet" type="text/css" />
    <link href="resources/css/xtheme-gray.css" rel="stylesheet" type="text/css" />
     <script type="text/javascript" src="js/ext-base.js"></script>
     <script type="text/javascript" src="js/ext-all-debug.js"></script>
     <script src="js/Ext.TableGrid.js">
     <script src="js/ext-lang-zh_CN.js"></script>
    <script>
        Ext.onReady(function() {
         var grid = new Ext.grid.TableGrid("GridView1",{remove:false,netGrid:true});
        });
     function changeSkin(sel){
        var skin=sel.options[sel.selectedIndex].value;
        if(skin.length==0)
            document.styleSheets[1].href='';
        else
            document.styleSheets[1].href='resources/css/'+skin;
      }
     </script>
</head>
<body>
    <form id="form1" runat="server">
    <asp:GridView ID="GridView1" runat="server" Width="500">
        </asp:GridView>

     <div style="position:absolute;top:0px;right:0%">皮肤:
        <select οnchange="changeSkin(this);">
            <option value='xtheme-visita.css'>默认</option>
            <option value='xtheme-gray.css'>gray</option>
            <option value='xtheme-black.css'>black</option>
            <option value='xtheme-darkgray.css'>darkgray</option>
            <option value='xtheme-galdaka.css'>galdaka</option>
            <option value='xtheme-olive.css'>olive</option>
            <option value='xtheme-purple.css'>purple</option>
            <option value='xtheme-slate.css'>slate</option>
            <option value='xtheme-slickness.css'>slickness</option>
        </select>
        </div>


    </form>
</body>
</html>