How to use a ux component in Extjs CMD Application?

Question

I want to use Ext.ux.LiveSearchGridPanel in my view. Currently I am setting gridPanel as

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);
                }
            },

I want to use liveSearchGridPanel or Live Search feature in my grid panel, can anyone tell me that how can I use it? Like Currently I am setting 'xtype' property to use a component, how can I use ux component?

I have seen this question What is the ExtJs xtype for LiveSearchGridPanel but I am not able to understand the answer.

This is my directory structure

Kindly help.

Answer 1

The LiveSearchGridPanel has no xtype. You must create it via Ext.create("Ext.ux.LiveSearchGridPanel");

Checkout the example, where you can see howto create the LiveSearchGridPanel

If you use the sencha cmd application structure it should work out of the box. Otherwise you have to specify the path to the ux folder manually via Ext.Loader.setPath. If you not use the sencha cmd application structure I would recommend to create a folder "ux" and copy all the sencha ux classes you need into that folder. You find the sencha ux classes in ext/src/ux.

Example with direct creation of the 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);
                }
            }
        })
    ]
}