獲取extjs text列修改過 數據

ExtJS中表格的特性簡介

表格由類Ext.grid.GridPanel定義，繼承自Ext.Panel，xtype爲grid 表格的列信息由Ext.grid.ColumnModel定義 表格的數據存儲器由Ext.data.Store定義，根據解析數據的不一樣，數據存儲器可具體分爲以下幾種：

JsonStore，SimpleStore，GroupingStore…

一個表格的基本編寫過程：

一、建立表格列模型

var cm = new Ext.grid.ColumnModel({
	{header: '角色', dataIndex: 'role'},
	{header: '等級', dataIndex: 'grade'},
	{header: '建立日期', dataIndex: 'createDate', type: 'date', renderer: Ext.util.Format.dateRenderer('Y年m月d日')}  //建立日期類型的數據
});

二、建立數據數組

var data = [
    ['士兵','7','2011-07-2412:34:56'],
    ['將軍','10','2011-07-2412:34:56'],
];

三、建立一個數據存儲對象store，包含兩部分：proxy，獲取數據的方式；reader，解析數據的方式 ArrayReader的mapping用來設置列的排列順序

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'role', mapping: 1},
        {name: 'grade', mapping: 0}
        {name: 'createDate', mapping: 2, type:'date', dateFormat:'Y-m-dH:i:s'}  //建立日期列和顯示格式
    ])
});
store.load();

四、建立GridPanel，裝配ColumnModel和store

var grid = new Ext.grid.GridPanel({
	renderTo: 'grid',
	store: store,
	cm: cm
});

另外獲取遠程數據可使用ScriptTagProxy,以下所示

var store = new Ext.data.Store({
    proxy: new Ext.data.ScriptTagProxy({
    	url:'http://...'}),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'role', mapping: 1},
        {name: 'grade', mapping: 0}
    ]),
    sortInfo: {field: "role", direction: "ASC"}  //設置默認排序列，ASC/DESC
});

表格的經常使用屬性功能

var grid = new Ext.grid.GridPanel({
	enableColumnMove: false, //禁止拖放列
	enableColumnResize: false,  //禁止改變列的寬度
	stripeRows: true,  //斑馬線效果
	loadMask: true,  //讀取數據時的遮罩和提示功能
	renderTo: 'grid',
	store: store
	cm: cm
});

var cm = new Ext.grid.ColumnModel({
	{header: '角色', dataIndex: 'role', width:90, sortable: true},  //width設置列寬度，默認爲100px，sortable設置排序功能
	{id:'grade', header: '等級', dataIndex: 'grade', width:40}
});
var grid = new Ext.grid.GridPanel({
	renderTo: 'grid',
	store: store,
	cm: cm
	viewConfig:{   //讓每列自動填充滿表格
		forceFit: true
	}
	autoExpandColumn: 'grade'  //自動延伸列，列的id在ColumnModel中定義
});

渲染表格，爲表格設置特殊樣式

只須要在cm裏面增長一個renderer屬性，添加一個自定義函數來渲染傳進來（由EXT自動傳遞）的參數的樣式便可，即在返回value以前拼裝上相應的HTML和CSS或者JS響應事件。

function renderSex(value) {
    if (value == 'male') {
        return "<span style='color:blue;'>男</span><img src='images/icon_male.png' />";
    } else {
        return "<span style='color:red;'>女</span><img src='images/icon_female.png' />";
    }
}

var cm = new Ext.grid.ColumnModel([
    {header:'id',dataIndex:'id'},
    {header:'name',dataIndex:'name'},
    {header:'sex',dataIndex:'sex',renderer:renderSex},
]);

var data = [
    ['1','Jason','male'],
    ['2','Kate','female']
];

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'},
        {name: 'sex'}
    ])
});
store.load();

var grid = new Ext.grid.GridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm
});

自動顯示行號，只要在建立cm時建立一個RowNumberer就能夠了

var cm = new Ext.grid.ColumnModel([
	new Ext.grid.RowNumberer(),   //顯示行號
    {header:'id',dataIndex:'id'},
    {header:'name',dataIndex:'name'},
    {header:'sex',dataIndex:'sex',renderer:renderSex},
]);

刪除列

store.remove(store.getAt(i));

刷新表格

grid.view.refresh();

爲表格添加複選框

須要使用CheckboxSelectionModel SelectionModel sm在使用時要放到cm和表格中

var sm = new Ext.grid.CheckboxSelectionModel();

var cm = new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(),
    sm,
    {header:'編號',dataIndex:'id'},
    {header:'名稱',dataIndex:'name'}
]);

var data = [
    ['1','name1'],
    ['2','name2']
];

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'}
    ])

});
store.load();

var grid = new Ext.grid.GridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm,
    sm: sm
});

經過RowSelectionModel設置只選擇一行

var grid = new Ext.grid.GridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm,
    sm: new Ext.grid.RowSelectionModel({singleSelect:true})
});

使用選擇模型獲取數據

grid.on('click', function() {
    var selections = grid.getSelectionModel().getSelections();
    for (var i = 0; i < selections.length; i++) {
        var record = selections[i];
        Ext.Msg.alert(record.get("id"));
    }
});

表格視圖

從MVC的思想來看錶格控件： * Ext.data.Store可看作模型 * Ext.grid.GridPanel可看作控制器 * Ext.grid.GridView可看作視圖 * 通常GridView由GridPanell自動生成，若是想設置GridView的屬性時，能夠經過Ext.grid.GridPanel的getView()得到視圖實例

Ext.get('button1').on('click', function() {
	grid.getView().scrollToTop();
    grid.getView().focusCell(0, 0);
    var cell  = grid.getView().getCell(0, 0);
    cell.style.backgroundColor = 'red';
});

使用GridPanel的viewConfig在建立表格時設置GridView的初始化參數

var grid = new Ext.grid.GridPanel({
    height: 100,
    width: 400,
    renderTo: 'grid',
    store: new Ext.data.Store({
        autoLoad: true,
        proxy: new Ext.data.MemoryProxy(data),
        reader: new Ext.data.ArrayReader({}, meta)
    }),
    columns: meta,
    viewConfig: {
        columnsText: '顯示的列',  //設置下拉菜單提示文字
        scrollOffset: 30,    //設置右側滾動條的預留寬度
        sortAscText: '升序',    //設置下拉菜單提示文字
        sortDescText: '降序',   //設置下拉菜單提示文字
        forceFit: true   //自動延展每列的長度
    }
});

爲表格添加分頁工具條

* 可使用GridPanel的bbar屬性，並建立Ext.PagingToolbar分頁工具條對象 * 注意，若是配置了分頁工具條，store.load()就必須在構造表格之後執行。

var grid = new Ext.grid.GridPanel({
    renderTo: 'grid',
    autoHeight: true,
    store: store,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,    //每頁顯示10條數據
        store: store,
        displayInfo: true,   //顯示數據信息
        displayMsg: '顯示第 {0} 條到 {1} 條記錄，一共 {2} 條',
        emptyMsg: "沒有記錄"   //沒有數據時顯示的信息
    })
});
store.load();

從後臺腳本獲取分頁數據 使用HttpProxy傳遞請求，獲取服務器的JSON數據，交給JsonReader解析

var cm = new Ext.grid.ColumnModel([
    {header:'編號',dataIndex:'id'},
    {header:'名稱',dataIndex:'name'}
]);
var store = new Ext.data.Store({
    proxy: new Ext.data.HttpProxy({url:'page.jsp'}),
    reader: new Ext.data.JsonReader({
        totalProperty: 'totalProperty',
        root: 'root'
    }, [
        {name: 'id'},
        {name: 'name'}
    ])
});
var grid = new Ext.grid.GridPanel({
    renderTo: 'grid',
    autoHeight: true,   //數據傳回來以前高度未知，因此要使用自適應高度
    store: store,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: store,
        displayInfo: true,
        displayMsg: '顯示第 {0} 條到 {1} 條記錄 / 共 {2} 條',
        emptyMsg: "沒有記錄"
    })
});
store.load({params:{start:0,limit:10}});

若是想讓分頁工具條顯示在表格的頂部，可使用GridPanel的tbar屬性設置添加工具條 讓ExtJS在對返回的數據進行分頁 * 須要在頁面中引入examples/locale目錄下的PagingMemoryProxy.js文件 * 再使用PagingMemoryProxy設置代理

var store = new Ext.data.Store({
    proxy: new Ext.data.PagingMemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'},
        {name: 'descn'}
    ])
});
//在建立GridPanel以後調用
store.load({params:{start:0,limit:3}});

可編輯表格控件EditorGrid的使用

製做一個簡單的EditorGrid的步驟 一、定義列ColumnModel，在裏面添加editor屬性

var cm = new Ext.grid.ColumnModel([{
    header: '編號',
    dataIndex: 'id',
    editor: new Ext.grid.GridEditor(
        new Ext.form.TextField({
            allowBlank: false  //不容許在TextField中輸入空值
        })
    )
}, {
    header: '名稱',
    dataIndex: 'name',
    editor: new Ext.grid.GridEditor(
        new Ext.form.TextField({
            allowBlank: false
        })
    )
}]);

二、準備一個數組

var data = [
    ['1','Jason'],
    ['2','Jay']
];

三、建立Ext.data.Store，設置內存代理，設置ArrayReader解析數組

var store = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
        {name: 'name'}
    ])
});

四、加載數據，建立EditorGridPanel

store.load();
var grid = new Ext.grid.EditorGridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm
});

爲可編輯表格添加和刪除數據 一、使用Record的create方法建立一個記錄集MyRecord,MyRecord至關於一個類

var MyRecord = Ext.data.Record.create([
    {name: 'id', type: 'string'},
    {name: 'name', type: 'string'}
]);
store.load();

二、建立EditorGridPanel面板，在屬性tbar中建立Ext.Toolbar

var grid = new Ext.grid.EditorGridPanel({
    autoHeight: true,
    renderTo: 'grid',
    store: store,
    cm: cm,
    tbar: new Ext.Toolbar(['-', {  //-表示菜單分隔符
        text: '添加一行',
        handler: function(){
            var p = new MyRecord({
                id:'',
                name:''
            });
            grid.stopEditing();  //關閉表格的編輯狀態
            store.insert(0, p);  //建立的Record插入store的第一行
            grid.startEditing(0, 0);  //激活第一行第一列的編輯狀態
        }
    }, '-', {
        text: '刪除一行',
        handler: function(){
            Ext.Msg.confirm('信息', '肯定要刪除？', function(btn){
                if (btn == 'yes') {
                    var sm = grid.getSelectionModel();  //獲取表格的選擇模型
                    var cell = sm.getSelectedCell();   //獲取選中的單元格
                    var record = store.getAt(cell[0]);  //經過行號獲得store這一行對應的Record
                    store.remove(record);   //移除數據
                }
            });
        }
    }, '-'])
});

爲可編輯表格保存修改的結果 在上面例子的基礎之上，添加一個保存按鈕

text: '保存',
handler: function(){
    var m = store.modified.slice(0); //得到store中修改過得數據
    for (var i = 0; i < m.length; i++) {  //驗證表格信息是否正確，是否包含空格
        var record = m[i];
        var fields = record.fields.keys;

        for (var j = 0; j < fields.length; j++) {
            var name = fields[j];
            var value = record.data[name];

            var colIndex = cm.findColumnIndex(name);
            var rowIndex = store.indexOfId(record.id);
            var editor = cm.getCellEditor(colIndex).field;

            if (!editor.validateValue(value)) {
                Ext.Msg.alert('提示', '請檢查輸入的數據是否正確！', function(){
                    grid.startEditing(rowIndex, colIndex);
                });
                return;
            }
        }
    }
    var jsonArray = [];
    Ext.each(m, function(item) {
        jsonArray.push(item.data);  //把修改過得數據放到jsonArray中
    });

    Ext.lib.Ajax.request(   //使用Ajax請求提交給後臺
        'POST',
        'save_data.jsp',
        {success: function(response){  //返回成功
            Ext.Msg.alert('信息', response.responseText, function(){
                store.reload();
            });
        },failure: function(){   //返回失敗
            Ext.Msg.alert("錯誤", "服務器保存數據出錯！");
        }},
        'data=' + encodeURIComponent(Ext.encode(jsonArray))
    );
}

另外store能夠設置屬性pruneModifiedRecords: true。這樣，每次remove或load操做時store會自動清除modified標記，能夠避免出現下次提交時還會把上次那些modified信息都帶上的現象。

限制表格輸入的數據類型 NumberField

{
    header:'ID',
    dataIndex:'id',
    editor:new Ext.grid.GridEditor(new Ext.form.NumberField({  //NumberField限制只能輸入數字
        allowBlank: false,
        allowNegative: false,  //不能輸入減號
        maxValue: 10
    }))
}

ComboBox

var comboData = [
    ['0','Java'],
    ['1','Android']
];
{
    header:'ComboBox',
    dataIndex:'combo',
    editor:new Ext.grid.GridEditor(new Ext.form.ComboBox({
        store: new Ext.data.SimpleStore({
            fields:['value','text'],
            data: comboData
        }),
        emptyText: '請選擇',
        mode: 'local',
        triggerAction: 'all',
        valueField: 'value',
        displayField: 'text',
        readOnly:true
    })),
    renderer: function(value){
        return comboData[value][1];
    }
}

DateField

{
    header:'Date',
    dataIndex:'date',
    editor:new Ext.grid.GridEditor(new Ext.form.DateField({
        format: 'Y-m-d',
        minValue: '2011-07-24',
        disabledDays: [0, 6],
        disabledDaysText: '選擇週一到週六之間的日期'
    })),
    renderer: function(value) {
        return value.format("Y-m-d");
    }
}

屬性表格控件PropertyGrid的使用

是在EditorGrid的基礎上開發的更智能的高級表格組件

var grid = new Ext.grid.PropertyGrid({
    title: '屬性表格控件PropertyGrid',
    autoHeight: true,
    width: 400,
    renderTo: 'grid',
    viewConfig: {
        forceFit: true
    },
    source: {
        "String": "String",
        "Date": new Date(Date.parse('07/24/2011')),
        "boolean": false,
        "float": .01
    }
});

禁用PropertyGrid編輯功能的方法

grid.on('beforeedit', function(e){
	e.cancel = true;
	return false;
});

根據表格的name獲取value

grid.store.getById('Jason').get(value);