PDA

View Full Version : Drag and Drop betweens two TreePanels in FormPanel



Madefh
23 Sep 2009, 12:08 PM
Hello.

I'm new with ExtJS, I used some years ago (1.x version :">) and today I have a new demand to use it (or YUI, hahaha).

Well, I read some tutorials, tried that and I made work: Layout, Menu Accordeon, GRID with Sort/Filter/Paging/Toolbars and Form to provide data to the user, all using XHR/JSON.

Well, my problem is with th TreePanels. The example (http://www.extjs.com/deploy/dev/examples/tree/two-trees.js) that I need I made work perfectly standalone, as been my GRID/Form.

The problem is to use the Drag'n'Drop TreePanel (like sample) with my FormPanel. I tried some methods but every time the form ain't loaded. Although, I putted the Tree (normal Tree onto FormPanel without problems).

The question: How can I turn both working?

Sorry by English :)

MiamiCoder
23 Sep 2009, 1:12 PM
Please post your code.

Madefh
23 Sep 2009, 2:11 PM
MiamiCoder, thanks for reply.

Well, I think that the grid are not important, then, I'll post my form.


var ProfileForm = Ext.extend(Ext.Window, {
id: 0,
modal: true,
constrain: true,
maximizable: true,
width: 600,
height: 500,
title: '<?php echo $this->i18n->_('profile.form.title'); ?>',
layout: 'fit',
closeAction: 'hide',
setid: function(id) {
this.id = id;
},
constructor: function() {
this.addEvents({salvar: true, excluir: true});
ProfileForm.superclass.constructor.apply(this, arguments);
},
initComponent: function() {
this.formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding:10px;',
border: false,
autoScroll: true,
defaultType: 'textfield',
defaults: {anchor: '-19'},
items:[
{fieldLabel: '<?php echo $this->i18n->_('profile.form.name.text'); ?>', name: 'name', allowBlank: false, maxLength: 255}
]
});
Ext.apply(this, {
items: this.formPanel,
bbar: [
'->',
{text: '<?php echo $this->i18n->_('grid.form.save'); ?>',iconCls: 'icon-save',scope: this,handler: this._onBtnSalvarClick},
this.btnExcluir = new Ext.Button({text: '<?php echo $this->i18n->_('grid.form.delete'); ?>', iconCls: 'silk-delete', scope: this, handler: this._onBtnDeleteClick}),
{text: '<?php echo $this->i18n->_('grid.form.cancel'); ?>', iconCls: 'silk-cross', scope: this, handler: this._onBtnCancelarClick}
]
});
ProfileForm.superclass.initComponent.call(this);
},
show: function() {
this.formPanel.getForm().reset();
ProfileForm.superclass.show.apply(this, arguments);
if(this.id !== 0) {
this.btnExcluir.show();
this.el.mask('<?php echo $this->i18n->_('grid.form.loading'); ?>');
this.formPanel.getForm().load({
url: '<?php echo $this->url(array('controller' => 'profile', 'action' => 'get'), null, true); ?>',
params: {
id: this.id
},
scope: this,
success: this._onFormLoad
});
} else {
this.btnExcluir.hide();
}
},
onDestroy: function() {
ProfileForm.superclass.onDestroy.apply(this, arguments);
this.formPanel = null;
},
_onFormLoad: function(form, request) {
this.el.unmask();
},
_onBtnSalvarClick: function() {
var form = this.formPanel.getForm();
if(!form.isValid()) {
Ext.Msg.alert('<?php echo $this->i18n->_('grid.form.alert.title'); ?>', '<?php echo $this->i18n->_('grid.form.alert.invalid'); ?>');
return false;
}
this.el.mask('<?php echo $this->i18n->_('grid.form.saving'); ?>');
form.submit({
url: '<?php echo $this->url(array('controller' => 'profile', 'action' => 'save'), null, true); ?>',
params: {
id: this.id
},
scope:this,
success: function() {
this.el.unmask();
this.hide();
this.fireEvent('salvar',this);
}
});
},
_onBtnDeleteClick: function() {
Ext.Msg.confirm('<?php echo $this->i18n->_('grid.form.confirm.title'); ?>', '<?php echo $this->i18n->_('grid.form.confirm.delete'); ?>', function(opt) {
if(opt === 'no') {
return;
}
this.el.mask('<?php echo $this->i18n->_('grid.form.deleting'); ?>');
Ext.Ajax.request({
url: '<?php echo $this->url(array('controller' => 'profile', 'action' => 'delete'), null, true); ?>',
params: {
id: this.id
},
scope: this,
success: function() {
this.el.unmask();
this.hide();
this.fireEvent('excluir', this);
}
});
}, this);
},
_onBtnCancelarClick: function() {
Ext.Msg.confirm('<?php echo $this->i18n->_('grid.form.confirm.title'); ?>', '<?php echo $this->i18n->_('grid.form.confirm.cancel'); ?>', function(opt) {
if(opt === 'yes') {
this.hide();
}
}, this);
}
});

The code have some PHP code, but it's why i'm using I18N + Zend Framework and I'm sure that is not the problem.