Are you trying to use same instance of searchfield? Or, you may need to clone some objects instead of plainly reusing them. Just guessing...
Printable View
Are you trying to use same instance of searchfield? Or, you may need to clone some objects instead of plainly reusing them. Just guessing...
Hi Saki,
I was wondering if you've had any reports of the filter disappearing if it's put on a form which can be closed.
Here is my scenario:
The first time I open my form, the filter appears fine, however, it disappears if I close, then re-open the form.
My code is as follows:
Ext.ux.tree.TreeFilterX and Ext.ux.tree.RemoteTreePanel remains unchanged while remotetree.js has been adapted to look like the following:
And is used as follows:PHP Code:// vim: sw=4:ts=4:nu:nospell:fdc=4
/**
* Ext.ux.tree.RemoteTreePanel Extension Example Application
*
* @author Ing. Jozef Sakáloš
* @copyright (c) 2008, by Ing. Jozef Sakáloš
* @date 5. April 2008
* @version $Id: remotetree.js 99 2008-12-17 19:24:43Z jozo $
*
* @license remotetree.js is licensed under the terms of the Open Source
* LGPL 3.0 license. Commercial use is permitted to the extent that the
* code/component(s) do NOT become part of another Open Source or Commercially
* licensed development library or toolkit without explicit permission.
*
* License details: http://www.gnu.org/licenses/lgpl.html
*/
/*global Ext, Example, WebPage */
Ext.ns('Ext.ux.tree');
Ext.BLANK_IMAGE_URL = '../../resources/images/default/s.gif';
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
//Example.version = 'beta-1';
Ext.ux.tree.treeView = new Ext.ux.tree.RemoteTreePanel({
id: 'remotetree'
,title: 'Online Users'
,autoScroll: true
,rootVisible: false
,root:{
nodeType: 'async'
,id: 'root'
,text: 'Root'
,expanded: true
,uiProvider: false
}
,loader: {
url: 'process-request.php'
,preloadChildren: true
,baseParams:{
cmd: 'getTree'
,treeTable: 'tree'
,treeID: 1
}
}
,tbar:['Filter:', {
xtype: 'trigger'
,triggerClass: 'x-form-clear-trigger'
,onTriggerClick: function() {
this.setValue('');
Ext.ux.tree.treeView.filter.clear();
}
,id: 'filter'
,width: 200
,enableKeyEvents: true
,listeners:{
keyup:{buffer: 150, fn:function(field, e) {
if(Ext.EventObject.ESC == e.getKey()) {
field.onTriggerClick();
}
else {
var val = this.getRawValue();
var re = new RegExp('.*' + val + '.*', 'i');
Ext.ux.tree.treeView.filter.clear();
Ext.ux.tree.treeView.filter.filter(re, 'text');
}
}}
}
}]
,tools:[{
id: 'refresh'
,handler: function() {
Ext.ux.tree.treeView.actions.reloadTree.execute();
}
}]
});
Ext.ux.tree.treeView.filter = new Ext.ux.tree.TreeFilterX(Ext.ux.tree.treeView);
Maybe something that I did wrong, but can't see it. Please see the attached imagesPHP Code:Ext.ns('Ext.ux.tree');
MyDesktop.ChatWindow = Ext.extend(Ext.app.Module, {
appType: 'accordion',
id: 'chat-win',
init: function(){
this.launcher = {
text: 'Member Chat',
iconCls: 'accordion',
handler: this.createWindow,
scope: this
}
},
createWindow: function(){
var desktop = this.app.getDesktop();
var win = desktop.getWindow('chat-win');
if(!win){
win = desktop.createWindow({
id: 'chat-win',
title: 'Buddy List',
width: 250,
height: 400,
iconCls: 'icon-expand'
,x: 400
,y: 220
,plain: true
,layout: 'fit'
,closable: true
,border: false,
//,maximizable: true,
tbar: [{
tooltip: 'Add a new user',
iconCls: 'user-add'
},' ',{
tooltip: 'Remove the selected user',
iconCls: 'user-delete'
}],
items: Ext.ux.tree.treeView
});
}
win.show();
}
});
Regards,
kazon
TreeFilterX has no UI. It is only filtering engine that is used by a tree. That what you see on the screen at the example page is just ordinary TextField with some listeners attached. Thus, the problem is not TreeFilterX disappears, but TextField disappears.
Next, I do not see any FormPanel in the code you posted.
And last, the recommended way of working with closable Ext windows is to set closeAction:'hide' and re-using them, not creating new ones over and over.
Saki,
Thanks for the explanations. Everything is working as I expect it to now, and it was just by chance that I decided to use closeAction:'hide' until I heard from you. You guys keep up the good work that you're doing on this framework and I hope to have something developed to make you guys proud ;)
Thanks again and I'm sure this won't be the last time you hear from me.
-kazon-
Hi Again Saki,
Have you or anyone else used your Ext.ux.tree.RemoteTreePanel class to have it work with multiple contextMenus? I'm trying to define one menu to use when the user clicks on a folder node (this is working as it should) and another menu to use when the user clicks on a leaf, which in my case will be user names. I can't figure out a way to make this work using your class. I've tried to define another contextMenu which I call leafContextMenu and in the onContextMenu function, I check node.isLeaf() to determine whether or not to use the standard contextMenu or my new leafContextMenu. Nothing seems to work.
Regards,
-kazon-
Just override onContextMenu method of RemoteTreePanel. That is the method responsible for showing the context menu.
Hi Saki,
All is fine now. I guess I was working and looking at the problem for too long and way into the morning. As developer's we never want to quit coding even though we know we should and especially if we're stuck.
I figured that the onContextMenu method was where the magic happened, and was overriding it just as you mentioned, but I just could'nt get the code I was writing to work. After reading your reply, I was able to get my application working within 4 lines of code.
Thanks again!
-kazon-
Congrats! I'm glad your making successes. :) :) :)
Does this filter/extension have to apply to a RemoteTreePanel object or can I use it on a regular TreePanel? I'm trying to get this filter to work on a TreePanel that is populated with straight json and not through a url... Reference this thread:
http://www.extjs.com/forum/showthrea...ight=TreePanel
Thanks.
-Z
Here's what I have so far and I'm able to display and filter... However, this is not working in an Ext.form.FormPanel & that's the ultimate goal. Any ideas?
"this.body is null" is the error I get in firebug when I extend Ext.form.FormPanel
Code:Ext.namespace("Zach");
Zach.TestPanel = Ext.extend(Ext.Panel,{
initComponent: function() {
var treepanel = new AV.RemoteTreePanel({
id: 'remotetree',
autoScroll: true,
rootVisible: false,
/*
root: {
nodeType: 'async',
id: 'root',
text: 'Root',
expanded: true,
uiProvider: false
},
*/
loader: new Ext.tree.TreeLoader(),
tbar: [
'Filter:',
{
xtype: 'trigger',
triggerClass: 'x-form-clear-trigger',
onTriggerClick: function() {
this.setValue('');
treepanel.filter.clear();
},
id: 'filter',
enableKeyEvents: true,
listeners: {
keyup: {
buffer: 150,
fn: function(field,e) {
if(Ext.EventObject.ESC==e.getKey()) {
field.onTriggerClick();
} else {
var val=this.getRawValue();
var re=new RegExp('.*'+val+'.*','i');
treepanel.filter.clear();
treepanel.filter.filter(re,'text');
}
}
}
}
}
]
});
treepanel.filter = new AV.TreeFilterX(treepanel);
// json data describing the tree
var json = [
{
id: 1,
org_id: 0,
parent_issue_type_id: 0,
text: "Architectural Request",
issue_type_desc: "Architectural Request",
prodedures: "1) Step 1",
create_date: "01/14/2009",
is_active: 1,
is_global: 1,
children:
[
{
id: 4,
org_id: 0,
parent_issue_type_id: 1,
text: "Architectural Request - Landscaping",
issue_type_desc : "Landscaping",
prodedures: "",
create_date: "01/15/2009",
is_active: 1,
is_global: 1,
expanded:true,
children:[]
}
]
},
{
id: 2,
org_id: 0,
parent_issue_type_id: 0,
text: "Maintenance Request",
issue_type_desc: "Maintenance Request",
prodedures: "blah blah blah",
create_date: "01/14/2009",
is_active: 1,
is_global: 1,
expanded :true,
children:[]
},
{
id: 3,
org_id: 0,
parent_issue_type_id: 0,
text: "Violation",
issue_type_desc: "Violation",
prodedures : "blah blah blah",
create_date: "01/14/2009",
is_active: 1,
is_global: 1,
expanded:true,
children:[]
}
];
// set the root node
var root=new Ext.tree.AsyncTreeNode({
text: 'Testing',
draggable: false,
id: 'source',
children: json
});
treepanel.setRootNode(root);
Ext.apply(this,{
items:
[
treepanel
]
});
Zach.TestPanel.superclass.initComponent.apply(this,arguments);
},
onRender: function() {
Zach.TestPanel.superclass.onRender.apply(this,arguments);
}
});
Ext.reg("formpanelzach",Zach.TestPanel);
Filter should work anywhere; it has no UI so I don't see any reason for not-working in FormPanel.
If still in troubles, post please your simplified but complete showcase that I can copy to my server and run and troubleshoot.