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

Posted 2023-02-26

【中文标题】如何在 Extjs CMD 应用程序中使用 ux 组件？

【英文标题】：How to use a ux component in Extjs CMD Application?

【发布时间】：2015-04-13 09:11:00

【问题描述】：

我想在我看来使用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 或实时搜索功能，谁能告诉我如何使用它？ 就像目前我正在设置 'xtype' 属性以使用组件，我该如何使用 ux 组件？

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

这是我的目录结构

请帮忙。

【问题讨论】：

docs.sencha.com/extjs/6.0.2/classic/…

【参考方案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);
                
            
        )
    ]

【讨论】：

我理解你的意思，但你能告诉我我必须对代码进行哪些更改才能使其正常工作吗？

请发表您的文件夹结构，然后我可以给您举个例子。

我已经在我的问题中发布了我的目录结构

您使用的是默认的 sencha cmd 应用程序结构。我添加了一个代码示例。

谢谢它正在工作，虽然我面临另一个错误是 Uncaught TypeError: Cannot read property 'isBufferedStore' of undefined which is due to store，虽然我已经在应用程序的启动功能中注册了它。在 LiveSearch 之前它运行良好，你有什么想法吗？

【参考方案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' 包放在需求中，否则它将不起作用。