PDA

View Full Version : problems with StoreFilterField for tree



peterarsentev
9 Feb 2012, 2:53 AM
Hello I have a problem with StoreFilterField in tree.
I use dynamic proxy for load branch in tree and would like to apply a filter only for root element.
if I use StoreFilterField right now it will try to open branch and search inside it. I don't need it.
Can you help me with it?
Regard.

peterarsentev
14 Feb 2012, 5:42 AM
I made a little example what I meant.



package com.messagedna.client.widget;


import com.extjs.gxt.ui.client.data.BaseModel;
import com.extjs.gxt.ui.client.data.BaseModelData;
import com.extjs.gxt.ui.client.data.ModelData;
import com.extjs.gxt.ui.client.data.ModelKeyProvider;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.TreePanelEvent;
import com.extjs.gxt.ui.client.store.Store;
import com.extjs.gxt.ui.client.store.TreeStore;
import com.extjs.gxt.ui.client.widget.Html;
import com.extjs.gxt.ui.client.widget.LayoutContainer;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.form.StoreFilterField;
import com.extjs.gxt.ui.client.widget.layout.FitLayout;
import com.extjs.gxt.ui.client.widget.layout.FlowLayout;
import com.extjs.gxt.ui.client.widget.treepanel.TreePanel;


import java.util.ArrayList;
import java.util.List;


public class TestTreeWithFilter extends LayoutContainer {
private int counter = 0;


public TestTreeWithFilter() {
setLayout(new FlowLayout(12));


final Html html = new Html("This tree is handling 1 child. Expand to get more!");


LayoutContainer container = new LayoutContainer();
container.setSize(300, 350);
container.setBorders(true);
container.setLayout(new FitLayout());


TreeStore<ModelData> store = new TreeStore<ModelData>();
final TreePanel<ModelData> tree = new TreePanel<ModelData>(store);
tree.setTrackMouseOver(false);
tree.setDisplayProperty("name");
store.setKeyProvider(new ModelKeyProvider<ModelData>() {


public String getKey(ModelData model) {
return model.get("id");
}


});
ModelData m = createModel("Fast Tree");
store.add(m, false);


tree.setLeaf(m, false);


tree.addListener(Events.BeforeExpand, new Listener<TreePanelEvent<ModelData>>() {


public void handleEvent(TreePanelEvent<ModelData> be) {
if (be.getNode().getItemCount() != 0) {
return;
}
List<ModelData> list = new ArrayList<ModelData>();
for (int i = 0; i < 500; i++) {
ModelData m = createModel("Tree Item " + i);
list.add(m);
}


tree.getStore().insert(be.getNode().getModel(), list, 0, true);
for (ModelData m : list) {
tree.setLeaf(m, false);
}
}
});


tree.addListener(Events.Expand, new Listener<TreePanelEvent<ModelData>>() {


public void handleEvent(TreePanelEvent<ModelData> be) {
html.setHtml("<span>This tree is handling " + tree.getStore().getAllItems().size()
+ " children. Expand to get more!</span>");


}


});


StoreFilterField<ModelData> filter = new StoreFilterField<ModelData>() {
@Override
protected boolean doSelect(Store<ModelData> modelDataStore, ModelData parent, ModelData record, String property, String filter) {
return record.get("name").toString().startsWith(filter);
}
};
filter.bind(store);


VerticalPanel panel = new VerticalPanel();
panel.addStyleName("x-small-editor");
panel.setSpacing(8);


panel.add(filter);


add(panel);


add(html);
container.add(tree);
add(container);


}


private ModelData createModel(String n) {
ModelData m = new BaseModelData();
m.set("name", n);
m.set("id", String.valueOf(counter++));
return m;
}
}

if you try to make a searching it tries to open branch in tree but I did infinity tree and it does not work.
I should to make the searching only for root node.
Please help.
Regard.

peterarsentev
15 Feb 2012, 4:14 AM
Ok. I wrote an epic code that to do it.


final TextField<String> firstName = new TextField<String>();
Button button = new Button("Search");
button.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
String text = firstName.getValue();
if (text != null && !text.isEmpty()) {
List<BaseModel> existNodes = store.getRootItems();
for (BaseModel model : modelDatas){
if (!model.get("name").toString().contains(firstName.getValue())) {
store.remove(model);
} else if (!existNodes.contains(model)) {
store.add(model, false);
tree.setLeaf(model, false);
}
}
} else {
for (BaseModel model : store.getRootItems()){
store.remove(model);
}
for (BaseModel model : modelDatas){
store.add(model, false);
tree.setLeaf(model, false);
}
}
}
});

It works. but I want to know how to hide some nodes in tree. I did it like to add and to remove from tree and I think it is not good idea.

peterarsentev
16 Feb 2012, 1:08 AM
I did an sample that you can check it
there
http://www.2shared.com/file/sP9XAVt2/TreeMX.html
It is a maven project.