[Solved] UniTreeMenu Filter

Gabriel · June 10, 2019

Hi.

I have a problem filtering the UniTreeMenu. I've adapted this method from Extjs

 filterStore: function(value) {
                var me = this,
                    store = me.store,
                    searchString = value.toLowerCase(),
                    filterFn = function(node) {
                        var children = node.childNodes,
                            len = children && children.length,
                            visible = v.test(node.get('text')),
                            i;

                        // If the current node does NOT match the search condition
                        // specified by the user...
                        if (!visible) {

                            // Check to see if any of the child nodes of this node
                            // match the search condition.  If they do then we will
                            // mark the current node as visible as well.
                            for (i = 0; i < len; i++) {
                                if (children[i].isLeaf()) {
                                    visible = children[i].get('visible');
                                } else {
                                    visible = filterFn(children[i]);
                                }
                                if (visible) {
                                    break;
                                }
                            }

                        } else { // Current node matches the search condition...

                            // Force all of its child nodes to be visible as well so
                            // that the user is able to select an example to display.
                            for (i = 0; i < len; i++) {
                                children[i].set('visible', true);
                            }

                        }

                        return visible;
                    },
                    v;

                if (searchString.length < 1) {
                    store.clearFilter();
                } else {
                    v = new RegExp(searchString, 'i');
                    store.getFilters().replaceAll({
                        filterFn: filterFn
                    });
                }

look like this

blob.png.96ccba196abd013e8baba6b341d43629.png

The code was working great, until a uniGUI update, i believe it was 1498 wich introduce Ext js 6.7 (not sure). Since that update the code isn't working anymore, it does not filter the tree and furthermore, is not expanding all the tree nodes. Anyone knows anything about this?

I cant use the filter as is it show on the demo files, because my tree is dynamically created. (related post:

Regards

Sherzod · June 10, 2019

16 minutes ago, Gabriel said:

I cant use the filter as is it show on the demo files, because my tree is dynamically created

Hi,

Can you make a simple testcase? Then please indicate the sequence of actions, how to work with a testcase.

Gabriel · June 10, 2019

Yes. I've attached the project. You just need to click on "Load Menu" and then use the search box.

The Load Menu button is there because the real application has similar behavior, it means that the menu shouldn't load with the FromCreate.

Regards

UniTestMenu.rar

Sherzod · June 11, 2019

13 hours ago, Gabriel said:

I've attached the project.

Hello,

Thanks for the testcase.

Need to analyze this behavior.

Gabriel · June 18, 2019

On 6/11/2019 at 3:35 AM, Sherzod said:

Hello,

Thanks for the testcase.

Need to analyze this behavior.

Hello Sherzod,

Were you able to see this?

Regards

Sherzod · June 18, 2019

2 hours ago, Gabriel said:

Were you able to see this?

Hello Gabriel,

Yes,

I could not succeed, I will check it again

Gabriel · June 19, 2019

I've changed a little bit the test case...

What I was trying to accomplish is to hide all elements from the menu, it should be pretty straight forward, but, I think I found that the menu is not refreshing after setting the property. I add this function to the KeyUp event

function keyup(sender,e,eOpts){
	var me = MainForm.UniTreeMenu1;
	var almc = me.store;
	var vItemGlobal = '';
	console.log('----Start----');
	for(var i=0; i< almc.data.items.length;i++){
		var vItem = almc.data.items[i].get('text');
		vItemGlobal = vItemGlobal + '-' + vItem;
	}
	
	console.log('Hide elements');
	for(var i=0; i< almc.data.items.length;i++){
		almc.data.items[i].set('visible',false);
	}
	console.log('After hide');
	for(var i=0; i< almc.data.items.length;i++){
		console.log(almc.data.items[i].get('text'));
		if(almc.data.items[i].get('visible')){
			console.log(' - - - Is visible');
		}
	}
	
	console.log('List: ' +vItemGlobal);
	console.log('----End----');
	
}

And the result was this (console log)

js.js:5 ----Start----
js.js:11 Hide elements
js.js:15 After hide
js.js:17 Item two
js.js:19  - - - Is visible
js.js:17 Item four
js.js:19  - - - Is visible
js.js:17 Empleados
js.js:19  - - - Is visible
js.js:17 Metodos y Reportes
js.js:19  - - - Is visible
js.js:17 Informes de Gestión
js.js:19  - - - Is visible
js.js:23 List: -Item one-Item two-Item tree-Item four-Empresa-Empleados-Plan Vacacional-Metodos y Reportes-Autogestión-Informes de Gestión
js.js:24 ----End----
 //second run
undefined
js.js:5 ----Start----
js.js:11 Hide elements
js.js:15 After hide
js.js:17 Item four
js.js:19  - - - Is visible
js.js:17 Metodos y Reportes
js.js:19  - - - Is visible
js.js:23 List: -Item two-Item four-Empleados-Metodos y Reportes-Informes de Gestión
js.js:24 ----End----
//third
undefined
js.js:5 ----Start----
js.js:11 Hide elements
js.js:15 After hide
js.js:17 Metodos y Reportes
js.js:19  - - - Is visible
js.js:23 List: -Item four-Metodos y Reportes
js.js:24 ----End----
//fourth
undefined
js.js:5 ----Start----
js.js:11 Hide elements
js.js:15 After hide
js.js:23 List: -Metodos y Reportes
js.js:24 ----End----

The menu is still the same

blob.png.fc29323d24d5306e1d1ec84409eabaa2.png

I attach the updated project. The javascript code is in the Release/files folder

Regards

UniTestMenu.rar

Gabriel · June 21, 2019

Hello,

I continue doing several tests.

I adapt the original code (https://fiddle.sencha.com/#fiddle/mch&view/editor) to load inside the test case. The thing is that if we use pure Sencha, it works great. But for some reason it won't work with the UniTreeMenu component.

I attach another TestCase

Regards

UniTestMenu.rar

Sherzod · June 21, 2019

Hello,

Are you sure that your test case runs at all?

Gabriel · June 21, 2019

1 minute ago, Sherzod said:

Hello,

Are you sure that your test case runs at all?

Yes, it does...

And using the filter:

i'm using the last version of UniGui

Regards

Sherzod · June 21, 2019

function form.afterrender(sender, eOpts)
{
  load();
}

?

Ok, in any case, we will analyze

Gabriel · June 21, 2019

1 minute ago, Sherzod said:
function form.afterrender(sender, eOpts)
{
  load();
}
?

Ok, in any case, we will analyze

is in the js file. Is one of the tests.

That function load the menu on the left.

Sherzod · June 21, 2019

3 minutes ago, Gabriel said:

is in the js file. Is one of the tests.

function keyupas(sender,e,eOpts){
	console.log('entro'();
}

Gabriel · June 21, 2019

No that one. The js file is in

..\UniTestMenu\Win32\Release\files\js\js.js

Sherzod · June 21, 2019

Ok sorry

Gabriel · June 28, 2019

Finally find a way around.

I have to use pure Javascript.

eduardosuruagy · August 23, 2019

On 28/06/2019 at 15:12, Gabriel said:

Finalmente encontre uma maneira de contornar.

Eu tenho que usar JavaScript puro.

How did you get that resolved?

Sherzod · August 23, 2019

15 minutes ago, eduardosuruagy said:

How did you get that resolved?

Hi,

For what purpose do you want to use a filter?!

eduardosuruagy · August 23, 2019

3 minutes ago, Sherzod said:

Oi,

Para qual finalidade você quer usar um filtro ?!

My menu has many items, I wanted to let the user find by menu name.

Sherzod · August 23, 2019

51 minutes ago, eduardosuruagy said:

My menu has many items, I wanted to let the user find by menu name.

I'll try to analyze it once again.

eduardosuruagy · August 23, 2019

1 minute ago, Sherzod said:

Vou tentar analisá-lo novamente.

Thank you!

Wajeed · May 1, 2020

Gabriel,

My friend can u please upload the solved source in the forum, it will be helpfull for newbie like me.

picyka · May 4, 2020

I need a filter on uniTreeMenu, where the user can consult a menu, has anyone managed?

[Solved] UniTreeMenu Filter

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation