Databases
StackOverflow2013
Postsdbo
POuse form for add and update data,how is that possible in extjs4?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POuse form for add and update data,how is that possible in extjs4?
    text
    copied!<p>i have a form panel and a tree panel the form is used to add new users, the tree is used to show the list of users</p> <p>what i want is to right click a node in my tree ,click edit (already can do that) then i have my data in the add form panel and be able to modify there and update my user</p> <pre><code>so basically use the same form for adding and updating </code></pre> <p>this is how im trying to do up to know but its not working at all</p> <p>i added a model to my tree,i used loadRecord(rec), but i dont know how to bind my tree data with the form fields! tried adding displayfield with same name from my tree model!!</p> <p>my tree model and store:</p> <pre><code>Ext.define('TreeModel', { extend: 'Ext.data.Model', fields: [ { name: 'text' }, { name: 'id' } ] }); window.ATreeStore = Ext.create('Ext.data.TreeStore', { model: 'TreeModel', root: Ext.decode(objt.TreeToJson()), proxy: { type: 'ajax' }, sorters: [{ property: 'leaf', direction: 'ASC' }, { property: 'text', direction: 'ASC' }] }); </code></pre> <p>my tree menu:</p> <pre><code>var myContextMenu = new Ext.menu.Menu({ items: [{ text: 'Edit', handler: function () { Ext.getCmp('addaform').getForm().loadRecord(rec); } } }] </code></pre> <p>my form:</p> <pre><code>Ext.define("Ext.app.Adduser", { extend: "Ext.form.Panel", title: 'Add user', id : 'addform', closable: true, collapsible: true, animCollapse: true, draggable: true, resizable: true, margin: '5 5 5 5', height: 400, frame: true, fieldDefaults: { labelAlign: 'top', msgTarget: 'side' }, defaults: { anchor: '100%' }, items: [{ layout: 'column', border: false, items: [{ padding: '5', columnWidth: .5, border: false, layout: 'anchor', defaultType: 'textfield', items: [{ fieldLabel: ' Name', name: 'name', allowBlank: false, displayfield:'id',// anchor: '95%' }] }, { padding: '5', columnWidth: .5, border: false, layout: 'anchor', defaultType: 'textfield', items: [{ fieldLabel: 'First name', name: 'fname', allowBlank: false, anchor: '95%' }, { xtype: 'textarea', fieldLabel: 'Profile', name: 'prof', anchor: '95%' }] }], buttons: [{ text: 'Save', handler: function () { this.up('form').getForm().submit ({ url: 'AddData.ashx', params: { action: 'add' }, success: function (form, action) { Ext.MessageBox.show({ title: 'Success !', msg: 'User added successfully&lt;br /&gt;', icon: Ext.MessageBox.INFO, buttons: Ext.MessageBox.OK }) } }) }] </code></pre> <p>thank you</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