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

我想用我的观点。 目前我将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或Live Search功能，有人能告诉我如何使用它吗？ 就像目前我正在设置“xtype”属性以使用组件一样，我如何使用ux组件

我见过这个问题，但我不能理解答案

这是我的目录结构

---

请帮忙。

LiveSearchGridPanel没有xtype。您必须通过Ext.create（“Ext.ux.LiveSearchGridPanel”）创建它

签出，在那里可以看到如何创建LiveSearchGridPanel

如果您使用sencha cmd应用程序结构，它应该是开箱即用的。否则，您必须通过手动指定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);
                }
            }
        })
    ]
}

---

您需要做的是在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”包放在需求中，否则它将不起作用。

我理解您的观点，但您能告诉我，为了实现这一点，我必须在代码中做哪些更改吗？请发布您的文件夹结构，然后我可以给你一个例子。我已经在我的问题中发布了我的目录结构。你使用的是默认的sencha cmd应用程序结构。我添加了一个代码示例。感谢它正在工作，尽管我面临另一个错误，即未捕获的TypeError：无法读取未定义的属性“isBufferedStore”，该属性是由于存储而产生的，尽管我已在应用程序的启动函数中注册了它。在LiveSearch事件之前，它工作得很好，你知道吗？