试图弹出包含一个表单的窗口,但表单未显示-extjs 5
Trying to pop-up window that contains a form, but form not shown - extjs 5
我正在尝试显示一个弹出窗口,其中包含extjs 5中的一个表单,使用django-rest作为后端。我设法显示了弹出窗口,但里面的表单没有显示。如果我只放一个html标记而不是表单,则会显示标记内容。我很困惑,因为我无法展示表格。任何帮助都将不胜感激。代码为:
- 控制器:
Ext.define('MyApp.controller.Manage', {
extend: 'Ext.app.Controller',
views: ['Manage'],
// controller initialisation
init: function() {
// save scope
var manageController = this;
console.log('manage controller started');
// instanciate view class but hide initially
this.view = this.getView('Manage').create().hide();
// Request manage variables (lastDayUpd)
Ext.Ajax.request({
url: '/api/manage/',
method: 'GET',
success: function(response, options){
console.log('got last day upd');
// Decode response
var res = Ext.util.JSON.decode(response.responseText).results[0].lastDayUpd;
console.log(res);
// Get manage panel from container
var cp = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('lastDayUpd');
// Set data to display last day updated
cp.setConfig('html', ('Last day updated: '+res));
},
failure: function(response, options) {
console.log('not got last day upd');
}
});
this.control({
// register for the logout-click
'#logoutButton': {
click: function() {
// mask the complete viewport
this.view.mask('Logout…')
// ask the login-controller to perform the logout in the backend
MyApp.getApplication().getController('Login').performLogout(function(success) {
if(!success) {
// return WITHOUT unmasking the main app, keeping the app unusable
return Ext.Msg.alert('Logout failed', 'Close and restart the Application')
}
// unmask and hide main viewport and all content
this.view.unmask();
this.view.hide();
// relaunch application
MyApp.getApplication().launch();
});
}
},
// register for click in the navigation tree
'#navTree': {
itemclick: function(tree, node) {
// ignore clicks on group nodes
// TODO: pass click on to first sub-item
// ignore clicks on non-leave nodes (groups)
if(!node.data.leaf)
return;
// pass the id of the clicked node to the content-panel
// enable the corresponding content view
this.getContentPanel().setActiveItem(node.data.itemId);
}
},
// Show update form to perform update
'#updButton': {
click: function(){
//alert('Clicked');
//navigationController.getController('Manage').view.show()
this.showUpdateForm();
}
}
});
},
showUpdateForm: function(){
// Get manage panel from container
var form = (Ext.ComponentQuery.query('container#manageContentPanel')[0]).getComponent('updateDaskalosBox').show();
console.log('form is:');
console.log(form);
console.log('show update form');;
},
});
- 视图:
Ext.define('MyApp.view.Manage', {
layout: 'border',
extend: 'Ext.container.Container',
renderTo: Ext.getBody(),
id: "manageContainer",
// todo: not resizing correctly
width: '100%',
height: '100%',
items: [{
region: 'west',
xtype: 'treepanel',
itemId: 'navTree',
width: 150,
split: true,
rootVisible: false,
title: 'Navigation',
tbar: [
{ text: 'Logout', itemId: 'logoutButton' }
]
},
{
region: 'center',
xtype: 'container',
itemId: 'manageContentPanel',
layout: {
type: 'border',
//columns: 3,
//deferredRender: true
},
items: [
{
itemId: 'lastDayUpd',
title: 'Manage Daskalos',
xtype: 'panel',
buttons: [
{
text: 'Update',
itemId: 'updButton'
},
{
text: 'Back',
itemId: 'backButton',
}
],
html: 'Last Day Updated: '
},
{
xtype: 'messagebox',
itemId: 'updateDaskalosBox',
layout: 'fit',
title: 'Update daskalos',
//html: 'A pop up',
//floating: true,
//closable : true,
items: [
{
xtype: 'panel',
itemId: 'updateDaskalosPanel',
//layout: 'fit',
items: [
{
xtype: 'form',
itemId: 'updateDaskalosForm',
//url: '', // to fill
layout: 'fit',
//renderTo: 'updateForm',
fieldDefaults: {
labelAlign: 'left',
labelWidth: 100
},
buttons: [
{
text: 'Update',
itemId: 'updButton',
formBind: true,
},
{
text: 'Cancel',
itemId: 'cancelButton',
}
],
items: [
//Just one field for now to see if it works
//{
//xtype: 'datefield',
////anchor: '100%',
//fieldLabel: 'From',
////name: 'from_date',
////maxValue: new Date() // limited to the current date or prior
//},
{
fieldLabel: 'Last Name',
name: 'last',
allowBlank: false
}
],
},
],
},
],
},
]
}
],
});
在控制器初始化之后,我希望当用户单击更新按钮时弹出一个窗口,其中包含一个将数据发布到服务器的表单。弹出窗口被抛出,但窗口中作为子项包含的面板内的窗体似乎有问题。有人看到我在这里想念什么了吗?
谢谢你的帮助!巴比斯。
为什么不创建一个包含表单的窗口?你的"弹出窗口"是一个你滥用的信息框。也没有必要在面板中放置表格。一个窗体从面板延伸出来。
//您的代码中有一些尾随逗号
Ext.define('MyApp.view.Manage', {
extend: 'Ext.window.Window',
alias : 'widget.manage',
requires: ['Ext.form.Panel'],
height: 300,
width: 600,
layout: 'fit',
resizable: false,
autoShow: true,
animCollapse:false,
iconCls: 'icon-grid',
initComponent: function() {
this.items = [{
xtype: 'form',
/*
*
* Start you code for form
*/
}];
this.callParent(arguments);
}
});
您希望在窗口中有一个窗体,但您能告诉我们为什么要扩展容器吗??
相关文章:
- 如何创建一个“;表单弹出框“;在chrome中右键单击时位于突出显示的单词上方
- jQuery动态表单显示在select选项上
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 将表单张贴到MailChimp,但显示动态成功页面
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- HTML多页表单显示隐藏部分,保留表单数据
- 使用JavaScript将数据从一个表单显示到另一个页面
- Php 搜索表单显示结果时无需按搜索按钮,而它应该等到按下按钮才能显示它们
- HTML:如何使一个表单显示在另一个表单之上
- 值通过表单提交,然后即使在提交并显示值之后,也会以表单显示已提交的值
- 提交时的 Jquery 表单显示成功消息
- 是否有可接受的跨平台方法在基于触摸的设备上以标准 Web 表单显示数字键盘
- 如何将表单显示从=更改为:
- 表单显示问题+数组下的结果
- 自动完成使用Alpaca表单显示密钥和值
- Google appscript表单显示供用户选择的数组值
- 引导提交表单显示从javascript计时器
- 表单显示PHP HTML
- 基于PHP ajax的表单显示空白页面
- ASP.NET表单显示另一个字段中基于节的表单字段