首页 > 代码库 > 项目Extjs前台开发模版
项目Extjs前台开发模版
今天趁着给大一大二的学生上课，整理下项目的前台源码，便于以后使用：
//<!-- js页面模板 -->
//此模板实现是所有常见的功能，如下拉列表，时间，网页编辑器，都对应一个案例，大家可以模仿开发其他功能。
//下面每个要注意的点我都标注了，仔细粘贴，避免错误,建议大家ctrl+f对同名替换，保证属性一致哈。
var ss = null;
Ext.onReady(function() {
Ext.BLANK_IMAGE_URL = 'ExtJs/resources/images/default/s.gif';
Ext.QuickTips.init();
var sm = new Ext.grid.CheckboxSelectionModel();
var smUseableRoleInfo = new Ext.grid.CheckboxSelectionModel();
var smChooseRoleInfo = new Ext.grid.CheckboxSelectionModel();
keyConvert = function() {
if (event.keyCode == 13 && event.srcElement.type != "button") {
event.keyCode = 9;
}
};
//！！定义整个jsp页面显示顺序，显示查询表单，在是Grid，注意看items，这些属性如selectStockInForm要保证和下面的一一对应，可用ctrl+f查看都有哪些
new Ext.Viewport({
layout : 'border',
items : [selectStockInForm,stockInGrid]
});
//!!页面定义完成
//!!刚前Grid列表store加载数据，就是我们页面Grid显示的列表，
//以stockInStore为例，大家替换改成自己定义的store,url、root、totalProperty、fields改成自己的参数，
var stockInStore = new Ext.data.JsonStore({
proxy : new Ext.data.HttpProxy({
//改成自己的action，_前缀是struts配置名，后缀是action层对应方法名
url : 'StockIn_queryStockIn.action'
}),
//Grid列表返回对象集合名，set、get方法对应集合名
root : 'items_StockIn',
//Grid列表返回集合条数，set、get方法对应其名
totalProperty : 'totalProperty',
//Grid列表对应对象的属性，注意是Grid对象属性值，参考对象实体表
fields : ['pkInId', 'fkGoodId', 'inNum',
'inDate', 'fkInOperatorId', 'inDesc','state']
// autoLoad : false
});
//上面URL提交传递的参数，start、limit分页属性
stockInStore.load({
params : {
start : 0,
limit : 20
}
});
//!!Grid列表store加载数据完毕
//!!用户下拉列表store加载数据开始，和上面一样
var userStore = new Ext.data.JsonStore( {
url : "Users_queryUsers.action",
root : "items_Users",
totalProperty : "totalProperty",
fields : [ {
name : "id",
mapping : "id"
}, {
name : "name",
mapping : "truename"
} ]
})
userStore.load( {
params : {
start : 0,
limit : 100
}
});
//!!用户下拉列表store加载数据结束
//！！页面中查询的Form面板开始，注意renderTo、title属性修改
selectStockInForm = new Ext.form.FormPanel(
{
title : '查询条件',
renderTo : 'stockIn',//要和jsp页面div的id一致
labelAlign : 'right',
buttonAlign : 'center',
layout : 'column',
region : 'north',
frame : true,
collapsible :true,
defaultType : 'textfield',
padding : 10,
hight : 100,
items : [{
layout : 'column',
xtype : 'fieldset',
title : '入库查询', //修改成自己的title
labelAlign : 'right',
items : [{
//上面这个{对应的面板列数，就是我们看到的三个列
columnWidth : .3,
layout : 'form',
labelWidth : 80,
items : [{
//上面这个{对应的面板行数，对行列修改时，要注意比对{}删除
//还有就是{}对应的“,”，看清楚是字母的逗号
fieldLabel : '操作员 ',
//type类型为下拉列表
xtype : 'combo',
anchor : '80%',
//对应我们要加载的store，用户store看上面
store : userStore,
//valueField和上面maping对应name一致
valueField : "name",
displayField : "name",
mode : 'local',
forceSelection : true,
emptyText : '--请选择--',
//传到后台的属性，注意改成自己对象的名和参数
hiddenName : 'stockIn.fkInOperatorId',
editable : false,
triggerAction : 'all',
//标记此id是唯一的(也可以不做，这里便于区分)，我们后面用这个id获取hiddenName值
id : 'stockIn.fkInOperatorId.show',
allowBlank : false //看清楚，每列（{}末尾）没有“,”,千万小心
}]
},{
columnWidth : .3,
layout : 'form',
labelWidth : 80,
items : [{
//type类型是文本
xtype : 'textfield',
//传到后台的属性，注意改成自己对象的名和参数
name : 'stockIn.fkGoodId',
id : 'stockIn.fkGoodId.show',
fieldLabel : '商品名称',
allowBlank : true,
anchor : '80%'
}]
},{
columnWidth : .3,
layout : 'form',
labelWidth : 80,
items : [{
//type类型是时间类型
xtype : 'datefield',
fieldLabel : '最后修改日期',
id : 'stockIn.inDate.show',
name : 'stockIn.inDate',
//页面显示时间类型格式
format:'Y-m-d',
editable : false,
allowBlank : false,
anchor : '80%'
}]
}]
}],
buttons : [{
text : '查询',
iconCls : 'icon-accept',
cls : 'right-part',
handler : function() {
//getCmp内对应的值是上面属性的ID，我用+.show做的区分，大家注意
var createDate = Ext.getCmp('stockIn.inDate.show').getValue();
if(createDate!=''){
//做去“-”处理
createDate=createDate.format('Ymd');
}
stockInStore.proxy = new Ext.data.HttpProxy(
{
//处理的时间参数要直接由？+属性参数传到后台，参数名对应对象属性
url : 'StockIn_selectStockIn.action'+'?stockIn.inDate='+createDate
});
stockInStore.load( {
params : {
start : 0,
limit : 20,
//看下面代码区别加.show和不加的区别
'stockIn.fkGoodId' : Ext.getCmp('stockIn.fkGoodId.show').getValue(),
//传递参数在start、limit基础上添加除时间外的属性，注意最后一行没有“,”
'stockIn.fkInOperatorId' : Ext.getCmp('stockIn.fkInOperatorId.show').getValue()
}
});
}
}, '-', {
text : '重置',
iconCls : 'icon-reset',
handler : function() {
selectStockInForm.form.reset();
},
cls : 'right-part'// ,
}]
});
//！！页面中查询的Form面板开始
//！！创建用于展示的grid开始，stockInGrid替换成自己的grid名，注意renderTo的修改
var stockInGrid = new Ext.grid.GridPanel({
renderTo : 'stockIn',
store : stockInStore,
sm : sm,
id : 'stockInGrid',
// height : defaultHeight,
region : 'center',
keys : [{
key : [13],
fn : keyConvert
}],
//类似excel的头行说明，所有参数和store加载属性一致，属性和对象实体表名称要一致
columns : [sm, {
//隐藏Id属性，
header : 'pkInId',
dataIndex : 'pkInId',
hidden : true,
sortable : false
},{
header : '商品名称',
sortable : true,
width : 150,
dataIndex : 'fkGoodId',
//类似超链接，使用JavaScript：方法名，下面有对应方法实现
renderer : function(value) {
return "<a href=javascript:update() title = '查看'>" + value + "</a>"
} //注意这里也是末尾没有“,”
}, {
header : '商品数量',
sortable : true,
width : 100,
dataIndex : 'inNum'
}, {
header : '入库时间',
sortable : true,
width : 100,
dataIndex : 'inDate'
}, {
header : '操作者',
sortable : true,
width : 100,
dataIndex : 'fkInOperatorId'
}, {
header : '描述',
sortable : true,
width : 100,
dataIndex : 'inDesc'
}],
//列表上方的功能选项
tbar : [{
text : '入库登记',
tooltip : '入库登记',
iconCls : "icon-add",
handler : function() {
//这些之前视频讲过，不做介绍
addForm.form.reset();
winTitle = "入库登记";
addWin.setTitle(winTitle);
addWin.show();
}
}, '-', {
text : '修改信息',
tooltip : '修改被选择的登记信息',
iconCls : "icon-edit",
handler : function() {
//和上面超链接一致，指向方法名
update();
}
}, '-', {
text : '删除信息',
tooltip : '删除被选择的登记记录',
iconCls : "icon-del",
handler : function() {
_record = stockInGrid.getSelectionModel().getSelections();
flag = stockInGrid.getSelectionModel().getSelected();
if (_record.length == 0) {
Ext.Msg.alert('警告', '请选择你要删除的记录！');
} else {
Ext.MessageBox.confirm('确认删除', '你确认要删除该记录吗？',
function(btn) {
if (btn == "yes") {
var jsonData = "";
// 向Action中传输需要删除的记录的pkInId的拼接字符串，“,”分割
for (var i = 0; i < _record.length; i++) {
ss = _record[i].get("pkInId");
if (i == 0) {
jsonData = jsonData + ss;
} else {
jsonData = jsonData + ","
+ ss;
}
}
Ext.Ajax.request({
//对应提交*_下的删除方法
url : "StockIn_delStockIn.action",
params : {
//要传递的拼接参数，String型
delData : jsonData
},
success : function(from, action) {
stockInStore.reload();
Ext.Msg
.alert('成功',
'删除成功！');
},
failure : function(form, action) {
Ext.Msg
.alert('失败',
'删除失败！');
}
});
}
});
}
}
}],
bbar : [{
//分页实现，加载前面的store，使用位置通配符
xtype : 'paging',
pageSize : 20,
//对应Grid列表的那个Store
store : stockInStore,
displayInfo : true,
displayMsg : '显示第 {0} 条到 {1} 条记录，一共 {2} 条',
emptyMsg : "没有记录"
}]
});
//！！创建用于展示的grid结束
//！！将id转换为name，我们直接在数据库存储名称，所以方法注释掉
// function?fishname(val){??
// return?fishStore.queryBy(function(rec){???
// return?rec.data.id?==?val;?
// ?}).itemAt(0).data.name;?
// }
//!!添加窗口，内含添加的form表单addForm，名字可不改
addWin = new Ext.Window({
layout : 'form',
width : 650,
height : 450,
modal : true,
resizable : false,
plain : true,
closable : false,
items : addForm
});
//!!通过窗口，打开表单，无数据提前加载，这是和修改的区别
var addForm = new Ext.FormPanel({
labelWidth : 75,
labelAlign : 'right',
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 640,
height : 420,
waitMsgTarget : true,
items : [{
//下面属性和之前的查询Form一样，注意属性name的修改，他是传往后台的属性名
layout : 'column',
xtype : 'fieldset',
title : '入库信息',
items : [{
columnWidth : .5,
layout : 'form',
labelWidth : 80,
items : [{
xtype : 'textfield',
name : 'stockIn.fkGoodId',
//这里传参用的ajax，所以id并没有用处，.add只是区别作用
id : 'stockIn.fkGoodId.add',
fieldLabel : '商品名称',
allowBlank : false,
anchor : '100%'
},{
xtype : 'textfield',
name : 'stockIn.inNum',
id : 'stockIn.inNum.add',
fieldLabel : '商品数量',
allowBlank : false,
anchor : '100%'
}]
}]
},{
layout : 'column',
xtype : 'fieldset',
title : '备注',
items : [{
columnWidth : .9,
layout : 'form',
labelWidth : 100,
items : [{
//type类型为网页编辑器类型
xtype : 'htmleditor',
name : 'stockIn.inDesc',
id : 'stockIn.inDesc.add',
fieldLabel : '描述',
allowBlank : false,
anchor : '100%'
}]
}]
}],
buttons : [{
text : '保存',
iconCls : 'icon-save',
handler : function() {
if (addForm.form.isValid()) {
addForm.form.submit( {
url : 'StockIn_addStockIn.action' ,
success : function(
from, action,success) {
stockInStore.reload();
Ext.Ghost.msg('保存成功','添加新的入库记录成功！');
addWin.hide();
},
failure : function(
form, action,success) {
Ext.Ghost.msg(
'保存失败','信息填写有误或服务器未响应，请重新尝试');
},
waitMsg : '正在保存数据，稍后...'
});
} else {
Ext.Ghost.msg('信息', '请填写完成再提交!');
}
}
}, '-', {
text : '取消',
iconCls : 'icon-reset',
handler : function() {
addForm.form.reset();
addWin.hide();
},
cls : 'right-part'// ,
}]
});
//！！完成添加窗口功能
//！！JavaScript超链接方法
update = function() {
var _record = stockInGrid.getSelectionModel().getSelected();
var flag = stockInGrid.getSelectionModel().getSelections();
if (flag.length == 1) {
//得到grid列表某一行的属性值，_record.get()表示得到对应值，并设置为update*做区别，updateForm要使用，注意和grid属性一致
Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));
Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));
Ext.getCmp("updateinNum").setValue(_record.get("inNum"));
Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));
winTitle = "修改入库信息";
updateWin.setTitle(winTitle);
updateWin.show();
updateForm.getForm().load();
} else
Ext.Msg.alert('错误', '请选择一道要编辑的入库！');
};
//！！完成JavaScript超链接方法
//!!修改窗口，内含修改的form表单updateForm，名字可不改，由上面的JavaScript超链接方法得到表单初始值
updateWin = new Ext.Window({
layout : 'form',
width : 650,
height : 450,
modal : true,
resizable : false,
plain : true,
closable : false,
items : updateForm
});
//!!通过窗口，打开表单，数据需要提前加载，由窗口完成
var updateForm = new Ext.FormPanel({
labelWidth : 75,
labelAlign : 'right',
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 640,
height : 420,
waitMsgTarget : true,
items : [{
//下面属性和查询一样，有一点就是属性id要和JavaScript超链接方法定义的参数名一致，就是update*
layout : 'column',
xtype : 'fieldset',
title : '修改信息',
items : [{
columnWidth : .5,
layout : 'form',
labelWidth : 80,
items : [{
//建议大家和我一样，把原来的粘过来，比对着用，name属性为传往后台的名称，要注意区别
// Ext.getCmp("updatepkInId").setValue(_record.get("pkInId"));
// Ext.getCmp("updatefkGoodId").setValue(_record.get("fkGoodId"));
// Ext.getCmp("updateinNum").setValue(_record.get("inNum"));
// Ext.getCmp("updateinDesc").setValue(_record.get("inDesc"));
name : 'stockIn.pkInId',
id : 'updatepkInId',
xtype : 'hidden'
},{
xtype : 'textfield',
name : 'stockIn.fkGoodId',
id : 'updatefkGoodId',
fieldLabel : '商品名称',
allowBlank : false,
anchor : '100%'
},{
xtype : 'textfield',
name : 'stockIn.inNum',
id : 'updateinNum',
fieldLabel : '商品数量',
allowBlank : false,
anchor : '100%'
}]
}]
},{
layout : 'column',
xtype : 'fieldset',
title : '描述',
items : [{
columnWidth : .9,
layout : 'form',
labelWidth : 100,
items : [{
xtype : 'htmleditor',
name : 'stockIn.inDesc',
id : 'updateinDesc',
fieldLabel : '描述',
allowBlank : false,
anchor : '100%'
}]
}]
}],
buttons : [{
text : '保存',
iconCls : 'icon-save',
handler : function() {
if (updateForm.form.isValid()) {
updateForm.form.submit( {
url : 'StockIn_updateStockIn.action' ,
success : function(
from, action,success) {
stockInStore.reload();
Ext.Ghost.msg('保存成功','修改信息成功！');
updateWin.hide();
},
failure : function(
form, action,success) {
Ext.Ghost.msg(
'保存失败','信息填写有误或服务器未响应，请重新尝试');
},
waitMsg : '正在保存数据，稍后...'
});
} else {
Ext.Ghost.msg('信息', '请填写完成再提交!');
}
}
}, '-', {
text : '取消',
iconCls : 'icon-reset',
handler : function() {
updateForm.form.reset();
updateWin.hide();
},
cls : 'right-part'// ,
}]
});
//!!完成修改表单
})
项目Extjs前台开发模版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。