如何在 Ext.grid.GridPanel 中显示复选框?

发布于 2024-11-19 22:53:18 字数 93 浏览 2 评论 0原文

我需要显示“Active”列的复选框,并且当我更改选择以便能够发出 ajax 请求时,以更新数据库。

一些示例代码会对我有很大帮助。

谢谢。

I need to display a checkbox for column "Active" and when I change the selection to be to able to make an ajax request, to update the database.

Some sample code will help me a lot.

Thanks.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

少女的英雄梦 2024-11-26 22:53:18

请检查此链接:Extjs 网格插件。
您可以检查第二个网格的来源。

此外,您还需要监听网格选择模型的“selectionchange”事件 - 这样您就可以选择行,然后您可以向服务器或您需要的任何内容提交请求。


如果您需要特定列(不是第一个) - 您可以检查此链接:网格中的复选框


我认为这里也一样:如何将复选框列添加到 Extjs 网格

Please check this link: Extjs Grid plugins.
You can check sources for second grid.

Also you need listen 'selectionchange' event for selection model of the grid - so you'll have selected rows and then you can submit a request to server or whatever you need.


If you need specific column (not the first one) - you can check this link: Checkbox in the grid


And I think this is same here too: how to add checkbox column to Extjs Grid

沒落の蓅哖 2024-11-26 22:53:18

这是我的一个项目的示例:

Ext.define('Magellano.view.news.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.newslist',

    store: 'News',
    remoteSort: false,

    dockedItems: [{
      xtype: 'toolbar',

      items: [{
        text: 'Online',
        id: 'online-button',
        enableToggle: true,
        icon: '/images/light-bulb.png',
        pressed: true,
        handler: onItemToggle 
      }, { text: 'Preview',
        id: 'preview-button',
        enableToggle: true,
        pressed: true
      }],

    initComponent: function() {
      this.selModel = Ext.create('Ext.selection.CheckboxModel', {
        singleSelect: false,
        sortable: false,
        checkOnly: true
      });

      this.columns = [
        { text: '', width: 28, renderer: function(val) { return "<img src='/images/star-empty.png' height='16' width='16'></img>"}},
        { text: 'Date', width: 60, dataIndex: 'newstime', renderer: renderDate},
        { text: 'Agency', width: 60, dataIndex: 'agency',  renderer: function(val) { return val;}},
        { text: 'Category', width: 60, dataIndex: 'category',  renderer: function(val) { return val;}},
        { text: 'Title', flex: 1, dataIndex: 'title', 
          renderer: function(val) { return Ext.String.format('<b>{0}</b>', val); }
        }
      ];

          this.title = "News from " + Ext.Date.dateFormat(new Date(), "j M Y");
          this.callParent(arguments);
        }
}

重要的部分是在 initComponent 中创建选择模型:

  this.selModel = Ext.create('Ext.selection.CheckboxModel', {
    singleSelect: false,
    sortable: false,
    checkOnly: true
  });

This is example from one of my projects:

Ext.define('Magellano.view.news.List' ,{
    extend: 'Ext.grid.Panel',
    alias : 'widget.newslist',

    store: 'News',
    remoteSort: false,

    dockedItems: [{
      xtype: 'toolbar',

      items: [{
        text: 'Online',
        id: 'online-button',
        enableToggle: true,
        icon: '/images/light-bulb.png',
        pressed: true,
        handler: onItemToggle 
      }, { text: 'Preview',
        id: 'preview-button',
        enableToggle: true,
        pressed: true
      }],

    initComponent: function() {
      this.selModel = Ext.create('Ext.selection.CheckboxModel', {
        singleSelect: false,
        sortable: false,
        checkOnly: true
      });

      this.columns = [
        { text: '', width: 28, renderer: function(val) { return "<img src='/images/star-empty.png' height='16' width='16'></img>"}},
        { text: 'Date', width: 60, dataIndex: 'newstime', renderer: renderDate},
        { text: 'Agency', width: 60, dataIndex: 'agency',  renderer: function(val) { return val;}},
        { text: 'Category', width: 60, dataIndex: 'category',  renderer: function(val) { return val;}},
        { text: 'Title', flex: 1, dataIndex: 'title', 
          renderer: function(val) { return Ext.String.format('<b>{0}</b>', val); }
        }
      ];

          this.title = "News from " + Ext.Date.dateFormat(new Date(), "j M Y");
          this.callParent(arguments);
        }
}

The important part is that in the initComponent you create the selection model:

  this.selModel = Ext.create('Ext.selection.CheckboxModel', {
    singleSelect: false,
    sortable: false,
    checkOnly: true
  });
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文