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或Live Search功能，有人能告诉我如何使用它？就像目前我正在设置＆＃39; xtype＆＃39;要使用组件的属性，我该如何使用ux组件？

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

这是我的目录结构

My App Directory Structure

请帮助。

Answer 1

LiveSearchGridPanel没有xtype。你必须通过Ext.create创建它（＆＃34; Ext.ux.LiveSearchGridPanel＆＃34;）;

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

如果您使用sencha cmd应用程序结构，它应该开箱即用。否则，您必须通过Ext.Loader.setPath手动指定ux文件夹的路径。如果您不使用sencha cmd应用程序结构，我建议您创建一个文件夹＆＃34; ux＆＃34;并将所需的所有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（我希望您这样做），请不要忘记放置＆＃39; ux＆＃39;包装在要求中，否则它不会起作用。

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

2 个答案: