Question

我正在尝试使用django-rest作为后端，在extjs 5中显示一个包含表单的弹出窗口。我设法显示弹出窗口，但其中的表单未显示。如果我只放置一个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
											}							
										],
									},
								],
							},
						],
					},
				]
			}
	],
});

在控制器初始化之后，我希望当用户单击更新按钮以弹出包含将数据发布到服务器的表单的窗口时。抛出弹出窗口，但窗口包含的子窗体面板内的窗体似乎有问题。有谁看到我想念的东西？

感谢您的帮助！的Babis。

Answer 1

为什么你不创建一个包含表单的窗口？您的“弹出窗口”是一个消息框，您滥用。也没有必要在表格中放置表格。表格从面板延伸出来。

//代码中有一些尾随逗号

Answer 2

 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);
    }
});

你想要一个窗口中的表单，但是你能告诉你为什么要扩展容器吗？

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

2 个答案: