先介绍一下出错的步骤：
1. 通过左侧栏按钮打开“用户管理”
2. 单击用户管理Tab页关闭小叉：
现在只剩下首页“家庭管理系统”Tab页了
3.再点击左侧栏中按钮“用户管理” （这个时候就会报错``~~``)
上代码，请各位帮忙指点：
/**
* func: system - user - management
* author: jinshangkun
* date: 2013-09-28
*
*/
Ext.define('Biz.soft.system.user.UserModel',{
extend: 'Ext.data.Model',
fields:[
{name: 'id', type: 'int'},
{name: 'name', type: 'string'},
{name: 'password', type: 'string'},
{name: 'fullName', type: 'string'},
{name: 'level', type: 'int'},
{name: 'remark', type: 'string'},
{name: 'status', type: 'int'},
{name: 'createUserId', type: 'int'},
{name: 'createUserName', type: 'string'},
{name: 'createDatetime', type: 'date'},
{name: 'updateUserId', type: 'int'},
{name: 'updateUserName', type: 'string'},
{name: 'updateDatetime', type: 'date'}
]
});
Ext.define('Biz.soft.system.user.UserStore', {
extend: 'Ext.data.Store',
model: 'Biz.soft.system.user.UserModel',
autoLoad: true,
proxy:{
type: 'ajax',
url: 'system/userLoad.action',
reader: {
type: 'json',
root: 'users'
}
}
});
//数据表格
Ext.define('Biz.soft.system.userManagement.gridPanel',{
extend: 'Ext.grid.Panel',
store: Ext.create('Biz.soft.system.user.UserStore'),
title: '数据列表',
autoScroll: true,
columns: [
{ text: 'ID号', dataIndex: 'id', width: 50, sortable: true, hideable: false},
{ text: '名称', dataIndex: 'name' },
{ text: '密码', dataIndex: 'password' },
{ text: '全名', dataIndex: 'fullName' },
{ text: '级别', dataIndex: 'level' },
{ text: '备注', dataIndex: 'remark' },
{ text: '状态', dataIndex: 'status' },
{ text: '创建人ID', dataIndex: 'createUserId' },
{ text: '创建人名称', dataIndex: 'createUserName' },
{ text: '创建时间', dataIndex: 'createDatetime' },
{ text: '修改人ID', dataIndex: 'updateUserId' },
{ text: '修改人名称', dataIndex: 'updateUserName' },
{ text: '修改时间', dataIndex: 'updateDatetime' }
],
initComponent : function(){
console.log('component:'+this.$className+'-- init successfully');
this.callParent(arguments);
}
});
//查询表单
Ext.define('Biz.soft.system.user.QueryForm',{
extend: 'Ext.form.Panel',
title: '查询条件',
id: 'Biz_soft_system_user_QueryForm',
bodyPadding: 5,
layout: 'hbox',
defaultType: 'textfield',
items:[
{fieldLabel:'名称'},
{fieldLabel:'全名'}
],
buttons:[{
text: '查询',
handler: function() {
Ext.Msg.alert('提示','查询功能正在开发中...');
}
},{
text: '添加'
},{
text: '修改'
},{
text: '删除'
}
],
initComponent : function(){
console.log('component:'+this.$className+'-- init successfully');
this.callParent(arguments);
}
});
//页面窗体
Ext.define('Biz.soft.system.user.ViewPanel',{
extend: 'Ext.form.Panel',
id: 'sys_user_mng',
//itemId: 'sys_user_mng',
title: '用户管理',
closable: true,
//closeAction: 'hide',
//autoDestroy: false, //查资料说指定此属性，未能解决问题
defaults: {autoScroll:true},
//这里items如果把里面的俩元素去掉，也能正常，不会出现此问题，即 items:[],
items:[Ext.create('Biz.soft.system.user.QueryForm'),Ext.create('Biz.soft.system.userManagement.gridPanel')],
initComponent : function(){
console.log('component:'+this.$className+'-- init successfully');
this.callParent(arguments);
}
});
<script type="text/javascript" src="<%=basePath %>extjs/shared/include-ext.js"></script>
<script type="text/javascript" src="<%=basePath %>extjs/shared/options-toolbar.js"></script>
<script type="text/javascript" src="<%=basePath %>views/finance/itemManagement.js"></script>
<script type="text/javascript" src="<%=basePath %>views/system/userManagement.js"></script>
<script type="text/javascript">
Ext.require(['*']);
Ext.require(['Biz.soft.system.user.UserStore']);
Ext.onReady(function() {
Ext.QuickTips.init();
// NOTE: This is an example showing simple state management. During development,
// it is generally best to disable state management as dynamically-generated ids
// can change across page loads, leading to unpredictable results. The developer
// should ensure that stable state ids are set for stateful components in real apps.
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
// in this instance the TabPanel is not wrapped by another panel
// since no title is needed, this Panel is added directly
// as a Container
/**
* open a tab form, if havn't opened then open it else set it as active tab.
*/
openTabForm = function(viewId, formId) {
console.log('log:--> enter openTabForm method....');
var view = Ext.getCmp(viewId);
var tabFolder = Ext.getCmp('Biz.soft.hmsystem.main.TabPanels');
console.log('log:--> viewId:' + viewId + ',formId:' + formId + ',tabFolder:' + tabFolder + ',getCmp:' +view);
if(view==undefined) {
console.log('log:--> view form undefined, need create!');
var tabForm = Ext.create(formId);
tabFolder.add(tabForm);
tabFolder.setActiveTab(tabForm);
} else {
console.log('log:--> defined');
var childTab = Ext.getCmp('Biz.soft.hmsystem.main.TabPanels').child('#'+viewId);
tabFolder.setActiveTab(childTab);
}
/* if(view != null && view != 'undefined')
{
var exist = tabPanels.contains(view);
console.log(exist);
if(!exist){
var tab = tabPanels.add(view);
tabPanels.setActiveTab(tab);
} else {
var tab = tabPanels.child('#'+viewId);
tab.show();
tabPanels.setActiveTab(tab);
}
} else {
console.log('create - '+ view);
var itemForm = Ext.create(formId);
tabPanels.add(itemForm);
tabPanels.setActiveTab(itemForm);
} */
};
var viewport = Ext.create('Ext.Viewport', {
id: 'border-example',
layout: 'border',
items: [
// create instance immediately
Ext.create('Ext.Component', {
region: 'north',
height: 42, // give north and south regions a height
autoEl: {
tag: 'div',
html:'<div style=\"float: left\"><p><h3><font color=\'#EEE\'>欢迎使用BizSoft家庭管理综合平台 ---- 管理您的家庭日常事务</font></h3></p>'
+ '</div><div style=\"float: right;\"><h3><font color=\'#EEE\'> 当前用户：</font><font color=\'YELLOW\'>'+document.getElementById('userName').value+'</font> '
+ '<font color=\'#EEE\'>用户级别：</font><font color=\'YELLOW\'>超级管理员</font> '
+'<a href=\'<%=basePath%>logout.action\'>注销用户</a></h3></div>'
}
}), {
// lazily created panel (xtype:'panel' is default)
region: 'south',
contentEl: 'south',
split: true,
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
collapsed: true,
title: '版权所有',
margins: '0 0 0 0'
}, {
xtype: 'tabpanel',
region: 'east',
title: '我的最爱',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
items: [ '->', {
xtype: 'button',
text: 'test',
tooltip: 'Test Button'
}]
}],
animCollapse: true,
collapsible: true,
split: true,
width: 225, // give east and west regions a width
minSize: 175,
maxSize: 400,
margins: '0 5 0 0',
activeTab: 1,
tabPosition: 'bottom',
items: [{
html: '<p>查看最近操作记录，搜索功能.</p>',
title: '搜索查找',
autoScroll: true
}, Ext.create('Ext.grid.PropertyGrid', {
title: '常用提醒',
closable: true,
source: {
"(name)": "Properties Grid",
"grouping": false,
"autoFitColumns": true,
"productionQuality": false,
"created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"tested": false,
"version": 0.01,
"borderWidth": 1
}
})]
}, {
region: 'west',
stateId: 'navigation-panel',
id: 'west-panel', // see Ext.getCmp() below
title: '操作导航',
split: true,
width: 200,
minWidth: 175,
maxWidth: 400,
collapsible: true,
animCollapse: false,
margins: '0 0 0 5',
layout: 'accordion',
items: [
{
title: '账务管理',
//html: '<p>待生成子菜单树.</p>',
//contentEl: 'west',
iconCls: 'settings',
layout: 'vbox',
items:[
{
xtype: 'button',
text: '收支项目管理',
width: '100%',
handler: function() {
var viewId = 'fin-item-mng';
var formId = 'Biz.soft.finance.itemManangement';
openTabForm(viewId, formId);
}
},{
xtype: 'button',
text: '收支流水管理',
width: '100%',
handler: function() {
Ext.Msg.alert('info','收支流水管理模块正在开发中!');
}
}
]
},{
//contentEl: 'west',
title: '系统管理',
iconCls: 'nav', // see the HEAD section for style used
layout: 'vbox',
items:[{
xtype: 'button',
text: '用户管理',
width: '100%',
handler: function() {
var viewId = 'sys_user_mng';
var formId = 'Biz.soft.system.user.ViewPanel';
openTabForm(viewId, formId);
}
},{
xtype: 'button',
text: '权限管理',
width: '100%'
}
]
}, {
title: '事务管理',
html: '<p>待生成子菜单树.</p>',
iconCls: 'info'
}]
},
Ext.create('Ext.tab.Panel', {
id: 'Biz.soft.hmsystem.main.TabPanels',
region: 'center', // a center region is ALWAYS required for border layout
deferredRender: false,
activeTab: 0, // first tab initially active
items: [{
contentEl: 'center1',
title: '家庭管理系统',
closable: false,
autoScroll: true
}, {
contentEl: 'center2',
title: '消息平台',
autoScroll: true,
hidden: true
}]
})
]
});
// get a reference to the HTML element with id "hideit" and add a click listener to it
/*
Ext.get("hideit").on('click', function(){
// get a reference to the Panel that was created with id = 'west-panel'
var w = Ext.getCmp('west-panel');
// expand or collapse that Panel based on its collapsed property state
w.collapsed ? w.expand() : w.collapse();
});
*/
});
</script>
</head>
我是刚接触Ext的，请懂Ext的朋友们，帮我看看是哪里的原因，非常感谢！
添加评论
关注(1)
相关推荐
Extjs4.2 设置tabpanel当前活动页签的样式 Extjs是一个流行的JavaScript框架，用于构建丰富互联网应用程序（RIA）。其中，tabpanel是Extjs中一个常用的控件，用于显示多个面板。设置tabpanel当前活动页签的样式是...
EXTJS4.2官网上的tabpanel的右键关闭当前页，关闭其它，关闭全部有一点小BUG。 修改TabCloseMenu.js文件的一下函数。 压缩文件里面就是修改过后的TabCloseMenu.js文件，只要替换当前4.2的那个文件就可以使用了！
EXTjs4.2中文版是EXTjs框架的一个重要版本，EXTjs是一个强大的JavaScript库，专门用于构建用户界面，尤其适用于创建富互联网应用程序（Rich Internet Applications，简称RIA）。它以其组件化的设计理念，丰富的UI...
在本实践项目“SpringMVC+ExtJs4.2实例”中，我们将深入探讨如何将SpringMVC框架与ExtJs4.2前端框架相结合，构建一个功能完善的Web应用程序。这个项目旨在展示如何利用这两个强大的技术栈来实现数据的动态交互和用户...
01.教程简介_ExtJS4.2简介_SSH2基本框架搭建 02.编写几个通用的service方法、设计数据库 03.搭建ExtJS的MVC框架 04.主界面的搭建、登录功能和菜单树的生成 05.创建菜单树、前台保存用户信息 06.菜单树响应事件、我的...
这是利用sencha cmd 生成的GridFilterDemo工程中的app和build文件夹，其余文件过大并且与主题无关,因此未包含。具体方法，请参看我的博客: 《Extjs4.2 Grid Filter Feature 表格过滤特性》
ExtJs4.2没有直接提供下拉树这个组件，但是有例子可以用，文件位置：ext-4.2.1.883\examples\ux\TreePicker.js 但是它有点小毛病吧：默认显示了根节点；达到最小高度时再展开节点，高度不能自动调整。 所以我做了一...
EXTJS4.2学习入门教程 EXTJS4.2学习入门教程 EXTJS4.2学习入门教程
Extjs官方文档 帮助你更好的学习Extjs,同事这里面的代码是最完整，最规范的。
ExtJS 4.2 是一个流行的JavaScript框架，用于构建富客户端Web应用程序。它提供了一套完整的组件库，包括数据管理、图表、表格、菜单、工具栏等，使得开发者能够创建功能丰富的、交互式的用户界面。这本书籍《ExtJS ...
根据提供的文件信息，本文将详细解释ExtJs 4.2中Window组件的一些常用配置属性以及方法，帮助读者更好地理解和使用这些功能。 ### ExtJs 4.2 Window 组件概述 ExtJs 是一个基于 JavaScript 的开源框架，用于创建...
Extjs4.2入门教程详解，及API文档。
在这个“下拉(条件)搜索实例”中，我们看到开发者利用ExtJS 4.2实现了一个交互式的用户界面，其中包含了下拉菜单和条件搜索功能。 下拉搜索通常指的是在输入框中使用下拉列表作为候选选项的搜索方式，用户可以快速...
用Ext编写的多文件上传组件，已封装。 支持多文件上传，文件下载，文件删除，
WMC2.0-Client.zip是一个基于Extjs4.2的开发框架，其实是个只有大框架的，并没有其他功能，您可能会骂我标题党“通用权限管理系统,通用后台模板”，呵呵，其实不是这样的。 整个WMC系统分为WMC2.0-Server服务端...
ExtJs4.2正式版
extjs 4.2 jsb2 4.2没有自带jsb2文件
EXTJS 4.2 Desktop MVC 是一个基于EXTJS 4.2版本的桌面应用程序框架，它结合了MVC（Model-View-Controller）设计模式，为开发者提供了构建富客户端桌面应用的强大工具。EXTJS是一个流行的JavaScript库，专门用于创建...
标题 "nodejs+extjs4.2+mysql" 暗示了这是一个使用 Node.js、ExtJS 4.2 和 MySQL 数据库构建的项目。这个项目的核心是利用这些技术搭建了一个基本的框架，使得开发者可以方便地在此基础上添加自己的业务逻辑和功能。...