Disable empty text / panel on NestedList

[Razr]

My situation is that we have a nested list which contains a text (search) field at the top. This field is used for filtering purposes of the items collection of the nested list. The field is also present in the list's items collection.

The problem is here that when there are no matches / results the store bound to the nested list does not return any results. This is perfectly OK, but the problem is that the list automatically shows the "empty text template". And because of that the text (search) field is hidden and thus the filter text cannot be changed/cleared for the list to 'repopulate'.

I tried setting the emptyText field to '' or null but that does not prevent the nested list items collection to be kind of hidden. Basically I do not want any empty text / layer to be displayed when the store does not return any result, my fixed field (first item in the items collection I guess) should stay visible so the user can clear the filter.

[Kurt001]

Did you try to set:

deferEmptyText: false

Alternative:
Add an empty item to the store and make sure this is always true to any search.
if so the record length is larger 0

Alternative 2:
if all this does not work for you try to hide the empty text component:

list.emptyTextCmp.hide()

[Razr]

Did you try to set:
deferEmptyText: false

I tried this, but this solution only seems to prevent the text to be shown untill the store is loaded for the first time (as expected).

Alternative:
Add an empty item to the store and make sure this is always true to any search.
if so the record length is larger 0

Well, actually I only take this approach / workaround when there is really no other option left. I would rather disable the component/layer showing the empty text.

Alternative 2:
if all this does not work for you try to hide the empty text component:
list.emptyTextCmp.hide()

Thanks for making me aware of the existence of this component. The only thing is that this property does not seem to be available on a NestedList. I did some digging and this property is declared on the DataView class from which a normal List inherits, but the NestedList does not. Thus I was not able to find anything related to 'emptyTextCmp' in combination with a NestedList. Perhaps you/somebody else knows more about that?

[Kurt001]

So I guess you have to make from the following code, what you need:

        if (this.getEmptyText() && (this.hasLoadedStore || !this.getDeferEmptyText()) ) {            this.emptyTextCmp.show();
        }

You code write a listener for the emptyTextCmp to act on show.
Or if not available the corresponding item with a listener like:

    listeners: {
        show: {
            element: 'emptyTextCmp' // you need to find out the name of the actual item
            fn: function() {}
    }

[Razr]

So I guess you have to make from the following code, what you need:

        if (this.getEmptyText() && (this.hasLoadedStore || !this.getDeferEmptyText()) ) {            this.emptyTextCmp.show();
        }

You code write a listener for the emptyTextCmp to act on show.
Or if not available the corresponding item with a listener like:

    listeners: {
        show: {
            element: 'emptyTextCmp' // you need to find out the name of the actual item
            fn: function() {}
    }

Good idea, but I am really unable to find anything related to "emptyText". I checked all the source code files from NestedList.js till the base class definition. I must overlook something since it has to be in one of the files. Perhaps a developer can point me in the right direction? I am really overlooking something here I have the feeling.

[Kurt001]

Please provide more information. How about the nested list and the filter you are applying.

[Razr]

Well I tried to create a fiddle, but that's kinda difficult with server-side filtering and custom controls. Basically I have a NestedList, and the only thing I do is specifing a searchfield (xtype) in the .Items collection of that NestedList.

Using a controller I watch the key events on that field, and with postbacks (via a TreeStore) I perform filtering server-side. Point is that when zero results are returned from the store, a mechanism triggers this emptyText layer/component thingy which hides the items collection of the list. Normally this would be OK, but this time not since I want that searchfield to remain visible.

A 'normal' list has the emptyTextCmp, but a NestedList not? Weird though, since there must be something hiding my searchfield.

[Kurt001]

Ahh ok. So you refil the store via proxy and you have an empty store.

I'll check on that one later.

[Razr]

Ahh ok. So you refil the store via proxy and you have an empty store.

I'll check on that one later.

Yes that's correct. I am really curious if there is a elegant way of handling this. Perhaps one of the devvers could also jump in? If there does not seem to be a solotion perhaps I can shoot a bug in.

[Kurt001]

Hi there,
I asked for some code to be able to reproduce your problem.
As you did not post anything, its hard to help you.

Here is a setting I tried, but without success:

        Ext.define('ListItem', {
            extend: 'Ext.data.Model',
            config: {
                fields: [{
                    name: 'text',
                    type: 'string'
                }]
            }
        });

        data = {/* fill with a long list of data */};
//        data = {}; //Use this to an empty data 

        var store = Ext.create('Ext.data.TreeStore', {
            model: 'ListItem',
            storeId: 'Metro',
            defaultRootProperty: 'items',
            root: data
        });

        var searchfield = {
            xtype: 'searchfield',
            label: 'TryMe',
            query: 'query',
            height: 50,
            width: '100%',
            style: 'background-image: none; background-color: red;'
        };

        var nestedList = {
            xtype: 'nestedlist',
            title: 'Groceries',
            displayField: 'text',
            store: store,
            items: searchfield
        };

        this.add(nestedList);

The searchfield is not shown with/without data.
Please post some code or otherwise there is no way helping you.