電網

網格面板的Ext JS的中心之一。這是一個令人難以置信的通用組件，提供了一種簡單的方式來顯示，排序，分組和編輯數據。

基本的網格面板

讓我們開始創建一個基本的網格面板。這裏有所有你需要知道得到一個簡單的Grid並運行：

模型和存儲

一個網格面板簡直就是一個組件，它顯示包含在一個數據存儲。一個商店可以被認爲是作爲一個記錄的集合，或模型的實例。對於更多的信息存儲和型號小號的數據手冊。這種設置的好處是清晰的關注分離。網格面板中顯示的數據，而只關心存儲需要保健的獲取和保存數據，利用其代理。

首先，我們需要定義一個模型。一個模型僅僅是一個領域，它代表一個數據類型的集合。讓我們來定義一個模型，它代表一個“用戶”：

分機定義（“用戶” ， { 
    延長：的 “Ext.data.Model' ，
    字段： [  '名稱' ， '電子郵件' ， '電話'  ] 
}）;

接下來，讓我們創建一個商店，包含多個用戶的情況下。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: '[email protected]', phone: '555-111-1224' },
        { name: 'Bart', email: '[email protected]', phone: '555-222-1234' },
        { name: 'Homer', email: '[email protected]', phone: '555-222-1244' },
        { name: 'Marge', email: '[email protected]', phone: '555-222-1254' }
    ]
});

爲了方便起見，我們配置的存儲，其數據加載內嵌。在現實世界中的應用，你通常會配置使用代理從服務器加載數據的商店。查看數據手冊上使用更多的代理。

網格面板

現在我們有一個模型，它定義了我們的數據結構，我們已經載入到一個模型實例存儲，我們已經準備好使用網格面板顯示的數據：

     用戶，
    列： [ 
        { 
            文字： '名稱' ，
            寬度： 100 ，
            排序： 虛假，
            hideable的： 虛假，
            dataIndex ： '名稱' 
        }，
        { 
            文本： “電子郵件地址” ，
            寬度： 150 ，
            dataIndex ： “電子郵件” ，
            隱藏： 真
        }，
        { 
            文字： '電話號碼' ，
            柔性： 1 ，
            dataIndex ： '電話' 
        } 
    ] 
}）;

而這一切就這麼簡單。我們剛剛創建了一個網格面板，呈現自己的身體元素，並告訴我們從它的數據，我們前面創建的userStore 商店。最後，我們定義網格面板中，將有哪些列，我們用的dataIndex屬性配置在該領域的用戶 模型，每列將得到的數據，從。有一個固定的寬度100px的“ 名稱 “ 列和排序和隱藏禁用，電子郵件地址欄默認情況下隱藏（可以使用任何其他列的菜單，再次顯示），電話號碼列彎曲，以適應其餘網格面板的總寬度。要查看這個例子中生活，看到簡單的網格例子。

提煉

您可以使用的渲染器的列的屬性配置改變顯示數據的方式。渲染器是一個功能，修改的基礎值，並返回一個新的值將顯示。一些最常見的渲染，包括在Ext.util.Format，但你可以寫自己，以及：

列： [ 
    { 
        文字： '出生日期' ，
        dataIndex ： '生日' ，
        / /格式的日期，使用渲染器Ext.util.Format類
        渲染： 分機。util的。格式。dateRenderer ）
    }，
    { 
        文字： '電子郵件地址' ，
        dataIndex ： “電子郵件” ，
        / /格式的電子郵件地址使用自定義渲染
        渲染 功能（價值） { 
            回報 分機。字符串格式（“<A HREF =”MAILTO：{ 0}“> {1} </ a>的，值，值）; 
        
    } } 
]

看到渲染了現場演示，使用自定義渲染的例子。

分組

在組織行成組的網格面板是很容易的，首先我們指定groupField我們的商店的財產：

分機。創建（Ext.data.Store' ， { 
    模式： “僱員” ，
    數據 ，
    groupField ： '部門' 
}）;

在gouping 商店 S請參閱數據手冊。接下來，我們配置了分組網格功能，處理，顯示行組：

分機創建（的“Ext.grid.Panel' ， { 
    ... 
    功能： [{ FTYPE ： '分組'  }] 
}）;

看到分組網格面板，一個活生生的例子。

選擇模型

有時網格面板是使用只在屏幕上顯示的數據，但通常是必要的互動或更新數據。所有網格面板有一個 Selection 模型決定數據如何被選中。選擇模型的兩個主要類型是行選擇模型，在整個行被選中，和小區選擇模型，單個細胞被選中。

網格面板使用行選擇模型，默認情況下，但它很容易切換到一個小區選擇模型：

分機創建（'Ext.grid.Panel' ， { 
    selType ： “cellmodel ，
    商店： ... 
}）;

使用細胞選擇模型，改變了幾件事情。首先，現在點擊一個細胞的選擇只是電池（使用行選擇模型，將選擇整個行），其次鍵盤導航走行，而不是細胞，從細胞行。基於Cell的選擇模型通常用於與編輯一起。

編輯

網格面板建立的編輯支持。我們要看看在兩個主要的編輯模式-編輯行編輯和細胞

單元格編輯

單元格編輯，讓你在編輯數據網格面板在一次細胞。在實施單元格編輯的第一步是配置爲每個列在您的網格面板，應該是可編輯的編輯器。這是使用編輯器的配置。最簡單的方法是指定領域的xtype您要使用作爲編輯：

分機創建（的“Ext.grid.Panel' ， { 
    ... 
    列： [ 
        { 
            文字： '電子郵件地址' ，
            dataIndex ： “電子郵件” ，
            編輯： '文本框' 
       } 
    ] 
}）;

如果您需要更多的控制如何編輯領域的行爲，編輯的配置，也可以採取一個字段的配置對象。例如，如果我們使用一個文本字段，我們需要一個值：

列： [ 
    文字： '名稱' ，
    dataIndex ： '名稱' ，
    編輯： { 
        的xtype ： '文本框' ，
        allowBlank ： FALSE 
    } 
[

你可以使用任何類Ext.form.field包作爲一個編輯字段。讓我們假設我們要編輯一列包含日期。我們可以使用一個日期字段編輯器：

列： [ 
    { 
        文字： '出生日期' ，
        dataIndex ： '生日' ，
        編輯： “的DateField' 
    } 
]

，任何Ext.grid.column.Column在一個S 沒有配置編輯器的網格面板將無法編輯。

現在我們已經配置的列，我們想成爲編輯，編輯器，將用於編輯數據領域，下一步是要指定一個選擇模型。讓我們用一個 Cell 在我們的網格面板配置的選擇模型：

分機。創建（的“Ext.grid.Panel' ， { 
    ... 
    selType ： 'cellmodel' 
}）;

最後，我們需要配置的網格面板與單元格編輯插件啓用編輯：

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'cellmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.CellEditing', {
            clicksToEdit: 1
        })
    ]
});

，這一切需要創建一個可編輯的網格，使用單元格編輯。看到單元格編輯工作的例子。

行編輯

行編輯，讓你同時編輯編輯單元格，而不是整個行。行編輯工作方式完全相同的單元格編輯-所有我們需要做的是改變插件類型Ext.grid.plugin.RowEditing和設置selType到rowmodel。

Ext.create('Ext.grid.Panel', {
    ...
    selType: 'rowmodel',
    plugins: [
        Ext.create('Ext.grid.plugin.RowEditing', {
            clicksToEdit: 1
        })
    ]
});

行編輯 - 活生生的例子

分頁

有時過大，顯示在一個頁面上的所有數據集。網格面板，支持兩種不同的方法-分頁分頁工具欄加載使用上一個/下一個按鈕的頁面，分頁滾輪加載新的頁面內嵌滾動。

商店設置

之前，我們可以建立兩種類型的分頁上，網格面板，我們要配置的存儲支持分頁。在下面的例子中，我們添加的pageSize的商店，我們配置totalProperty與我們的讀者：

Ext.create('Ext.data.Store', {
    model: 'User',
    autoLoad: true,
    pageSize: 4,
    proxy: {
        type: 'ajax',
        url : 'data/users.json',
        reader: {
            type: 'json',
            root: 'users',
            totalProperty: 'total'
        }
    }
});

，totalProperty配置告訴讀者從哪裏得到的JSON響應結果的總數。這個商店配置消耗JSON響應，看起來像這樣：

{
    "success": true,
    "total": 12,
    "users": [
        { "name": "Lisa", "email": "[email protected]", "phone": "555-111-1224" },
        { "name": "Bart", "email": "[email protected]", "phone": "555-222-1234" },
        { "name": "Homer", "email": "[email protected]", "phone": "555-222-1244" },
        { "name": "Marge", "email": "[email protected]", "phone": "555-222-1254" }
    ]
}

爲更多的商店，代理，讀者指到的數據手冊。

分頁工具欄

現在，我們已經設置我們的商店，以支持分頁，所有剩下的就是配置尋呼工具欄。你可以把尋呼工具欄的任何地方在您的應用程序的佈局，但它通常停靠在網格面板：

       同店GridPanel中使用
        碼頭： '底部' ，
        displayInfo ： 真
    }] 
}）;

分頁工具欄示例

分頁滾輪

電網作爲替代使用分頁工具欄的無限滾動支持。用戶可以通過滾動成千上萬的記錄，沒有renderering一次在屏幕上的所有記錄的性能損失。電網應指定pageSize爲綁定到店。

分機創建（“Ext.grid.Panel ， { 
    / /使用1 PagingGridScroller（這是一個PagingToolbar互換）
    verticalScrollerType ： “paginggridscroller' ，
    / /不重置滾動視圖時refreshs 
    invalidateScrollerOnRefresh ： 假的，
    / /無限滾動不支持選擇
    disableSelection ： 真實的，
    / / ... 
}）;

無限滾動示例

阿洲

發佈了21 篇原創文章 · 獲贊 0 · 訪問量 8萬+

私信關注

電網

電網

基本的網格面板

模型和存儲

網格面板

提煉

分組

選擇模型

編輯

單元格編輯

行編輯

分頁

商店設置

分頁工具欄

分頁滾輪

Wireshark 安裝+使用（一）

自己翻譯的EXTJS4 入門

EXTJSAPI文檔

Ext JS的升級指南

形式

數據

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結