Results 1 to 2 of 2

Thread: Modal Window inside a Grid Panel

  1. #1

    Default Modal Window inside a Grid Panel

    Hey guys!

    I have some concern here, why is it that the items on the modal window doesn't shows up. here's the code.
    Code:
    Ext.require([
    	'Ext.form.*',
    	'Ext.tip.QuickTipManager'
    ]);
    
    
    Ext.onReady(function() {
    	Ext.QuickTips.init();
    
    
    	var required = '<span style="color:red;font-weight:bold" data-qtip="Required">*</span>';
    
    
    	var panel = Ext.create ('Ext.grid.Panel', {
    		renderTo : Ext.getBody(),
    		id: 'show_panel',
    		autoLoad: true,
    		// store : 
    		// width : 900,
    		// height : 800,
    		title: 'Products in the Database',
    
    
    		dockedItems: [{
    			xtype:'toolbar',
    			dock: 'top',
    
    
    			items: [
    			{
    				xtype: 'label',
    				text: 'Search',
    				style: 'padding: 5px; text-align: left',
    				width: 50
    			},
    			{
    				xtype: 'trigger',
    				triggerCls: Ext.baseCSSPrefix + 'form-search-trigger',
    				width: 500,
    				name: 'prod_search_key',
    				allowBlank: true,
    				style: 'margin-left: 5px'
    			},
    			{
    				xtype: 'button',
    				text: 'Add Product',
    				handler: addProduct
    			}]
    		},
    		{
    			xtype: 'pagingtoolbar',
    			// store:
    			dock: 'bottom',
    			displayInfo: true,
    			displayMsg: 'Dispaying products {0} - {1} of {2}',
    			emptyMsg: 'No products to display'
    		}],
    
    
    		columns: [
    			{
    				text: 'Product SKU',
    				flex: 1,
    				sortable : true,
    				hideable: false,
    				dataIndex: 'prod_sku'
    			},
    			{
    				text: 'Product Name',
    				flex: 1,
    				sortable: true,
    				hideable: false,
    				dataIndex: 'prod_name'
    			},
    			{
    				text: 'Product Price',
    				flex: 1,
    				sortable: true,
    				hideable: false,
    				dataIndex: 'prod_price'
    			},
    			{
    				text: 'Product Count',
    				flex: 1,
    				sortable: true,
    				hideable: false,
    				dataIndex: 'prod_count'
    			}
    		]
    	});
    
    
    	function addProduct() {
    		console.log ('HEHEHE');
    		Ext.QuickTips.init();
    		var addProductWindow;
    
    
    		if(!addProductWindow) {
    			var product_form = Ext.widget ('form', {
    				renderTo : Ext.getBody(),
    				id: 'prod_form_modal',
    				layout: 
    				{
    					type: 'vbox',
    					align: 'stretch'
    				},
    				border : false,
    				bodyPadding: 10,
    				fieldDefaults: 
    				{
    					labelAlign : 'top',
    					labelWidth : 100,
    					labelStyle : 'font-weight:bold'
    				},
    				defaults:
    				{
    					margins: '0 0 10 0'
    				},
    
    
    				items: [{
    		            fieldLabel: 'Product SKU',
    		            afterLabelTextTpl: required,
    		            name: 'prod_sku',
    		            allowBlank: false
    		        },{
    		            fieldLabel: 'Product Name',
    		            afterLabelTextTpl: required,
    		            name: 'prod_name',
    		            allowBlank: false 
    		        }, {
    		            fieldLabel: 'Product Price',
    		            afterLabelTextTpl: required,
    		            name: 'prod_price',
    		            allowBlank: false
    		        }, {
    		            fieldLabel: 'Product Count',
    		            afterLabelTextTpl: required,
    		            name: 'prod_count',
    		            allowBlank: false
    		        }],
    			});
    
    
    			var addProductWindow = Ext.widget('window', {
                    title: 'Add a Product',
                    closeAction: 'close',
                    width: 500,
                    height: 200,
                    minHeight: 250,
                    layout: 'fit',
                    resizable: true,
                    modal: true,
                    items: product_form
                });
    		}
    
    
    		addProductWindow.show();
    	}
    });
    So basically there is a grid panel named panel.

    What I did was i created a form named product_form, and a window named addProductWindow. and used product_form as an item in the addProductWindow. add whenever I click the Add Product button the modal will show up with the fields. but it doesnt,.

    this is the image

    Capture.jpg

  2. #2
    Sencha User
    Join Date
    Feb 2013
    Location
    California
    Posts
    11,985
    Answers
    506

    Default

    How about if you set the xtype in your defaults config?
    Code:
               defaults: {
                    margins: '0 0 10 0',
                    xtype: 'textfield'
                },

Similar Threads

  1. [CLOSED] [4.1 B1] Modal Window rendered inside a Window
    By Sharkanana in forum Ext:Bugs
    Replies: 2
    Last Post: 4 Jan 2012, 1:30 PM
  2. Modal dialog inside window
    By defcon1 in forum Ext 3.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2010, 9:03 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •