FCKeditor添加刪除功能.rar

另類技巧
修改Fckeditor圖片上傳功能：http://itxiaoqiang.iteye.com/blog/644756
導(dǎo)入word到Fckeditor：http://itxiaoqiang.iteye.com/blog/643684
支持中文圖片名稱方案：http://windywindy.iteye.com/blog/551458

這里注意下 Ext.Toolbar.Fill()
充滿組件把'導(dǎo)出Excel'頂?shù)阶钣疫?/p>

CSS：
<style type="text/css">
.add {
            background-image:url(../icons/add.gif) !important;
        }
        .delete {
            background-image:url(../icons/delete.gif) !important;
        }
        .save {
            background-image:url(../icons/save.gif) !important;
        }
        .block {
            background-image:url(../icons/block.gif) !important;
        }
        .refresh {
            background-image:url(../icons/refresh.gif) !important;
        }
        .in {
            background-image:url(../icons/in.gif) !important;
        }
        .out {
            background-image:url(../icons/out.gif) !important;
        }
</style>

首先，一個(gè)表格應(yīng)該有列定義，即定義表頭ColumnModel：
// 定義一個(gè)ColumnModel，表頭中有四列
var cm = new Ext.grid.ColumnModel([
     {header:'編號(hào)',dataIndex:'id'},
     {header:'性別',dataIndex:'sex'},
     {header:'名稱',dataIndex:'name'},
     {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;
    該ColumnModel定義了表格的四個(gè)列，其每列的名稱和對(duì)應(yīng)的數(shù)據(jù)鍵。請(qǐng)注意defaultSortable屬性，即為每個(gè)列都安上一個(gè)可以排序的功能。如果只想某些列舉有該功能，可以設(shè)置：
{header:'編號(hào)',dataIndex:'id',Sortable:true},

現(xiàn)在就來(lái)看看這個(gè)Ext.data.Store是如何轉(zhuǎn)換三種數(shù)據(jù)的。

1.二維數(shù)組：
// ArrayData
var data = [
     ['1','male','name1','descn1'],
     ['2','male','name1','descn2'],
     ['3','male','name3','descn3'],
     ['4','male','name4','descn4'],
     ['5','male','name5','descn5']
];
// ArrayReader
var ds = new Ext.data.Store({
     proxy: new Ext.data.MemoryProxy(data),
     reader: new Ext.data.ArrayReader({}, [
        {name: 'id',mapping: 0},
         {name: 'sex',mapping: 1},
         {name: 'name',mapping: 2},
         {name: 'descn',mapping: 3}
     ])
});
ds.load();
ds要對(duì)應(yīng)兩個(gè)部分：proxy和reader。proxy告訴我們從哪里獲得數(shù)據(jù)，reader告訴我們?nèi)绾谓馕鲞@個(gè)數(shù)據(jù)。
現(xiàn)在用的是Ext.data.MemoryProxy，它將內(nèi)存中的數(shù)據(jù)data作為參數(shù)傳遞。Ext.data.ArrayReader專門用來(lái)解析數(shù)組，并且告訴我們它會(huì)按照定義的規(guī)范進(jìn)行解析，每行按順序讀取四個(gè)數(shù)據(jù)，第一個(gè)叫id，第二個(gè)叫sex，第三個(gè)叫name，第四個(gè)descn。這些是跟cm定義中的dataIndex對(duì)應(yīng)的。這樣cm就知道哪列應(yīng)該顯示那條數(shù)據(jù)了。
mapping屬性用于標(biāo)記data中的讀取后的數(shù)據(jù)與標(biāo)頭的映射關(guān)系，一般是不用設(shè)置的。但如果我們想讓sex的數(shù)據(jù)中name欄中出現(xiàn)，可以設(shè)置mapping值。即id的mapping為2,后者為0。
記得要執(zhí)行一次ds.load()，對(duì)數(shù)據(jù)進(jìn)行初始化。

數(shù)據(jù)的顯示顯得非常簡(jiǎn)單：
HTML文件：
<div id='grid'></div>
JS文件：
var grid = new Ext.grid.GridPanel({
     el: 'grid',
     ds: ds,
     cm: cm
});
grid.render();

其顯示結(jié)果為：

2.如何在表格中添加CheckBox呢？

var sm = new Ext.grid.CheckboxSelectionModel();
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),//自動(dòng)行號(hào)
    sm,//添加的地方
    {header:'編號(hào)',dataIndex:'id'},
    {header:'性別',dataIndex:'sex'},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,//添加的地方
    title: 'HelloWorld'
});

3. 如何做Grid上觸發(fā)事件呢？
下面是一個(gè)cellclick事件
grid.addListener('cellclick', cellclick);
function cellclick(grid, rowIndex, columnIndex, e) {
    var record = grid.getStore().getAt(rowIndex);   //Get the Record
    var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
    var data = record.get(fieldName);
    Ext.MessageBox.alert('show','當(dāng)前選中的數(shù)據(jù)是'+data);
}

4.如何做Grid中做出快捷菜單效果：
grid.addListener('rowcontextmenu', rightClickFn);//右鍵菜單代碼關(guān)鍵部分
var rightClick = new Ext.menu.Menu({
    id:'rightClickCont', //在HTML文件中必須有個(gè)rightClickCont的DIV元素
    items: [
        {
            id: 'rMenu1',
            handler: rMenu1Fn,//點(diǎn)擊后觸發(fā)的事件
            text: '右鍵菜單1'
        },
        {
            //id: 'rMenu2',
            //handler: rMenu2Fn,
            text: '右鍵菜單2'
        }
    ]
});
function rightClickFn(grid,rowindex,e){
    e.preventDefault();
    rightClick.showAt(e.getXY());
}
function rMenu1Fn(){
   Ext.MessageBox.alert('right','rightClick');
}
其Grid如下：

5.如何將一列中的數(shù)據(jù)根據(jù)要求進(jìn)行改變呢？
比如說(shuō)性別字段根據(jù)其male或female改變顯示的顏色，這種ColumnMode中設(shè)計(jì)：
var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'編號(hào)',dataIndex:'id'},
    {header:'性別',dataIndex:'sex',renderer:changeSex},
    {header:'名稱',dataIndex:'name'},
    {header:'描述',dataIndex:'descn'}
]);
cm.defaultSortable = true;

function changeSex(value){
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>紅男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>綠女</span>";
    }
}

其它兩種數(shù)據(jù)的Grid顯示是相同的，其不同之處在于數(shù)據(jù)獲取的過(guò)程：

6.Json數(shù)據(jù)
至于這種數(shù)據(jù)的類型請(qǐng)大家自己看Ajax的書(shū)籍：
//JsonData
var data = {
    'coders': [
        { 'id': '1', 'sex': 'male', 'name':'McLaughlin', 'descn': 'brett@newInstance.com' },
        { 'id': '2', 'sex': 'male','name':'Hunter', 'descn': 'jason@servlets.com' },
        { 'id': '3', 'sex': 'female','name':'Harold', 'descn': 'elharo@macfaq.com' },
        { 'id': '4', 'sex': 'male','name':'Harolds', 'descn': 'elhaross@macfaq.com' }
    ],
    'musicians': [
        { 'id': '1', 'name': 'Clapton', 'descn': 'guitar' },
        { 'id': '2', 'name': 'Rachmaninoff', 'descn': 'piano' }
    ]
}
//ds使用的MemoryProxy對(duì)象和JsonReader對(duì)象
var ds = new Ext.data.Store({
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.JsonReader({root: 'coders'}, [
            {name: 'id'},
            {name: 'sex'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
ds.load();

var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    autoHeight: true//一定要寫，否則顯示的數(shù)據(jù)會(huì)少一行
});
grid.render();

7.使用XML數(shù)據(jù)：
注意，讀取XML數(shù)據(jù)必須在服務(wù)器上進(jìn)行。
XML數(shù)據(jù)test.xml的內(nèi)容：
<?xml version="1.0" encoding="UTF-8"?>
<dataset>
     <results>2</results>
     <item>
           <id>1</id>
           <sex>male</sex>
           <name>Taylor</name>
           <descn>Coder</descn>
     </item>
</dataset>var ds3 = new Ext.data.Store({
    url: 'test.xml',   //XML數(shù)據(jù)
    reader: new Ext.data.XmlReader({record: 'item'}, [ //使用XmlReader對(duì)象
        {name: 'id'},
        {name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});

8.從服務(wù)器獲取數(shù)據(jù)和數(shù)據(jù)翻頁(yè)控件
從一個(gè)服務(wù)器文件，如ASP、JSP或Servlet中獲得數(shù)據(jù)二維Array、JSON或XML數(shù)據(jù)，也可以被Ext讀取，并被Grid顯示：
服務(wù)器文件data.asp:
<%
    start = cint(request("start"))
    limit = cint(request("limit"))

    dim json
    json=cstr("{totalProperty:100,root:[")
   
    for i = start to limit + start-1
        json =json + cstr("{'id':'") +cstr(i) + cstr("','name':'name") + cstr(i) + cstr("','descn':'descn") + cstr(i) + cstr("'}")
        if i <> limit + start - 1 then
            json =json + ","
        end if
    next
    json = json +"]}"
    response.write(json)
%>

我們可以看到，這個(gè)頁(yè)面會(huì)根據(jù)傳入的start和limit的不同，返回不同的數(shù)據(jù)，其實(shí)質(zhì)是個(gè)分頁(yè)的代碼。下面是start=0,limit=10的JSON數(shù)據(jù)：
{totalProperty:100,root:[{'id':'0','name':'name0','descn':'descn0'},{'id':'1','name':'name1','descn':'descn1'},{'id':'2','name':'name2','descn':'descn2'},{'id':'3','name':'name3','descn':'descn3'},{'id':'4','name':'name4','descn':'descn4'},{'id':'5','name':'name5','descn':'descn5'},{'id':'6','name':'name6','descn':'descn6'},{'id':'7','name':'name7','descn':'descn7'},{'id':'8','name':'name8','descn':'descn8'},{'id':'9','name':'name9','descn':'descn9'}]}

我們使用分頁(yè)控件來(lái)控制Grid的數(shù)據(jù)：
Ext.onReady(function(){
    var sm = new Ext.grid.CheckboxSelectionModel();
   
    var cm = new Ext.grid.ColumnModel([
        new Ext.grid.RowNumberer(),
        sm,
        {header:'編號(hào)',dataIndex:'id'},
        {header:'性別',dataIndex:'sex'},
        {header:'名稱',dataIndex:'name'},
        {header:'描述',dataIndex:'descn'}
    ]);
    cm.defaultSortable = true;

    var ds = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'data.asp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    });
    ds.load({params:{start:0,limit:10}});
   
    var grid = new Ext.grid.GridPanel({
        el: 'grid3',
        ds: ds,
        cm: cm,
        sm: sm,
        title: 'ASP->JSON',
        bbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
            emptyMsg: "沒(méi)有記錄"
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: 10,
            store: ds,
            displayInfo: true,
            displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
            emptyMsg: "沒(méi)有記錄"
        })
    });
    grid.render();
})

10.如何在Grid的上方添加按鈕呢？
添加按鈕的關(guān)鍵之處在于tbar或bbar屬性設(shè)置Toolbar工具條：
var grid = new Ext.grid.GridPanel({
    el: 'grid3',
    ds: ds,
    cm: cm,
    sm: sm,
    title: 'HelloWorld',
    tbar: new Ext.Toolbar({
        items:[
                {
                    id:'buttonA'
                    ,text:"Button A"
                    ,handler: function(){ alert("You clicked Button A"); }
                }
                ,
                new Ext.Toolbar.SplitButton({})
                ,{
                    id:'buttonB'
                    ,text:"Button B"
                    ,handler: function(){ alert("You clicked Button B"); }
                }
                ,
                '-'
                ,{
                    id:'buttonc'
                    ,text:"Button c"
                }
            ]
        })
});

11.將GridPanel放入一個(gè)Panel或TabPanel中
var tabs = new Ext.TabPanel({
    collapsible: true
    ,renderTo: 'product-exceptions'
    ,width: 450
    ,height:400
    ,activeTab: 0
    ,items:[
        {
            title: 'Unmatched'
        },{
            title: 'Matched'
        }
    ]
});
tabs.doLayout();

var panel = new Ext.Panel({
    renderTo: 'panel',
    title:'panel',
    collapsible:true,
    width:450,
    height:400,
    items:[grid] //管理grid
});

Panel必須有DIV存在。其包含的Component有items管理。