当我试图在一个窗口(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: 'j.smith@netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith@netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith@netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith@netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith@netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith@netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith@netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith@netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jane',lname:'Smith',email: 'j.smith@netapp.com', uid: 'jsmith',isSup:false,upDate:'11-19-2012',upBy:'aaron@netapp.com' },
{ fname: 'Jim',lname:'Smith',email: 'jm.smith@netapp.com', uid: 'jmsmith',isSup:true,upDate:'11-23-2012',upBy:'aaron@netapp.com'}
],
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>
请让我知道我在哪里做错了。或者让我知道如何在 EXTJS 中组合不同的组件。我不想在 html 正文的 div 标签中呈现不同的组件。