试图弹出包含一个表单的窗口,但表单未显示-extjs 5

Trying to pop-up window that contains a form, but form not shown - extjs 5

本文关键字:表单 显示 -extjs 窗口 包含一      更新时间:2023-09-26

我正在尝试显示一个弹出窗口,其中包含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);
    }
});

您希望在窗口中有一个窗体,但您能告诉我们为什么要扩展容器吗??