2012-12-28 67 views
1

。以下是代码:EXTJS4-当窗口中的组件(下拉菜单,网格,按钮等)在窗口(Ext.Window)中不显示网格时,窗口中的组件未显示网格

<%@ page language="java" contentType="text/html; charset=ISO-8859-1" 
    pageEncoding="ISO-8859-1"%> 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> 
<title>Super User Access Management</title> 
<link rel="stylesheet" href="http://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"> 
    <script type="text/javascript" charset="utf-8" src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script> 
    <script type="text/javascript"> 

Ext.onReady(function() { 
    Ext.define('SuperUser', { 
     extend: 'Ext.data.Model', 
     fields: [ 
      { name: 'fname', type: 'string' }, 
      { name: 'lname', type: 'string' }, 
      { name: 'email', type: 'string' }, 
      { name: 'uid', type: 'string' }, 
      { name: 'isSup', type: 'boolean' }, 
      { name: 'upDate', type: 'string' }, 
      { name: 'upBy', type: 'string' } 
     ] 
    }); 

    var win=new Ext.Window({ 
     title: 'Super User Access Management', 
     border:false, 
      items  : [ 
      { 
      xtype  : 'combo', 
      fieldLabel : 'Module', 
      value: 'Super Admin' , 
      store: ['Super Admin', 'Partner Contact Management', 'Partner Trainning Management'], 
      listeners: { 
       select: function(){ 
       alert('Hello module!'); 
       } 
      }   
      }, 
      { 
       xtype: 'gridpanel', 
       border: false, 
       store: Ext.create('Ext.data.Store', { 
        storeId: 'supUserStore', 
        pageSize: 3, 
        model:'SuperUser', 
        data: [ 
          { fname: 'Jane',lname:'Smith',email: '[email protected]', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'[email protected]' }, 
          { fname: 'Jim',lname:'Smith',email: '[email protected]', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'[email protected]' }, 
          { fname: 'Jane',lname:'Smith',email: '[email protected]', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'[email protected]' }, 
          { fname: 'Jim',lname:'Smith',email: '[email protected]', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'[email protected]' }, 
          { fname: 'Jane',lname:'Smith',email: '[email protected]', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'[email protected]' }, 
          { fname: 'Jim',lname:'Smith',email: '[email protected]', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'[email protected]' }, 
          { fname: 'Jane',lname:'Smith',email: '[email protected]', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'[email protected]' }, 
          { fname: 'Jim',lname:'Smith',email: '[email protected]', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'[email protected]' }, 
          { fname: 'Jane',lname:'Smith',email: '[email protected]', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'[email protected]' }, 
          { fname: 'Jim',lname:'Smith',email: '[email protected]', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'[email protected]'} 
         ], 
        proxy: { type: 'memory', reader: { type: 'json', root: 'data',totalProperty:10} } 
       }), 
       selModel: Ext.create('Ext.selection.CheckboxModel'), 
       columns: [ 
          { header: 'First Name', dataIndex: 'fname' }, 
          { header: 'Last Name', dataIndex: 'lname' }, 
          { header: 'Email', dataIndex: 'email' }, 
          { header: 'User ID', dataIndex: 'uid' }, 
          { header: 'Super Admin', dataIndex: 'isSup' }, 
          { header: 'Updated Date', dataIndex: 'upDate' }, 
          { header: 'Updated By', dataIndex: 'upBy' } 
         ], 
         dockedItems: [{ 
          xtype: 'pagingtoolbar', 
          store: Ext.data.StoreManager.lookup('supUserStore'), 
          dock: 'bottom', 
          displayInfo: true 
         }], 
         initComponent: function() { 
          this.callParent(arguments); 

         } 
       } 

      ] 
    }); 
    win.show(); 

}); 
    </script> 
</head> 
<body> 

</body> 
</html> 

请请让我知道,在这里我做wrong.Or让我知道,我怎么能在EXTJS结合不同的组件。我不想在HTML正文中的div标记中呈现不同的组件。

回答

1

删除网格配置中的initComponent方法。如果您需要覆盖现有的方法,请使用Ext.define创建子类,以便callParent按预期工作。

几个关于您的代码注释(不涉及您的问题):

  1. 创建您的商店,并提到它在相同的配置对象是前途未卜。您应该在配置之外创建商店,并使用store: "supUserStore"而不是自己执行StoreManager查找。

  2. 网格列上的header属性已被弃用一段时间。首选房产被称为text

  3. 创建窗口后,您可以使用autoShow: true配置,而不是调用win.show()

+0

感谢您的建议埃里克。我确实创建了外部网格,并在窗口项目中将网格变量用作xtype。它解决了这个问题。 –

+0

我很高兴你的问题解决了。如果您觉得我的答案令人满意,请点击左边的复选标记将其标记为已接受。 – Eric