PDA

View Full Version : how can I add a tree into a form?



sonkey
22 Aug 2007, 8:20 AM
I want to add a tree into a form as a field, how to do that? Any example?
btw, can I add some customer ui control into a form? Any example?:-/

sonkey
22 Aug 2007, 4:42 PM
Any one know?

Animal
22 Aug 2007, 11:24 PM
Use a FieldSet or Column as the container, and create it in the usual way.

fancing
23 Aug 2007, 2:50 AM
Use a FieldSet or Column as the container, and create it in the usual way.

but how can i set a Tree into the container? should i create it via extending Field?

Thanks

Animal
23 Aug 2007, 3:25 AM
http://extjs.com/deploy/ext/docs/output/Ext.tree.TreePanel.html

First parameter is the container. Use the FieldSet or Column's element.

Animal
23 Aug 2007, 3:26 AM
Personally, I think DnD enabled widgets should implement the Ext.form.Field interface and be addable to Forms as Ext Fields.

This would mean that Ext.form.Form.submit would have to loop through its input fields, calling getValue to collect all values rather than just submitting the DOM form.

sonkey
23 Aug 2007, 11:45 PM
I wirte the code like this:


var treeLayout = top.container({},
new Ext.form.HtmlEditor({
id:'bio1',
fieldLabel:'Biography',
width:550,
height:100
})
);
top.container({});
top.addButton('Save');
top.addButton('Cancel');
top.render('form-ct2');

tree = new Ext.tree.TreePanel(treeLayout, {
animate:true,
loader: new Ext.tree.CustomUITreeLoader({
dataUrl:'http://crepitus.com/misc/ext/treesample.json',
baseAttr: {
uiProvider: Ext.tree.CheckboxNodeUI
}
}),
enableDD:false,
containerScroll: true,
rootUIProvider: Ext.tree.CheckboxNodeUI,
selModel:new Ext.tree.CheckNodeMultiSelectionModel(),
rootVisible:false
});

// set the root node
root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'source',
uiProvider: Ext.tree.CheckboxNodeUI
});
tree.setRootNode(root);

// render the tree
tree.render();

but it didn't work, why?

Thanks!

Animal
24 Aug 2007, 12:16 AM
tree = new Ext.tree.TreePanel(treeLayout, {...


Is the 1st parameter to the TreePanel constructor a Form Layout object?

http://extjs.com/deploy/ext/docs/output/Ext.tree.TreePanel.html

Or would it be that Layout object's Element?

http://extjs.com/deploy/ext/docs/output/Ext.form.Layout.html#getEl

http://www.mysmiley.net/imgs/smile/rolleye/rolleye0010.gif

Animal
24 Aug 2007, 12:17 AM
I don't know how it will fare if the container already contains an HtmlEditor! You might want to put that in a seperate container.

sonkey
24 Aug 2007, 1:05 AM
There are some mistakes in the code above.

The code I try is below:


var top = new Ext.form.Form({
labelAlign: 'top'
});

var treeLayout = top.container();

tree = new Ext.tree.TreePanel(treeLayout, {
animate:true,
loader: new Ext.tree.CustomUITreeLoader({
dataUrl:'http://crepitus.com/misc/ext/treesample.json',
baseAttr: {
uiProvider: Ext.tree.CheckboxNodeUI
}
}),
enableDD:false,
containerScroll: true,
rootUIProvider: Ext.tree.CheckboxNodeUI,
selModel:new Ext.tree.CheckNodeMultiSelectionModel(),
rootVisible:false
});

// set the root node
root = new Ext.tree.AsyncTreeNode({
text: 'root',
draggable:false,
id:'source',
uiProvider: Ext.tree.CheckboxNodeUI
});
tree.setRootNode(root);

// render the tree
tree.render();
top.render('form-ct2');

It doesn't work too.
btw, I am new in ExtJs, could you tell me more?
Thanks!

sonkey
24 Aug 2007, 1:11 AM
tree = new Ext.tree.TreePanel(treeLayout, {...


Is the 1st parameter to the TreePanel constructor a Form Layout object?

http://extjs.com/deploy/ext/docs/output/Ext.tree.TreePanel.html

Or would it be that Layout object's Element?

http://extjs.com/deploy/ext/docs/output/Ext.form.Layout.html#getEl

http://www.mysmiley.net/imgs/smile/rolleye/rolleye0010.gif

Yes, the first parameter is Form Layout object.

You said:"First parameter is the container. Use the FieldSet or Column's element.".

So I create a layout object by "var treeLayout = top.container();"

And Then I pass it to the TreePanel constructor.

Animal
24 Aug 2007, 1:32 AM
Yes. "Use the FieldSet or Column's element"

sonkey
24 Aug 2007, 6:11 AM
Thanks for reply, it's work now.
I make a mistake in a detail.
I get the FieldSet's element before the form was rendered. So the treeLayout.getEl always null.

Animal
24 Aug 2007, 6:14 AM
Well done on getting it working!