Question

Ext.define('rgpd.view.SAISIE.saisieCategoriePers', {
extend: 'Ext.window.Window',
alias: 'widget.saisie_categorie_persform',
requires: [
    'Ext.form.Panel',
    'rgpd.store.sCategoriePers'
],
title: 'Ajout d\'une catégorie de personnes',
autoShow: true,
height: 700,
width: 700,
//resizable: false,
layout: 'fit',
items: [
    {
        xtype: 'tabpanel',
        items: [
            {
                xtype: 'panel',
                title: 'Sélection',
                items: [
                    {
                        xtype: 'checkboxfield',
                        // create checkbox from store
                    },
                    // other items

我有一个包含tabpanel的窗口。我想显示我的所有商店内容（可以用网格做）并且能够使用复选框选择多行。这可能吗？我没有找到checkboxfield和checkboxgroup的商店属性。

Answer 1

您可以将checkcolumn用于您的方案。来自API文档：

一个Column子类，它在每个列单元格中呈现一个复选框在点击时切换关联数据字段的真实性。

Ext.create('Ext.grid.Panel', {
    title: 'Simpsons',
    store: store,
    columns: [{
        xtype: 'checkcolumn',
        dataIndex: 'checked',
        width: 70
    },{
        text: 'Name',
        dataIndex: 'name',
        width: 200
    }, {
        text: 'Email',
        dataIndex: 'email',
        width: 250
    }, {
        text: 'Phone',
        dataIndex: 'phone',
        width: 120
    }],
    height: 600,
    layout: 'fit',
    renderTo: Ext.getBody()
});

这是一个工作小提琴：https://fiddle.sencha.com/#view/editor&fiddle/2hov

Answer 2

我找到的解决方案是使用

{
    xtype: 'grid',
    store: 'sCategoriePers',
    id: 'gridsaisiecategoriepers',
    title: 'Categories de Personnes',
    multiSelect: true,
    columns: [
        {
            text: 'Id',
            hideable: false,
            dataIndex: 'id',
            autoSizeColumn : true,
            hidden: true
        },
        {
            text: 'Nom',
            dataIndex: 'nom',
            autoSizeColumn : true,
            flex: 1
        },
    ],

    selModel: {
        selType: 'checkboxmodel',
        showHeaderCheckbox: true
    },
    // ...

然后，您可以使用getSelection（）

获取所选行

EXTJS从商店内容创建复选框

2 个答案: