【问题标题】:How to display filefield in the grid cell in ExtJS如何在 ExtJS 的网格单元中显示文件字段
【发布时间】:2016-12-18 08:48:13
【问题描述】:

我在表单上创建了一个网格,我正在动态显示记录,我正在使用单元格编辑器编辑 cmets 列,并在另一列中使用文件字段浏览文件并在附件列中显示其完整路径。 查看我正在使用的代码:

                  {
                        xtype: 'container',
                        flex: 1,
                        layout: {
                            type: 'fit'
                        },
                        items: [
                            {
                                xtype: 'grid',
                                itemId: 'myAttachGrid',
                                reference: 'myAttachGrid ',
                                store: Ext.create('JSSample.store.attach.MyAttachGrid'),
                                multiSelect: true,
                                autoScroll: true,
                                columnWidth: 1,
                                editable: true,
                                columnLines: true,
                                plugins: [
                                    Ext.create('Ext.grid.plugin.CellEditing', {
                                        clicksToMoveEditor: 1,
                                        autoCancel: false
                                    })
                                ],
                                columns: [
                                    {
                                        header: 'File', dataIndex: 'Attachments', width: '40%'
                                    },                                        
                                    {
                                        header: '',
                                        dataIndex: '',
                                        width: '10%',
                                        hideable: true,
                                        editor: {
                                            xtype: 'filefield',
                                            labelWidth: 50,
                                            msgTarget: 'side',
                                            buttonOnly: true,
                                            anchor: '100%',                                                
                                            buttonText: '...',
                                            listeners: {
                                                change: function (fld, value) {
                                                    alert(value.replace(/C:\\fakepath\\/g, ''));
                                                }
                                            }
                                        }
                                    },                                      

                                    {
                                        header: 'Comments', dataIndex: 'Comments', width: '50%', editor: 'textfield'
                                    }
                                ]
                            }
                        ]
                    }

加载网格记录后动态显示如下:

现在,我的问题是当我们双击单元格后显示文件字段。 [以下是截图]:

所以,我想看到包含记录的文件字段 [无需双击单元格]。

【问题讨论】:

  • 请提供使用的 ExtJS 版本。在 ExtJS 6 中,有一个 widgetcolumn 可用,它应该可以满足您的需求。
  • 我正在使用 - Ext JS 6.0.2.437

标签: extjs components filefield


【解决方案1】:

正如评论中提到的@alexander,使用 ExtJS 6,您可以使用 Ext.grid.column.Widget 将文件字段添加到您的网格。

以this fiddle 为例。

【讨论】:

  • 感谢您的帮助。但是现在当我们使用 store.removeAll() 清除网格时出现新错误,出现以下错误:Uncaught TypeError: focusEl.isTabbable is not a function
猜你喜欢
  • 2023-03-28
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多