StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>If your TreePanel uses a TreeStore which in turn has a Ext.data.Model, then when you right click on a node (say nodeA), you should be just able to do <code>form.loadRecord(nodeA)</code>, the API for <a href="http://docs.sencha.com/ext-js/4-0/#!/api/Ext.form.Panel-method-loadRecord" rel="nofollow" title="loadRecord">loadRecord is here</a></p> <p>If it's still not clear, I think <a href="http://blog.andrewrose.co.uk/2010/05/extjs-loading-grid-record-into-form.html" rel="nofollow">this blog post</a> could help, it talks about loading a grid record into a form. I know it's not ExtJS 4, but the key functions are the same. </p> <p>Ok, let me show this with a super simple example, hope it will help. </p> <p>First we create the form that we want to display stuff in, note that the <code>renderTo</code> property is bound to a div inside my HTML, so you might need to change that. Also note that the <code>name</code> property of the textarea and textfield, they are the key for the loadRecord to work, <strong>they have to match the <code>fields</code> defined in the model later.</strong> </p> <pre><code>var form = Ext.create('Ext.form.Panel',{ renderTo : 'form-div', items : [{ xtype : 'textarea', fieldLabel : 'label 1', name : 'name' },{ xtype : 'textfield', fieldLabel : 'label 2', name : 'age' }] }); </code></pre> <p>Next, we create the tree to display our data, we start by creating a simple model : </p> <pre><code>Ext.define('Person',{ extend : 'Ext.data.Model', fields : [{ name : 'name', type : 'string' },{ name : 'age', type : 'int' }] }); </code></pre> <p>Then we create a TreeStore that uses that model and initialize it with some inline data: </p> <pre><code>var store = Ext.create('Ext.data.TreeStore',{ model : 'Person', root : { expanded : true, children : [{ name : 'John', age : 10, leaf : true },{ name : 'Joe', age : 100, leaf : true }] } }); </code></pre> <p>Then we create the tree to display the data in the store. (Note that the nodes will show up as "undefined" because we are not using the default "text" property of a Node)</p> <pre><code>var tree = Ext.create('Ext.tree.Panel',{ height : 300, width : 300, store : store, rootVisible : false, renderTo : 'tree-div', listeners : { itemclick : function(view, record){ form.loadRecord(record); } } }); </code></pre> <p>Now, you should see a tree with two nodes both displayed as "undefined" on your page, as well as a Form with a textarea and a textfield. If you click on a node inside the tree, the form will display the name and age of the selected node.</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload