Question

我有一个ExtJS 6.2现代应用程序。将按钮添加到网格单元的正确方法是什么？

我尝试使用列渲染器fn返回一个按钮，但是我只看到渲染的HTML标签，而不是实际的元素。我还尝试使用“ widgetcell”组件来呈现按钮，但不呈现按钮文本。

Answer 1

以小提琴为例，您可以制作一个这样的小部件按钮

    function checkUser()
    {
        var Pseudo = $('#Pseudo').val();

          $.ajax({
            url:'Welcome.php',
            method:"POST",
            data:{Pseudo:Pseudo},

             success:function(data)
             {
                  if(data == '0')
                    { 
                       $('#availability').html('Pseudo correcte');
                    }
                    else
                    {
                        $('#availability').html('Pseudo déja utilisé');
                    }

            }


    });

Answer 2

您可以通过以下方式在没有widgetcell的情况下进行操作：

    {
        text: "Button Widget ",
        flex: 1,
        cell: {
            xtype: 'button',
            text: 'CLICK ME'
        }
    }

或通过面板

    {
        text: "Button Widget ",
        flex: 1,
        cell: {
            xtype: "widgetcell",
            widget: {
                xtype: 'panel',
                header: false,
                items: [{
                    xtype: 'button',
                    text: 'CLICK ME'
                }]
            }
        }
    }

Answer 3

我想完成同样的任务，但我想包括一个更完整的例子。这是我遇到的第一个资源，因此我应该在这里发布。

所以对于我的问题，我只想传递数据并使用该数据渲染视图。为此，我在grid中添加了一个列，并在该列中添加了widgetcell。网格列需要一个dataIndex，但是我的按钮未与模型中的特定列相关联，因此我只添加了一个不存在的列以获取所需的值。

之后，您可以将widget对象指定为单元格config。您可以添加一个handler键并从如下所示的网格访问记录对象。

{
                xtype: 'gridcolumn',
                flex: 1,
                width: 80,
                dataIndex: 'button',
                text: 'Details',
                cell: {
                    xtype: 'widgetcell',
                    widget: {
                        xtype: 'button',
                        text: 'View',
                        width: '100%',
                        handler: function(button,e){ 
                    let accountData = this.up().up()._record.data
                    console.log(accountData);}
                    }
                }
            }

ExtJS Modern-向网格单元添加按钮

3 个答案: