版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qwkxq/article/details/57086663
Ext.onReady(function(){
myuploadformpanel = new Ext.FormPanel({
id : "myuploadformpanel",
layout : "column",
labelWidth: 40,
width:1200,
fileUpload:true,
items : [{
columnWidth : .25, // 该列有整行中所占百分比
layout : "form",
items :[{
//id:'file',
xtype:'textfield',
fileUpload:true,
fieldLabel:'资料',
labelStyle:'margin:0 0 10px 0;',
name: 'uploadFile',
inputType: 'file',
blankText: '请上传文件',
width:170,
}]
},{
columnWidth : .08, // 该列有整行中所占百分比
items :[{
xtype : "button",
text : "上传",
width : 80,
handler : function(){
myuploadformpanel.getForm().submit({
url:'<%=basePath%>ext-upload',
method:'POST',
success:function(resp,obt)
{
alert(1);
//Ext.MessageBox.alert("提示信息","上传成功!");
},
failure : function(form, action)
{
Ext.MessageBox.alert("提示信息","上传失败!");
}
});
}
}]
}]
});
var myformpanel = new Ext.FormPanel({ //Panel
id : "myformpanel",
layout : "column",
labelWidth: 40,
width:1200,
items : [{
columnWidth : .25, // 该列有整行中所占百分比
layout : "form",
items :[{
xtype : "textfield",
fieldLabel : "账号",
name:"account",
width:150,
},
//下拉框加载本地数据SimpleStore
{
xtype : "combo",
fieldLabel : "性别",
name:"gender",
width:150,
mode: 'local',//加载本地数据,默认是remote
triggerAction: 'all',//all代表每次选择都加在所有选项,query代表下一次选择只展示上一次选择的选项
displayField: 'text',//用于展示的字段
valueField: 'value', //保存实际值字段
emptyText:'--请选择--',//未选择展示的文本
selectOnFocus:true,//true代表选择该条目时焦点自动聚集到下拉第一个选项上
editable: false,//false代表不可编辑
store: new Ext.data.SimpleStore({
data: [
['male','男'],['female','女']
],
fields: ['value', 'text']
}),
},
//下拉框加载后台数据
{
xtype : "treecombo",
fieldLabel : "部门",
name:"dept",
width:150,
maxHeight:200,
url:'${pageContext.request.contextPath}/testTreeCombo',
triggerAction : 'all',
mode: 'local',
displayField: 'text',//显示文本字段
valueField: 'id', //值字段
emptyText:'--请选择--',
selectOnFocus:true,
}]
}
,{
columnWidth : .08, // 该列有整行中所占百分比
items :[{
xtype : "button",
text : "查询",
width : 80,
handler : function(){
loadStoreByConditon(pageNum,pageRows);
}
}]
}]
});
myformpanel.form.load({
url:getRootPath()+'ext-load'
});
var mypanel = new Ext.Panel({ //FormPanel
title : "用户管理",
autoWidth : true,
autoHeight : true,
frame : true,
renderTo : "mypanel",
layout : "form", // 整个大的表单是form布局
bodyStyle:'background:#E4E4E4;',
items : [myuploadformpanel,myformpanel,sm_UserManager_userlist_GridPanel]
});
});
sm_UserManager_userlist_GridPanel:
/*
* 后台返回的数据格式:
*
* {
* "success":true,"messageCode":"ok_find_page_by","message":"ok_find_page_by",
* "body":
* {
* "content":[{"createtime":1483512015000,"id":1,"edittime":1483512019000,"gender":"男","username":"张三","deptname":"A"}],
* "pageable":{"page":0,"size":30},
* "total":1
* }
* }*/
var pageRows = 30;
var pageNum = 1;
var getQuery = function(page, rows) {
var json = {
'page' : page,
'rows' : rows
};
var myformpanel = Ext.getCmp('myformpanel');
var values = myformpanel.getForm().getValues();
var account = values.account;
if (account != '' && account != undefined) {
json[':userName'] = '%' + account + '%';
}
var sex = values.gender;
if (sex != '' && sex != undefined) {
if(sex == '--请选择--'){
sex = "";
}else{
json[':gender'] = ''+sex;
}
}
var department_name = values.dept;
if (department_name != '' && department_name != undefined) {
if(department_name == '--请选择--'){
department_name = "";
}else{
json[':deptName'] = ''+department_name;
}
}
return json;
};
//配置前台数据和数据库字段的映射关系,name用于被其它组件引用,mapping表示对应JSON业务数据的key
var sm_UserManager_userlist_Record_User = Ext.data.Record.create([
{ name: 'id' , mapping : 'id'},
{ name: 'userName' , mapping : 'username'},
{ name: 'gender' , mapping : 'gender'},
{ name: 'deptName' , mapping : 'deptname'},
{ name: 'createTime' , mapping : 'createtime'},
{ name: 'editTime' , mapping : 'edittime'},
]);
//描述grid每一列对应的JSON中业务数据
var sm_UserManager_userlist_ColumnModel = new Ext.grid.ColumnModel([
new Ext.grid.CheckboxSelectionModel({singleSelect : false}),
{ header: "id", width: 40, sortable: true, dataIndex: 'id',hidden: false},
{ header: '用户名', dataIndex: 'userName', width:100},
{ header: '性别', dataIndex: 'gender', width:100},
{ header: '部门', dataIndex: 'deptName', width:100},
{ header: '创建日期', dataIndex: 'createTime' , width:100},
{ header: '修改日期', dataIndex: 'editTime' , width:100},
]);
/**
* 数据写入器,主要作用是将前台生成的数据格式进行编码传入后台,避免前后台格式不匹配
*/
var user_Jsonwriter = new Ext.data.JsonWriter({
encode : true,
type : 'json',
writeAllFields : true
});
/**
* 数据读取器,主要作用是描述从后台传过来的json数据
*
*/
var sm_UserManager_userlist_Reader = new Ext.data.JsonReader({
root : 'body.content',//指定后台json中的业务数据
totalProperty : 'body.total',//指定后台json中业务数据的总数
idProperty : "id"//指定后台json中业务数据的id字段
}, sm_UserManager_userlist_Record_User);
//数据集,ext的其它组件通过它来获取后台传过来的值
var sm_UserManager_userlist_Store = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : getRootPath()+'/container/findPageByThis' + '?named=container_page',
method : 'post',
jsonData : {
page : pageNum,
rows : pageRows
},
writer : user_Jsonwriter,
headers : {
'Content-Type' : 'application/json; charset=UTF-8'
}
}),
writer : user_Jsonwriter,
reader: sm_UserManager_userlist_Reader
});
//调用数据集
sm_UserManager_userlist_Store.load();
var sm_UserManager_userlist_GridPanel = new Ext.grid.GridPanel({
ds: sm_UserManager_userlist_Store,
cm: sm_UserManager_userlist_ColumnModel,
sm: new Ext.grid.CheckboxSelectionModel({singleSelect : false}),
autoScroll:true,
// autoHeight : true,
height:document.documentElement.clientHeight - 180,
autoWidth : true,
tbar:new Ext.Toolbar({
labelAlign:"center",
items:[
{
xtype:'button',
text:'测试',
handler:function(){
//选中行
var selectRow = sm_UserManager_userlist_GridPanel.getSelectionModel().getSelections()[0];
alert(selectRow.data.createTime);
}
}
]
}),
bbar:new Ext.PagingToolbar({
pageSize:pageRows,
store:sm_UserManager_userlist_Store,
displayInfo:true,
beforePageText: '第',
//{0}代表总页数
afterPageText: '页 共 {0} 页',
//{0},{1},{2} 分别代表起始值,结束值,总记录数
displayMsg:'当前显示第{0}条到{1}条记录,共{2}条记录',
emptyMsg:'没有记录',
doRefresh:function(){
loadStoreByConditon(pageNum, pageRows);
return true;
},
listeners : {
"beforechange" : function(bbar, params) {
var grid = bbar.ownerCt;
var store = grid.getStore();
var start = params.start;
var limit = params.limit;
var page = (start / pageRows) + 1;
var pageNum = page;
loadStoreByConditon(pageNum, pageRows);
return true;
}
}
})
});
/**
* 通过条件重新加载store结果集
* @param pn 当前第几页
* @param pr 一页多少条
*/
function loadStoreByConditon(pn, pr){
var json = getQuery(pn, pr);
sm_UserManager_userlist_Store.proxy.conn.jsonData = json;
sm_UserManager_userlist_Store.reload({
params : []
});
}