0

I am using TreePicker from ExtJS 6.0.2. I would like to know how can I perform a search or query on the Picker data similar to this example - Fiddle. It has this property which is an built-in feature from combo-box:

queryMode: 'local'

I have made the TextField editable and I want to know if there is any inbuilt way to perform a search or do I have to write code to do it manually. For the manual way I tried to capture the change event of the TextField by writing the code for it in the config property of the TreePicker but failed to get the event to be fired. What am I missing here, please guide.

Binay Das
  • 37
  • 5

1 Answers1

1

it seems this component has a very simple implementation and doesn't support any search functionality. You could start to implement your need studying the Ext.form.field.ComboBox source code in order to "copy" only the behaviours you want.

For example you will see there's a picker's method to override to handle the change event. A very very simple "search on change" extension can be added with the following override:

        ...
        onFieldMutation: function(e) {
            var me = this,
                store = me.getStore(),
                rawValue = me.inputEl.dom.value;
            store.filter('text', rawValue);
        },
        ...

Fiddle

Federico Baron
  • 967
  • 6
  • 15
  • Thanks but before this I am unable to get the textfield's change event to fire, any pointers on that? – Binay Das May 06 '16 at 08:46
  • you don't need to fire the event, just override the onFieldMutation method. – Federico Baron May 06 '16 at 11:01
  • I am sorry but I think you are confused here, I am not making use of combo-box component and no where in my code is any method of combo-box being inherited. The fiddle link is an example of combo-box and I am trying to achieve something similar with TreePicker here. – Binay Das May 06 '16 at 11:20
  • I got it, my suggestion is to take a look to the combobox implementation because it is an extension of trigger field (exactly like the treepiker) with the functionalities you desire. Anyway, copy my code to your treepicker component, it is a working example... – Federico Baron May 06 '16 at 11:56
  • Okay, I am a bit lost with your code, could you kindly tell me where exactly this block of code has to be put into? – Binay Das May 06 '16 at 12:08
  • Great. Thanks for all your help. Much appreciated :) – Binay Das May 06 '16 at 12:22