电网

最新推荐文章于 2025-04-03 09:17:36 发布

阿洲

最新推荐文章于 2025-04-03 09:17:36 发布

阅读量1.2k

点赞数

文章标签： email 存储 plugins 工具 autoload 电话

电网

网格面板的Ext JS的中心之一。这是一个令人难以置信的通用组件，提供了一种简单的方式来显示，排序，分组和编辑数据。

基本的网格面板

简单的网格

让我们开始创建一个基本的网格面板。这里有所有你需要知道得到一个简单的Grid并运行：

模型和存储

一个网格面板简直就是一个组件，它显示包含在一个数据存储。一个商店可以被认为是作为一个记录的集合，或模型的实例。对于更多的信息存储和型号小号的数据手册。这种设置的好处是清晰的关注分离。网格面板中显示的数据，而只关心存储需要保健的获取和保存数据，利用其代理。

首先，我们需要定义一个模型。一个模型仅仅是一个领域，它代表一个数据类型的集合。让我们来定义一个模型，它代表一个“用户”：

分机定义（“用户” ， { 
    延长：的 “Ext.data.Model' ，
    字段： [  '名称' ， '电子邮件' ， '电话'  ] 
}）;

接下来，让我们创建一个商店，包含多个用户的情况下。

var userStore = Ext.create('Ext.data.Store', {
    model: 'User',
    data: [
        { name: 'Lisa', email: 'lisa@simpsons.com', phone: '555-111-1224' },
        { name: 'Bart', email: 'bart@simpsons.com', phone: '555-222-1234' },
        { name: 'Homer', email: 'home@simpsons.com', phone: '555-222-1244' },
        { name: 'Marge', email: 'marge@simpsons.com', 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": "lisa@simpsons.com", "phone": "555-111-1224" },
        { "name": "Bart", "email": "bart@simpsons.com", "phone": "555-222-1234" },
        { "name": "Homer", "email": "home@simpsons.com", "phone": "555-222-1244" },
        { "name": "Marge", "email": "marge@simpsons.com", "phone": "555-222-1254" }
    ]
}

为更多的商店，代理，读者指到的数据手册。

分页工具栏

现在，我们已经设置我们的商店，以支持分页，所有剩下的就是配置寻呼工具栏。你可以把寻呼工具栏的任何地方在您的应用程序的布局，但它通常停靠在网格面板：

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

分页工具栏

分页工具栏示例

分页滚轮

电网作为替代使用分页工具栏的无限滚动支持。用户可以通过滚动成千上万的记录，没有renderering一次在屏幕上的所有记录的性能损失。电网应指定pageSize为绑定到店。

分机创建（“Ext.grid.Panel ， { 
    / /使用1 PagingGridScroller（这是一个PagingToolbar互换）
    verticalScrollerType ： “paginggridscroller' ，
    / /不重置滚动视图时refreshs 
    invalidateScrollerOnRefresh ： 假的，
    / /无限滚动不支持选择
    disableSelection ： 真实的，
    / / ... 
}）;

无限滚动示例