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

My App Directory Structure

Kindly help.

http://docs.sencha.com/extjs/6.0.2/classic/Ext.ux.LiveSearchGridPanel.html — Johan Van de Merwe, Jan 17 '17 at 18:49

Simon Hoss · Accepted Answer · 2015-04-13T11:36:56.147

2

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

edited Apr 13 '15 at 11:36

answered Apr 13 '15 at 09:48

Simon Hoss

562
1
3
7

I understand your point but can you show me that what changes I have to make in code to make this work? – Adam Gilly Apr 13 '15 at 10:37
Please post your folder structure, then I can give you an example. – Simon Hoss Apr 13 '15 at 10:47
i have posted my directory structure in my question – Adam Gilly Apr 13 '15 at 11:08
well you are using the default sencha cmd application structure. I added a code example. – Simon Hoss Apr 13 '15 at 11:37
Thanks it is working, though I am facing another error which is Uncaught TypeError: Cannot read property 'isBufferedStore' of undefined Which is due to store, though I have registered it in Application's Launch function. It was working fine before this LiveSearch thing, Do you have any idea ? – Adam Gilly Apr 13 '15 at 12:01
how do you set the store on the LiveSearchGridPanel? – Simon Hoss Apr 13 '15 at 12:18
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/75107/discussion-between-adam-gilly-and-simon-hoss). – Adam Gilly Apr 13 '15 at 12:23
Do note that the LiveSearchGridPanel example will not work for all the records if the grid has bufferedRenderer = true (it's enabled by default) and you've a large number of records in the grid – Yellen Apr 14 '15 at 07:12

score 0 · Answer 2 · answered Jan 17 '17 at 19:00

What you have to do is create a new view like MyApp.view.grid.LiveSearchGrid in folder app/view/grid and then define like this:

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

and in your component:

{
   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);
           }
       }
   }]

}

and very important, if you use Sencha CMD (which I hope you do), don't forget to put the 'ux' package in the requirements, otherwise it won't work.

How to use a ux component in Extjs CMD Application?

2 Answers2