0
我試着問這個問題上的煎茶論壇，沒有任何運氣創建可拖動面板： http://www.sencha.com/forum/showthread.php?175816-Attempting-to-create-draggable-panel-within-another-panel-stuck-in-upper-left-corner煎茶的Ext JS 4，麻煩與另一個面板
我試圖另一個面板中添加一個小面板並允許用戶在屏幕上拖動它。
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
}]
});
感謝這些信息它幫助。但是我遇到了另一個問題，我按照你在我的父面板上所建議的那樣實現了dropzone，但是當我開始拖動時，子（可拖動）面板似乎在屏幕上跳得很遠。我現在正在努力解決這個問題，但是你是否對可能發生的事情有所瞭解？ –
我抓住了你可以在這裏看到的行爲的一個快照：http://youtu.be/ve6762fXUBo –
這不是爲我發生的（見我的答案中的例子）。你使用哪個版本的Ext JS？或者，也許這是瀏覽器相關的問題？ – Krzysztof