- 浏览: 73397 次
- 性别:
- 来自: 大连
-
文章分类
最新评论
-
007ylj：
...
ExtJS+mybatis+springMVC做的一个Web桌面系统，部分模块发布预览一下。 -
980109763：
[i][i][i][i]sdfdsfsdfds [/ ...
java利用反射机制完成所有hibernate的模糊、非模糊查询。可以按条件查询 -
923080512：
谢谢
ExtJS做的一个信息管理界面。每一句都带有注释，可以当教科书用
前段时间公司让我们学习ExtJS，学习了一个礼拜，完成了个小练习，思来想去决定做个总结，但是又懒得敲word，于是就在代码上每行都加上注释，以后忘记了就翻开来看看。 在这里给出代码。 完成的功能如图所示。 /**
* 默认页面
*
* @author leaves.qq:1330771552
*/
Ext.define('SupplyManagementDesktop.defaultsWindow', {
extend : 'Ext.ux.desktop.Module',
requires : ['Ext.data.ArrayStore', 'Ext.util.Format', 'Ext.grid.Panel',
'Ext.grid.RowNumberer', 'Ext.ux.LiveSearchGridPanel'],
id : 'defaultsWindow-win',
/***************************************************************************
* ExtJS控件使用按照如下规则。 首先，创建控件，调用Ext.create
* weightName:空间命名空间，args：空间参数，用{}包围，当做对象传入
*
* ####################################### 注意JS中有如下语法： var object={
* paramter1:value1, paramter2:value2, paramter3:value3 }
* object.paramter1可以直接获得value1 #####################################
*
* ExtJS中所有空间创建方法都如上
*
* Ext.create(String weightName,Mixed args)
* 所以此处args相当于一个匿名对象（没有引用），但并非真的匿名对象
*
*/
// 初始化窗体的方法
init : function() {
this.launcher = {
text : 'Defaults Window',
iconCls : 'icon-grid',
// 调用createWindow方法
handler : this.createWindow,
scope : this
// this指向Ext.define（这个方法用来声明命名空间。）定义的命名空间
};
},// 初始化窗体的方法结束
// 创建窗体的方法
createWindow : function() {
// 下面进行预定义。就好像C里面的 先定义后使用。不然后定义的在前面使用会认为未初始化。（猜测：可能不跟JS一样，属于ExtJS的语法）
var dataPanel;// 预定义一个GridPanel，用来显示数据
var innerPanel;// 存放Panel的容器
var workerPanel;
var westPanel;
var deptStore;
var moduleObj = this;// 创建windows窗体的时获取下本身的环境,此处不能确定，这个this是指向Ext.define还是指向创建的这个窗体
var desktop = this.app.getDesktop();
// 获取窗体，外部最大窗体，具体方法不清楚。
var win = desktop.getWindow('defaultsWindow-win');
// 创建按钮bar组件,是上面的几个按钮。
var buttonBar = Ext.create('Ext.toolbar.Toolbar', {
dock : 'top',
items : [{
xtype : 'button',
text : '新建',
iconCls : 'add',
handler : function() {
// 自行新建操作，传入一个create字符串用来标示是什么按钮事件，传入dataPanel（注意：上面没有var
// dataPanel;此处会报错。）因为后面的新建需要用到表格显示的数据（dataPanel.getSelectionModel().getSelection()）
moduleObj.proAction("create", dataPanel,
workerPanel);
}
}, {
// 分隔符，不解释。
xtype : 'tbseparator'
}, {
xtype : 'button',
text : '删除',
iconCls : 'remove',
handler : function() {
moduleObj.proAction("delete", dataPanel);
}
}, {
xtype : 'tbseparator'
}, {
xtype : 'button',
text : '复制',
iconCls : 'copy',
handler : function() {
moduleObj.proAction("copy", dataPanel, workerPanel);
}
}, {
xtype : 'button',
text : '重置检索',
iconCls : 'reset',
handler : function() {
dataPanel.resetSearch();
}
}]
});// 创建按钮bar组件结束
// 临时创建的一个用来展示的store
var theStore = Ext.create('Ext.data.Store', {
fields : [{
name : 'projectId',
type : 'String'
}, {
name : 'projectCode',
type : 'String'
}, {
name : 'projectName',
type : 'String'
}, {
name : 'startDate',
type : 'String'
}, {
name : 'endDate',
type : 'string'
}, {
name : 'qualityTarget',
type : 'string'
}, {
name : 'projectLeader',
type : 'string'
}, {
name : 'projectStatus',
type : 'string'
}, {
name : 'qualification',
type : 'string'
}, {
name : 'constructionUnit',
type : 'string'
}],
pageSize : 20,// 每页显示数量。此处设置可以在向后台申请数据的时候“自动”传参一个
// limit和satrt，start不需要指定ExtJS会自动计算，然后传值。
proxy : {
type : 'ajax',// 使用传输方式为ajax（ajax是异步执行的操作，即不需要刷新页面即可申请后台资源。）
method : 'POST',// post和get是HTML中表单（form）提交两种方式，get会在地址栏显示参数，post不显示
url : '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
+ 0,
reader : {// 设置读取方式属性
type : 'json',// 设置读取方式格式为：json字符串
root : 'root',// 设置根元素，即读取上面fields种的name中对应值的元素，此处多为元素组，json字符串如：{A:a,B:[{},{},{},………………]}
totalProperty : 'totalProperty'// 设置总页码
}
},
autoLoad : true
// 自动读取，即显示绑定该store的组件的时候直接读取数据
});
// 创建临时Store结束
// 创建分页bar组建
var pagebar = Ext.create('Ext.toolbar.Paging', {
pageSize : 20,
store : theStore,
dock : 'bottom',
setActive : false,
refresh : false,
displayInfo : true,
plugins : Ext.create('Ext.ux.ProgressBarPager', {})
});
// 创建分页bar组建结束
// 为theGirdPanel创建一个SelectionModel
var selectionModeltoGridPanel = Ext
.create('Ext.selection.CheckboxModel'); // 想要能进行选择或者多选，就需要设置selModel属性这是设置selection的模型，创建一个模型Ext.selection.CheckboxModel
// 初始化gridPanel
dataPanel = Ext.create('Ext.ux.LiveSearchGridPanel', {
title : '<font color=red>工程详细信息</font>',
region : 'center',
width : '100%',
height : '96%',
store : theStore,
selModel : selectionModeltoGridPanel,
// 一系列行，不解释，也可以var column=[`````````]然后columns:column
iconCls : 'remove',
columns : [{
dataIndex : 'projectId',
width : 80,
text : '项目号'
}, {
dataIndex : 'projectCode',
width : 80,
text : '项目序号'
}, {
dataIndex : 'projectName',
width : 100,
text : '项目名称'
}, {
dataIndex : 'constructionUnit',
width : 100,
text : '建设单位'
}, {
dataIndex : 'startDate',
width : 80,
text : '开工日期'
}, {
dataIndex : 'endDate',
width : 80,
text : '竣工日期'
}, {
dataIndex : 'qualityTarget',
width : 100,
text : '质量目标'
}, {
dataIndex : 'projectLeader',
width : 100,
text : '项目负责人'
}, {
dataIndex : 'projectStatus',
width : 80,
text : '项目状态'
}, {
dataIndex : 'qualification',
width : 80,
text : '需要资质'
}],
dockedItems : [buttonBar, pagebar]
});
// 绑定dataPanel鼠标双击事件。
dataPanel.on('itemdblclick', function() {
moduleObj.proAction("update", dataPanel, workerPanel);
});
// 初始化gridPanel结束
// 为下面的部门信息分类栏（grid）创建一个store数据用jsonu读取/Training/DeptInfoController/getAllDeptInfo.action地址申请到的资源。
deptStore = Ext.create('Ext.data.Store', {
fields : [{
name : 'deptId',
type : 'String'
}, {
name : 'deptName',
type : 'String'
}],
proxy : {
type : 'ajax',
method : 'POST',
url : '/Training/DeptInfoController/getAllDeptInfo.action',
reader : {
type : 'json',// 用json字符串
root : 'root'
}
},
autoLoad : true
});
// 创建部门信息分类栏，
workerPanel = Ext.create('Ext.grid.Panel', {
title : '部门信息',
border : false,
store : deptStore,
hideHeaders : true,
columns : [{
dataIndex : 'deptId',
hidden : true,
sortable : false,
width : 180
}, {
dataIndex : 'deptName',
sortable : false,
width : 180
}]
});
// 给部门信息的grid绑定事件，当单击的时候触发事件，此事件用来刷新右侧列表
workerPanel.on('itemclick', function(grid, record) {
// 获取当前行的deptId列的值
var id = record.data.deptId;
// dataPanel.store：获取dataPanel的store属性的值，dataPanel.store.proxy获取数据来源属性，ataPanel.store.proxy.url获取数据来源属性的URL，
// 这个方法用来重新设置数据来源的地址，
// 注意：后面的?deptId是HTML传参方法，地址栏传参。跟form直接传参一样，后台可以接受。
dataPanel.store.proxy.url = '/Training/myProjectInfoController/getAllProjectInfo.action?deptId='
+ id;
dataPanel
.setTitle("<font color=red>"
+ (workerPanel.getSelectionModel().getSelection())[0].data.deptName
+ "</font>部门信息");// ExtJS中的标题等字符串属性支持HTML语言，直接设置格式。
dataPanel.store.load();// dataPanel.store：获取dataPanel的store属性的值，dataPanel.store.load()：调用取得的值的load()方法,用来重新加载store数据，实现grid刷新
});
// 初始工人信息Panel，同下
workerPane2 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
title : 'BBBBBB',// 随便取标题
border : false,// 没有边框
store : theStore,
hideHeaders : true,
columns : [{
dataIndex : 'projectName',
sortable : false,// 不能排序
width : 180
}]
});
// 初始工人信息Panel，用来实现折叠效果的panel
workerPanel3 = Ext.create('Ext.grid.Panel', {// Ext.grid.Panel可以直接显示grid的panel不需要create一个Grid放置panel中
title : 'CCCCCCC',// 随便取标题
border : false,// 没有边框
store : theStore,
hideHeaders : true,// 隐藏grid每列数据的标题
columns : [{
dataIndex : 'projectName',
sortable : false,// 不能排序
width : 180
}]
});
// 左边伸缩栏
westPanel = Ext.create("Ext.panel.Panel", {
collapsible : true,// 这个属性设置此panel容易可以隐藏（最小化）
title : '分类查看',
layout : 'accordion',// 这个属性设置此panel容易可以实现折叠效果
width : 200,
region : 'west',
iconCls : 'reset',
items : [workerPanel, workerPane2, workerPanel3]
// 放置三个小panel容器，如上定义
});
// 创建容器，用来存放整个窗体的组件，并且在下面直接放置到win中。
theContainer = Ext.create('Ext.container.Container', {
layout : 'border',
items : [dataPanel, westPanel]
});
// 判断是否已经创建最外边窗体，如果创建了，（JS是弱类型语言，认为null相当于false）
if (!win) {
win = desktop.createWindow({ // 所以此处的目的是：如果win已经初始化存在了，那么就不新创建窗体，直接调用下面的show（）方法
// 下面属性不具体解释，详细可以查看API手册
id : 'defaultsWindow-win',
title : '工程详细信息设置',
width : 1100,
height : 600,
iconCls : 'icon-grid',
animCollapse : false,
constrainHeader : true,
layout : 'fit',
items : [theContainer]
// 把创建好存放所有组件的窗体放置到外围窗体中
});
}
win.show();// 显示窗体。
return win;// 把窗体的句柄（相当于内存引用）返回
},
// 创建窗体的方法结束
// 显示一个对话框的方法，暂时带有一个用来判断是什么按钮的属性
proAction : function(btn, dataPanel, workerPanel) {
var selectData;// 预设一个用来存放被选中的数据的变量
var innerPanel;
// 如果选择的是复制
if ("copy" == btn) {
if (dataPanel.getSelectionModel().getSelection().length == 0) {
Ext.hx.msg("提示", "请先选择您要复制的行");
return;
}
selectData = (dataPanel.getSelectionModel().getSelection())[dataPanel
.getSelectionModel().getCount()
- 1].data;// 如果是删除的话需要读取被选中的数据，就初始化被selectData。
}
// 如果选择的是新建
if ("create" == btn) {
// 新建的时候设置选择的行为null，没有值。也就不会在创建的panel中显示当前行。此处是因为在复制的时候会去读取。
selectData = null;
}
// 如果选择的是复制
if ("update" == btn) {
selectData = (dataPanel.getSelectionModel().getSelection())[0].data;// 先取出所有的记录组成的数组。
}
// 如果选择的是删除
if ("delete" == btn) {
var oneDate;// 预设一个用来存放一条数据进行操作的变量
var records = dataPanel.getSelectionModel().getSelection();// 先取出所有的记录组成的数组。
// 判断如果还没有选择任何行就提示并且返回方法
if (records.length == 0) {
Ext.hx.msg("提示", "请先选择您要删除的行");
return;
}
// 遍历所有的数组然后设置里面的各种标志
var array = new Array();// 预设一个用来存放新的data的数组
for (var i = 0; i < records.length; i++) {
oneDate = records[i].data;// 取出其中一条
oneDate.deleteFlg = true;// 设置删除标志
array.push(oneDate);// 放置到数组中
}
// 用ajax来进行后台交互
Ext.Ajax.request({
url : '/Training/myProjectInfoController/deleteProjectInfo.action',
method : 'POST',
success : function(res, opts) {// 交互成功的时候
Ext.hx.msg("提示", '删除成功!');// 提示
dataPanel.store.load();// 表格数据刷新
},
failure : function(res, opts) {
Ext.hx.msg("提示", '删除失败!');
},
params : {
jsonString : Ext.JSON.encode(array)
// 调用ExtJS内置对象的方法，把数组转换成json字符串
},
scope : this
// 作用范围本页。//具体不知道，没用。、
});
return;// 执行完成操作马上返回，不执行下面代码。
}
/* 下面定义一系列用来输入的文本框 */
deptBoxStore=Ext.create('Ext.data.Store', {
fields : [{
name : 'deptId',
type : 'String'
}, {
name : 'deptName',
type : 'String'
}],
proxy : {
type : 'ajax',
method : 'POST',
url : '/Training/DeptInfoController/getAllDeptInfo.action',
reader : {
type : 'json',// 用json字符串
root : 'root'
}
},
autoLoad : true
});
// 下面是一个下来选择菜单，用来下拉选择部门。
var dptBox = Ext.create("Ext.form.field.ComboBox", {
fieldLabel : '部门选择',
store :deptBoxStore ,
displayField : 'deptName',
valueField : 'deptId',
allowBlank : false,// 不允许为空
editable : false,// 不允许编辑
x : 10,
y : 20
});
//设置上面部门选择的Combox默认值
deptBoxStore.load({
callback : function(records) {
dptBox.setValue(workerPanel.getSelectionModel().getSelection().length==0?null:(workerPanel.getSelectionModel().getSelection())[0].data.deptId);
}
});
// 各种输入框，制定value（默认值）在没有selectData是null（即if ("create" ==
// btn)的时候）设置为“”（空字符串），否则分别取出选择行的每一个数据。作为默认数据，
var projectIdField = Ext.create('Ext.form.field.Text', {
fieldLabel : '项目号',
x : 10,
y : 20,
value : selectData != null ? selectData.projectId : ""
});
var projectCodeField = Ext.create('Ext.form.field.Text', {
fieldLabel : '项目序号',
x : 10,
y : 50,
value : selectData != null ? selectData.projectCode : ""
});
var projectNameField = Ext.create('Ext.form.field.Text', {
fieldLabel : '项目名称',
allowBlank : false,
blankText : '不可以为空',
x : 10,
y : 80,
value : selectData != null ? selectData.projectName : ""
});
var constructionUnitField = Ext.create('Ext.form.field.Text', {
fieldLabel : '建设单位',
x : 10,
y : 110,
value : selectData != null
? selectData.constructionUnit
: ""
});
var startDateField = Ext.create('Ext.form.field.Date', {
format : 'Y-m-d h:m:s ',
fieldLabel : '开工日期',
blankText : '不可以为空',
allowBlank : false,
x : 10,
y : 140,
value : selectData != null
? selectData.startDate
: new Date()
});
var endDateField = Ext.create('Ext.form.field.Date', {
format : 'Y-m-d h:m:s ',
fieldLabel : '竣工日期',
blankText : '不可以为空',
allowBlank : false,
x : 10,
y : 170,
value : selectData != null
? selectData.endDate
: new Date()
});
var qualityTargetField = Ext.create('Ext.form.field.Text', {
fieldLabel : '质量目标',
x : 10,
y : 200,
value : selectData != null ? selectData.qualityTarget : ""
});
var projectLeaderField = Ext.create('Ext.form.field.Text', {
fieldLabel : '项目负责人',
x : 10,
y : 230,
value : selectData != null ? selectData.projectLeader : ""
});
var projectStatusField = Ext.create('Ext.form.field.Text', {
fieldLabel : '项目状态',
x : 10,
y : 260,
value : selectData != null ? selectData.projectStatus : ""
});
var qualificationField = Ext.create('Ext.form.field.Text', {
fieldLabel : '需要资质',
x : 10,
y : 290,
value : selectData != null ? selectData.projectStatus : ""
});
var submitButton = Ext.create('Ext.button.Button', {
text : '确定',
x : 10,
y : 320,
value : selectData != null ? selectData.projectStatus : "",
handler : function() {
var arr = new Array();
// 上面说道的JS的定义对象的方法，
/**
* ####################################### 注意JS中有如下语法： var
* object={ paramter1:value1, paramter2:value2, paramter3:value3 }
* object.paramter1可以直接获得value1
* #####################################
*/
var data = {
projectId : projectIdField.getValue(),
projectCode : projectCodeField.getValue(),
projectName : projectNameField.getValue(),
constructionUnit : constructionUnitField.getValue(),
startDate : startDateField.getValue(),
endDate : endDateField.getValue(),
qualityTarget : qualityTargetField.getValue(),
projectLeader : projectLeaderField.getValue(),
projectStatus : projectStatusField.getValue(),
qualification : qualificationField.getValue(),
deptId : dptBox.getValue(),
modifyFlg : "update" == btn ? true : false
};
// 上面定义的data有了projectId，projectCode，······deptId，modifyFlg这些属性，可以直接data.modifyFlg取得值。
if (!confirm("确定？")) {// confirm("确定？")弹出对话框，显示确定？点击是的时候返回true，此处判断如果端机否，直接返回方法不执行下面语句。
return;
}
arr.push(data);// 把设置好属性的data对象放置到arr数组中。
// 用AJAX跟后台交互。
Ext.Ajax.request({
url : '/Training/myProjectInfoController/saveProjectInfo.action',
params : {
jsonString : Ext.JSON.encode(arr)
},
success : function(response) {
Ext.hx.msg("提示", "成功");
var dialog = Ext.getCmp('theDialog');// Ext.getCmp（String
// comID）;传入组件ID，返回组件句柄（内存引用）
dataPanel.store.load(); // 刷新panel不解释
dialog.close();// 把窗体关闭（不显示）
dialog.destroy();// 把窗体销毁（清空内存）
},
failure : function(response) {// 失败提示
Ext.hx.msg("提示", "失败");
}
});
}
});
var resetButton = Ext.create('Ext.button.Button', {
text : '重置',
x : 70,
y : 320,
value : selectData != null ? selectData.projectStatus : "",
handler : function() {
/*
* API上抄来的，不知道什么意思。 up( String selector ) : Container
* Walks up the ownerCt axis looking for an ancestor
* Container which matches the passed simple selector.
*/
this.up('form').getForm().reset();// 查找form上面的form（记住这么用吧，说不清楚。仔细看
// innerPanel =
// Ext.create('Ext.form.Panel',
// {
// 这句就知道了。）向上找form元素获取form表单，然后重置
}
});
// 创建用来进行输入的文本框数组
/**
* 此处使用的是Ext.form.Panel目的是为了上面的this.up('form').getForm().reset();
*/
innerPanel = Ext.create('Ext.form.Panel', {// 创建一个表单控件，
id : 'innerPanel',
height : "100%",
width : "100%",
layout : {
type : 'absolute'
},
id : 'innerPanel',
waitMsgTarget : true,// 显示错误提示的小叹号
fieldDefaults : {
labelWidth : 85,
msgTarget : 'side'// 错误提示的字体
},
items : [dptBox, projectCodeField, projectNameField,
constructionUnitField, startDateField, endDateField,
qualityTargetField, projectLeaderField, projectStatusField,
qualificationField, submitButton, resetButton]
});
// 准备好一个用来显示窗体的dialog，实际上是一个窗体
var dlalog = Ext.create('Ext.window.Window', {
id : 'theDialog',
title : '要点击之后显示的窗体',
height : 500,
width : 300,
layout : 'fit',
items : [innerPanel],
modal : true
// 模态窗体，显示的时候不允许操作后面的控件。
});
dlalog.show();
}
// 显示一个对话框的方法结束
});
谢谢发表评论
-
ExtJS+mybatis+springMVC做的一个练习。找了个免费试用的地方挂了下。
2012-10-29 23:21 0http://jx00053.w05.163jsp ... -
ExtJS+mybatis+springMVC做的一个练习。找了个免费试用的地方挂了下。
2012-10-29 22:57 7http://jx00053.w05.163jsp.com/s ... -
ExtJs开发教程_002_如何使用ExtJs中的Ext.data.TreeStore
2012-08-10 11:28 1950这个组件继承自Ext.data.AbstractSt ... -
ExtJs开发教程_001_Ext.data.Store使用方法详解
2012-07-11 09:04 7140本系列教程基本可以看做是ExtJS API中文版+实例演 ... -
ExtJs开发教程_001_Ext.data.Store使用方法详解
2012-07-11 09:01 2本系列教程基本可以看做是ExtJS API中文版+ ... -
如何汉化ExtJs4.X官方没有汉化的组件。
2012-06-02 01:38 1354首先做下说明： 这个方法使用范围是ext所有范围，也就是说包括 ... -
ExtJs+php学习长连接comet技术开端。
2012-04-21 12:15 0传统AJAX技术 JavaScript 调用 ... -
用javaScript做的一个map
2012-04-10 21:26 893lmap = function() { this.k ...
相关推荐
总结来说，这个"extjs通用后台管理界面"是一个使用ExtJS框架精心设计的后台管理界面模板，具备良好的用户体验和实用性。开发者可以通过下载和研究"Ext_Demo"压缩包，学习ExtJS的使用技巧，快速构建自己的后台管理...
本文将详细介绍一个使用ExtJS开发的图书管理系统，该系统同时结合了Spring和iBATIS作为其核心架构组件。 首先，ExtJS是一个流行的JavaScript库，用于构建桌面级的Web应用程序。它提供了丰富的UI组件，如表格、窗口...
7. **学习价值**：对于初学者来说，这个例子提供了一个实践SSH整合的实战平台，可以深入理解每个框架在实际项目中的作用，以及它们如何协同工作。通过调试和修改代码，可以进一步提升对SSH和ExtJS的理解。 总结来说...
下载的一套extjs的一套封装管理界面，修改了几个bug，倒是挺好用的。
ExtJS是一个基于JavaScript的开源前端框架，它提供了丰富的用户界面组件和数据处理机制，能够创建具有桌面应用程序般体验的Web应用。 ### ExtJS的基本功能和优势 ExtJS支持跨浏览器的控件，这意味着开发者不需要为...
在ExtJS中，每个UI元素都是一个组件，它们可以通过组合和配置来创建复杂的用户界面。事件模型允许组件之间进行交互，而数据绑定则实现了视图和数据源的动态同步。 接下来，我们深入探讨ExtJS 5的新特性。这个版本...
- **组件属性设置**：每个添加的组件都有其详细的属性设置，包括尺寸、位置、样式等，可以通过属性面板进行调整。 - **事件绑定**：在Designer中可以直观地为组件添加事件监听器，如点击、改变等，方便实现交互...
在本文中，我们将深入探讨基于ExtJS 4.0的几个关键概念，这些概念对于初学者来说是非常...在实际开发中，你还可以探索更多高级特性，如布局管理、组件通信、数据存储、远程数据同步等，这些都是ExtJS强大功能的一部分。
采用ExtJS-4.0.7版本，使得前端也有MVC开发模式，并且利用json来配置管理界面，将界面分成了3个部分，一个是查询界面，一个是操作条，一个是表格，一个操作打开一个新界面，操作按钮执行什么操作均可配置，可以配置...
在“extjs实现用户登录界面”这个主题中，我们将深入探讨如何利用ExtJS创建一个功能完善的登录界面。 首先，登录界面通常包含用户名、密码输入框以及登录按钮。在ExtJS中，这些可以通过创建`Ext.form.Panel`来实现...
extjs实现一个后台管理框架，界面美观，可换主题颜色
extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器extjs界面生成器
2. **界面设计器功能**：这款设计器提供了一个所见即所得的环境，开发者可以在其中预览UI布局。它可以支持添加、删除、移动和调整组件大小，以及更改组件的样式和行为。此外，设计器还允许修改组件属性，如颜色、...
总结来说，"extjs做界面的jsp系统"是一个集成了前端、后端和数据库的完整Web应用实例，适合学习者研究ExtJS的UI设计，Java的Struts框架，以及MySQL数据库的使用。通过这个项目，开发者可以了解到如何将这些技术有效...
通过精心设计的权限系统，可以确保每个用户都能获得符合其角色的定制化界面，同时避免了敏感信息的不当暴露。在实际项目中，开发人员应深入理解EXTJS的组件模型和事件驱动机制，以便有效地实施权限控制策略。
在本项目中，"ExtJs做到学生信息管理系统，Mysql数据库"，意味着开发人员利用ExtJs来设计前端界面，并结合Java和JSP技术，以及Mysql数据库来实现了一个学生信息管理的系统。 首先，让我们深入了解一下ExtJs的关键...
extjs 做的桌面应用程序界面，只是前台的界面， 没有后台代码
基于SpringBoot+FreeMarker+MyBatis+ExtJs实现的一个通用后台管理系统，界面美观，适合快速迭代开发 项目说明 技术栈： SpringBoot MyBatis Redis MySQL FreeMarker ExtJs 基于SpringBoot+FreeMarker+MyBatis+...