Sencha Ext JS 4,使用另一个面板创建可拖动面板时出现问题

本教程将介绍Sencha Ext JS 4,使用另一个面板创建可拖动面板时出现问题的处理方法,这篇教程是从别的地方看到的,然后加了一些国外程序员的疑问与解答,希望能对你有所帮助,好了,下面开始学习吧。

Sencha Ext JS 4,使用另一个面板创建可拖动面板时出现问题 教程 第1张

问题描述

我试着在sencha论坛上问这个问题,但没有任何运气:
http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner

我正在尝试在另一个面板中添加一个小面板,并允许用户在屏幕上拖动它。

Ext.define('CS.view.StartScreen', { extend: 'Ext.panel.Panel',
 alias: 'widget.startscreen',
 items: [{
  xtype: 'panel',
  title: 'Hello',
 //  closable: true,
 //  collapsible: true,
  draggable: true,
 //  resizable: true,
 //  maximizable: true,
  constrain: true,
  height: 300,
  width: 300
 }],
 dockedItems: [{
  xtype: 'toolbar',
  dock: 'bottom',
  layout: 'hbox',
  pack: 'center',
  items: [
{xtype: 'button', text: 'Click Me'}
  ]
 }]
});

但是,每当我尝试拖动面板时,它都会捕捉回左上角。有人能告诉我我做错了什么吗?谢谢!


编辑%1
有问题的应用程序的完整代码:

app.js

Ext.Loader.setConfig({
 enabled: true
});

Ext.application({
 name: 'CS',

 appFolder: 'ccms/app',
 autoCreateViewport: true,

 controllers: [
  'TestCreator',
  'Primary',
  'Manager'
 ],

 launch: function(){

 }
});

TestCreator.js

Ext.define('CS.controller.TestCreator', {
 extend: 'Ext.app.Controller',

 views: [
  'testcreator.ViewTestCreator'
 ],

 init: function(){

  console.log('testcreator init');

  this.control({

  });

 }
});

Primary.js

Ext.define('CS.controller.Primary',{
 extend: 'Ext.app.Controller',

 views: [
  'ViewLogin',
 ],

 init: function(){

  this.control({
'viewport': {
 afterrender: function(viewport, opts){

  viewport.add([{
xtype: 'viewlogin',
itemId: 'viewlogin'
  }]);

 }
},
'viewlogin button[text = Submit]': {
 click: function(btn, e, eOpts){

  var form = btn.up('form').getForm();
  form.submit({
success: function(form, action){

 console.log(action.result);

 btn.up('viewport').remove('viewlogin');
 var viewport = Ext.ComponentQuery.query('viewport');

 if(viewport.length > 0)
  viewport[0].add({xtype: 'dashboard'});

},
failure: function(form, action){

},
scope: this
  });

 }
}
  });

 }

});

Manager.js

Ext.define('CS.controller.Manager', {
 extend: 'Ext.app.Controller',

 views: [
  'ViewDashboard'
 ],

 init: function(){

  this.control({
'viewport > formbuilder': {
 render: function(){
  console.log('render yo');
 }
}
  });

 }
});

Viewport.js

Ext.define('CS.view.Viewport', {
 extend: 'Ext.container.Viewport',
 layout: 'fit'
})

ViewLogin.js

 Ext.define('CS.view.ViewLogin',{
 extend: 'Ext.panel.Panel',
 alias: 'widget.viewlogin',
 layout: {
  type: 'vbox',
  align: 'center',
  pack: 'start'
 },
 items: [{
  flex: 1,
  border: false
 },{
  xtype: 'form',
  url: '/index.php/auth',
  baseParams: {
csrf_token: Ext.util.Cookies.get('ci_csrf'),
cs_method: 'user_login'
  },
  width: 300,
  layout: 'anchor',
  title: 'Login',
  defaults: {
margin: '5 5 5 5'
  },
  items: [{
 xtype: 'textfield',
 fieldLabel: 'Username',
 inputType: 'text',
 name: 'username'
},{
 xtype: 'textfield',
 fieldLabel: 'Password',
 inputType: 'password',
 name: 'password'
}],
  buttons: [{
 text: 'Reset',
 handler: function() {
  console.log('button pressed');
  this.up('form').getForm().reset();
 }
},{
 text: 'Submit'
}]
 },{
  flex: 2,
  border: false
 }]
});

ViewDashboard.js

Ext.define('CS.view.ViewDashboard', {
 extend: 'Ext.panel.Panel',
 alias: 'widget.dashboard',
 layout: 'fit',

 bodyStyle: {"background-color":"#FF6600"},

 items: [{
  xtype: 'testcreator'
 }],

 dockedItems: [{
  xtype: 'toolbar',
  dock: 'bottom',
  layout: 'hbox',
  pack: 'center',
  items: [{
 xtype: 'splitbutton', 
 text: 'Applications',
 handler: function(){
  console.log('splitbutton');
 },
 menu: new Ext.menu.Menu({
  items: [
{text: 'Item 1', hander: function(){}},
{text: 'Item 2', hander: function(){}},
  ]
 })
  }]
 }],
 listeners: {
  render: function(sender){

console.log(sender);

sender.dropZone = new Ext.dd.DropZone(sender.body, {

 getTargetFromEvent: function(e) {

  console.log('getTargetFromEvent');

  var temp = { 
x: e.getX() - this.DDMInstance.deltaX, 
y: e.getY() - this.DDMInstance.deltaY
  };

  console.log(temp);
  return temp;

 },

 // On entry into a target node, highlight that node.
 onNodeEnter : function(target, dd, e, data){ 
 // Ext.fly(target).addCls('my-row-highlight-class');
 },

 // On exit from a target node, unhighlight that node.
 onNodeOut : function(target, dd, e, data){ 
 // Ext.fly(target).removeCls('my-row-highlight-class');
 },

 onNodeOver : function(target, dd, e, data){ 
  return Ext.dd.DropZone.prototype.dropAllowed;
 },

 onNodeDrop : function(target, dd, e, data){

  console.log('onNodeDrop');
  data.panel.setPosition(50, 50, true);
  return true;

 }
});



  }
 }
});

TestCreator.js

Ext.define('CS.view.testcreator.ViewTestCreator', {
 extend: 'Ext.panel.Panel',

 alias: 'widget.testcreator',

 layout: {
  type: 'hbox',
  pack: 'start',
  align: 'stretch'
 },

 draggable: true,
 title: 'Form Builder',

 width: 600,
 height: 450,

 dockedItems: [{
  xtype: 'toolbar',
  dock: 'top',
  layout: 'hbox',
  items: [{
text: 'File'
  },{
text: 'Edit'
  },{
text: 'Help'
  }]
 }],

 items: [{
  html: 'panel 1',
  flex: 1
 },{
  html: 'panel 2',
  flex: 2
 }]
});

推荐答案

您必须为CS.view.StartScreen实现drop zone。例如,您可以将以下呈现处理程序添加到代码中:

render: function(sender) {
 sender.dropZone = new Ext.dd.DropZone(sender.body, {

  getTargetFromEvent: function(e) {
return { 
 x: e.getX() - this.DDMInstance.deltaX, 
 y: e.getY() - this.DDMInstance.deltaY
};
  },

  onNodeOver : function(target, dd, e, data){ 
return Ext.dd.DropZone.prototype.dropAllowed;
  },

  onNodeDrop : function(target, dd, e, data){
data.panel.setPosition(target.x, target.y);
return true;
  }
 });
}

工作示例:http://jsfiddle.net/lolo/5MXJ9/2/

好了关于Sencha Ext JS 4,使用另一个面板创建可拖动面板时出现问题的教程就到这里就结束了,希望趣模板源码网找到的这篇技术文章能帮助到大家,更多技术教程可以在站内搜索。