PDA

View Full Version : drag and drop



MohamedFawzy_
12 Feb 2013, 3:30 AM
hello ,

i'm using extjs 4 and i'm create panel Ext.panel.panel

this panel generic that's mean when i add new contact will generate the same panel

my issue drag working correctly but drop not


here's my code

this for add new contact
Contact.js file



Ext.define('UserApp.view.uiTypes.Contacts',{
extend: 'Ext.panel.Panel',
tbar: [
{
text: 'Add Contact',
itemId: 'addContact'
}
],
items: [],
initComponent: function() {
this.callParent(arguments);
this.down('#addContact').on('click',Ext.bind(this.addContact,this));
this.addContact();
},
addContact: function(val){
var contact = Ext.create('UserApp.view.uiTypes.ContactItem');

if(val)
contact.setValue(val);

this.add(contact);
contact.down('#removeContact').on('click',Ext.bind(this.removeContact,this,[contact]));
},
removeContact: function(contact){
this.remove(contact);
},
getValue: function(){
var items = this.items;
var result = [];
for( var i=0; i<items.getCount(); i++){
result.push(items.getAt(i).getValue());
}
return result;
},
removeAllContacts: function(){
var items = this.items;
for( var i=items.getCount(); i>=0; i--){
this.removeContact(items.getAt(i));
}
},
setValue: function(value){
this.removeAllContacts();

for(var i=0; i<value.length; i++){
this.addContact(value[i]);
}
},
loadContacts: function(url, record_id){
var me = this;
Ext.Ajax.request({
url: url,
params: {
table: this.table,
record_id: record_id
},
success: function(response){
var result = Ext.JSON.decode(response.responseText);
me.setValue(result.records);
}
});

}
});





and this for panel including contact item



/*
* Add custom field for validation extjs standrad library
*/
Ext.apply(Ext.form.field.VTypes,{
custom: function(val, field){
// lets try and catch our code for better error handling
try{
var recordValue = field.up('panel').down('combo').getStore().findRecord('id', field.up('panel').down('combo').getValue());
if(!recordValue){
return true;
}
var regexValue = new RegExp(recordValue.get('regex'));
// function excuted when field is validate return true when field's value (val) is valid
return regexValue.test(val);
}
catch(e){
return false;
}
},

customText: 'Your input must be valid'


});




Ext.define('UserApp.view.uiTypes.ContactItem',{
extend: 'Ext.panel.Panel',
width: '100%',
height: 22,
border: 0,
draggable: true,
layout: {
type: 'hbox',
align: 'stretch'
},
items: [{
xtype: 'combo',
itemId: 'contact_id',
flex: 1,
store: Ext.create('UserApp.store.Contact'),
displayField: 'name',
valueField: 'id',
editable: false,
name: 'contact_id',
},{
xtype: 'textfield',
name:'custom_label',
itemId: 'custom_label',
emptyText: 'enter your custom text here ....'
},{
xtype: 'hidden',
itemId: 'hidden_contactId',
name: 'hidden_contactId'
},{
xtype: 'textfield',
flex: 1,
itemId: 'value',
vtype: 'custom',
emptyText: 'enter your value here .....'

},{
xtype: 'checkboxfield',
boxLabel : 'Hide',
name: 'hide',
itemId: 'hide'
},{
xtype: 'checkboxfield',
boxLabel: 'Preferred',
name: 'preferred',
itemId: 'preferred'


},{
xtype:'checkboxfield',
boxLabel: 'Custom',
name: 'label',
itemId: 'label',
listeners: {
change : function() {
if(this.getValue()){ // checked
this.up('window').down("#custom_label").show();
}else{
this.up('window').down("#custom_label").hide();
}
}
}
},{
xtype: 'button',
text: 'Remove',
itemId: 'removeContact'
}],
initComponent: function(){
this.callParent(arguments);
this.down("#custom_label").hide();
},

getValue: function(){
// determine which values sent
var result = {
contact_id: this.down("#contact_id").getValue(),
value: this.down('#value').getValue(),
hide: this.down('#hide').getValue(),
preferred: this.down('#preferred').getValue(),
label: this.down("#label").getValue(),
custom_label: this.down("#custom_label").getValue()
};

if(this.down('#id')!=null && parseInt(this.down('#id').getValue())>0)
result.id = this.down('#id').value;

return result;
},

setValue: function(value){
this.down('#contact_id').setValue(value.contact_id);
this.down('#value').setValue(value.value);
this.down('#hide').setValue(value.hide);
this.down('#preferred').setValue(value.preferred);
this.down("#label").setValue(value.label);
this.down("#custom_label").setValue(value.custom_label);
;; if(value.id)
this.add({
xtype: 'hidden',
itemId: 'id',
value: value.id
});
},

checkValue: function(v){

console.log(arguments);
var recordValue = this.down('combo').getStore().findRecord('id', this.down('combo').getValue());
var regex = new RegExp(recordValue.get('regex'));
return regex.test(v)?true:"Invalid Input";
}
});





it's drag okay but for example when i drag panel on other one should be dropped after drag just like Ext.grid.Panel but it's not it's just but twice in same position what's is missing here ?

mitchellsimoens
13 Feb 2013, 8:37 PM
I don't see where you are handling drop.

MohamedFawzy_
13 Feb 2013, 11:52 PM
okay can you write drop handler because i'm tried Ext.dd.proxy and DropZone but nothing working correctly would you help me in that case ?