如何在 Extjs CMD 应用程序中使用 ux 组件？

Question

我想在我看来使用 Ext.ux.LiveSearchGridPanel。目前我将 gridPanel 设置为

xtype:'app-main',
    controller: 'main',
    viewModel: {
        type: 'main'
    },
    layout: 'absolute',
    autoScroll : true,
    resizable:true,
    items: [


        {
            xtype: 'gridpanel',
            x: 10,
            y: 10,
            itemId: 'myGrid',
            plugins: [rowEditing],
            reference: 'reqGridpanel',
            listeners: {
                'selectionchange': function(view, records) {
                this.down('#deleteRecord').setDisabled(!records.length);
                }
            },

我想在我的网格面板中使用 liveSearchGridPanel 或实时搜索功能，谁能告诉我如何使用它？就像Currently I am setting 'xtype' 属性 to use a component，我怎样才能使用ux组件？

我看过这个问题What is the ExtJs xtype for LiveSearchGridPanel，但我无法理解答案。

这是我的目录结构

请帮忙。

Answer 1

LiveSearchGridPanel 没有 xtype。您必须通过 Ext.create("Ext.ux.LiveSearchGridPanel");

创建它

查看 example，您可以在其中了解如何创建 LiveSearchGridPanel

如果您使用 sencha cmd 应用程序结构，它应该开箱即用。否则，您必须通过 Ext.Loader.setPath 手动指定 ux 文件夹的路径。如果您不使用 sencha cmd 应用程序结构，我建议创建一个文件夹 "ux" 并将您需要的所有 sencha ux 类复制到该文件夹中。您在 ext/src/ux.

中找到了 sencha ux 类

直接创建 LiveSearchGridPanel 的示例

{
    xtype : 'app-main',
    controller : 'main',
    viewModel : {
        type : 'main'
    },
    layout : 'absolute',
    autoScroll : true,
    resizable : true,
    items : [
        Ext.create("Ext.ux.LiveSearchGridPanel", {
            x : 10,
            y : 10,
            itemId : 'myGrid',
            plugins : [rowEditing],
            reference : 'reqGridpanel',
            listeners : {
                'selectionchange' : function (view, records) {
                    this.down('#deleteRecord').setDisabled(!records.length);
                }
            }
        })
    ]
}

Answer 2

您需要做的是在文件夹 app/view/grid 中创建一个像 MyApp.view.grid.LiveSearchGrid 这样的新视图，然后像这样定义：

Ext.define("MyApp.view.grid.LiveSearchGrid", {
    extends: 'Ext.ux.LiveSearchGridPanel',
    xtype: 'MyLiveSearchGrid'
});

在你的组件中：

{
   xtype : 'app-main',
   controller : 'main',
   viewModel : {
       type : 'main'
   },
   layout : 'absolute',
   autoScroll : true,
   resizable : true,
   x : 10,
   y : 10,

   items : [{
       xtype: 'MyLiveSearchGrid',
       itemId : 'myGrid',
       plugins : [rowEditing],
       reference : 'reqGridpanel',
       listeners : {
           scope: this,
           selectionchange : function (view, records) {
              this.down('#deleteRecord').setDisabled(!records.length);
           }
       }
   }]

}

而且非常重要，如果你使用 Sencha CMD（我希望你这样做），不要忘记将 'ux' 包放在需求中，否则它将无法工作。

如何在 Extjs CMD 应用程序中使用 ux 组件？

How to use a ux component in Extjs CMD Application?

extjs

sencha-cmd

extjs5