extjs 项目UI总结
1.页面布局（border）
var panel = Ext.create('Ext.panel.Panel', {
height:'100%',
layout: 'border',
defaults:{
split:true//各个布局之间可拉动
},
items: [
{
xtype: 'XXX',（alias:'widget.XXX'）
id: 'XXXID',
region:'north',
height:'35%'
},
{
region:'west',
height:'65%',
width:'25%',
split:true,
autoScroll: true,
layout:'fit',
id:'leftId',
items:commonComp.initCsrOutboundDetail()//定义全局变量，代码结构清晰
},
{
xtype:'panel',
region:'center',//使用border 布局时，center必须存在
layout:'fit',
height:'65%',
width:'75%',
split:true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
height:'10%',
items:[
{
xtype:'button',
id:'btnInBound',
text:messages['omsCsrTask.opearte.button.inbound'],
iconCls:'icon-edit',
handler:function () {
//接听后，创建一个 INBOUND Task
Ext.Ajax.request({
url:path('/omsCsrTask/createInBoundTask'),
params:{customerPhone:customerPhone},
success:function (json) {
var data = Ext.decode(json.responseText);
if (data.success) {
//加载inBound 任务的form
Ext.getCmp("leftId").removeAll(true);
// Ext.getCmp("leftId").setItems([{items:commonComp.initCsrInboundDetail()}]);
Ext.getCmp("leftId").add({
autoScroll: true,
layout:'fit',
items:commonComp.initCsrInboundDetail()
}).doLayout(true);
//加载左侧任务详细的数据
Ext.getCmp('operateInFormId').getForm().findField('omsCsrTaskSysId').setValue(data.result["omsCsrTaskSysId"]);
Ext.getCmp('operateInFormId').getForm().findField('taskType').setValue(data.result["taskType"]);
Ext.getCmp('operateInFormId').getForm().findField('firstAssignee').setValue(data.result["firstAssignee"]);
Ext.getCmp('operateInFormId').getForm().findField('processStatus').setValue(data.result["processStatus"]);
Ext.getCmp('operateInFormId').getForm().findField('inboundType').setValue(data.result["inboundType"]);
Ext.getCmp('operateInFormId').getForm().findField('reasonType').setValue(data.result["reasonType"]);
Ext.getCmp('operateInFormId').getForm().findField('taskRemark').setValue(data.result["taskRemark"]);
Ext.getCmp('operateInFormId').getForm().findField('processRemark').setValue(data.result["processRemark"]);
} else {
Ext.Msg.alert(messages['Ext.MessageBox.tip.text'], messages['Ext.MessageBox.update.failureMsg']);
}
},
failure:function () {
Ext.Msg.alert(messages['Ext.MessageBox.tip.text'], messages['Ext.MessageBox.system.errorMsg']);
}
});
}
}
]
}
],
items: commonComp.initCsrOutboundDetail()
}
]
});//页面定时器的显示
var s = 0;//秒
var h = 0;//时
var m = 0;//分
var task = {
run : function() {
s++;
if(s==60){
s=0;
m += 1;
}
if(m==60){
m=0;
h += 1;
}
var txt = ( h < 10 ? '0' + h : h ) + ':' + ( m < 10 ? '0' + m : m ) + ':' + ( s < 10 ? '0' + s : s );
Ext.getCmp('continueTime').setText(txt);
},
interval : 1000
};//挂断后，计时器属性清空
s = 0;
m = 0;
h = 0;
//挂断后，计时器停止
Ext.TaskManager.stop(task);//接听后，给计时器附上初始值
s = 0;
m = 0;
h = 0;
//接听后，启动计时器
Ext.TaskManager.start(task);//整个页面显示遮罩功能
var myMask = new Ext.LoadMask('center',
{
msg:"Please wait...",
removeMask : true
});
myMask.show();myMask.hide();
var task = new Ext.util.DelayedTask(function(){
myMask.hide();
});task.delay(3000);
/**
* 右键快捷菜单 Grid 定义
*/
Ext.define('com.grid',{
extend :'Smartec.grid.Panel',
alias:'widget.ComGrid',
autoSetStore:false,
store:Ext.create('ComStore'),
autoScroll:true,
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
injectCheckbox: 1,
showHeaderCheckbox :false, //false : 不显示列头的复选框
mode:'SINGLE',//SINGLE : 每次只能选中一行，
headerWidth: 25
}),
columns:[
{xtype: 'rownumberer', text: messages['common.table.seq'], width: 35, sortable: false},
{header:'主键',hidden:true,width:200,sortable:true,dataIndex:'sysId'}
,{header:'名字',width:200,sortable:true,dataIndex:'name'}
,{header:'数量',width:100,sortable:true,dataIndex:'quantity'}
,{header:'种类',width:100,sortable:true,dataIndex:'type',renderer:function(v){
var record = typeStore.findRecord('value',v);//typeStore fields定义['value','label']
if(record){
return record.get('label')
}
return v;
}}
]
,
initComponent:function () {
var me = this;
me.on('itemcontextmenu', function (view, rec, node, index, e) {
//屏蔽默认右键菜单
e.preventDefault();
/**
* 创建grid 右键快捷菜单
*/
var rightClick = new Ext.menu.Menu({
items: [
{
text: '编辑',
icon:path('/static/images/icons/page_edit.png'),
handler:function(){} //添加右键编辑处理
}
]
});
//定位右键快捷菜单的显示位置
rightClick.showAt(e.getXY());
});
me.callParent(); //callParent 位置必须在 store beforeload 之前
me.store.on('beforeload', function (store, options) {
Ext.apply(store.proxy.extraParams, options.params);
});
}
});Ext.define('com.grid',{
extend :'Smartec.grid.Panel',
alias:'widget.ComGrid',
model : ModelName,
selModel: Ext.create('Ext.selection.CheckboxModel', {
checkOnly: false,
injectCheckbox: false,
headerWidth: 25
}),
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1 //单击grid，进入编辑状态，默认为2，表示双击
})
],
autoScroll:true,
columns:[
{xtype: 'rownumberer', text: messages['common.table.seq'], width: 35, sortable: false}
,{header:'主键',hidden:true,width:200,sortable:true,dataIndex:'sysId'}
,{header:'名称',width:100,sortable:true,dataIndex:'name'}
,{header:'数量',width:100,sortable:false,dataIndex:'quantity',
editor: {
xtype: 'numberfield',
allowBlank: false,
minValue: 1,
maxValue: 100000
}}
]
,
initComponent:function () {
var me = this;
me.callParent();
me.store.on('beforeload', function (store, options) {
Ext.apply(store.proxy.extraParams, options.params);
});
}
});
var store = Ext.getCmp('GridID').getStore();
var arrRecord = new Array();
store.each(function(record) {
arrRecord.push(record.data);
});
Ext.Ajax.request({
url:path('/omsOrderExchange/saveOrderExchangeApply.do'),
params:{
arrRecord:Ext.encode(arrRecord),
sysId:Ext.getCmp('sysId').getValue()
},
success:function (json) {
var data = Ext.decode(json.responseText);
if (data.success) {
Ext.Msg.alert('提示', '保存成功', function (btn) {
});
} else {
Ext.Msg.alert('提示', '保存失败')；
}
},
failure:function () {
Ext.Msg.alert('提示', '系统失败');
}
});
java后台处理
public JsonResult saveApply(HttpServletRequest request) {
try{
String sysId = request.getParameter("sysId");
String strJson = request.getParameter("arrRecord");
Map map = new HashMap();
JSONArray jsonArray = new JSONArray(strJson);
for (int i = 0; i < jsonArray.length(); i++) {
JSONObject jsonObject = jsonArray.getJSONObject(i);
String sysId = (String)jsonObject.get("sysId");
Integer name = (Integer)jsonObject.get("name");
map.put(sysId,name);
}
//....... 进行后续处理
return this.jsonSuccess();
} catch (Exception ex){
ex.printStackTrace();
return jsonFailure();
}
} 7.Ext.form.Panel 的赋值
this.up('form').getForm().setValues(rec.data);//如果添加结果为数组，使用setValues
this.up('form').getForm().loadRecord(rec); //直接加载已有数据
this.up('form').getForm().load({ //动态后台请求给form赋值
url:'xxxx/xxxx',
success：function(){
},
failure: function(){
}
});
this.up('form').getForm().findField('fieldName').setValue('XXX'); //直接找到组件赋值8.一个model 多个proxy
Ext.define('ModelName', {
extend:'Ext.data.Model',
fields:[
{name:'sysId', type:'string'}
,{name:'name', type:'string'}
,{name:'quantity', type:'string'}
]
});
Ext.define('Store1', {
extend:'Ext.data.Store',
model:'ModelName',
proxy:{
type:'ajax',
url:path('xxx/xxx'),
reader:{
type:'json',
root:'result',
idProperty:'id',
totalProperty:'recordCount',
successProperty:'success'
}
}
});
Ext.define('Store2', {
extend:'Ext.data.Store',
model:'ModelName',
proxy:{
type:'ajax',
url:path('xxx/xxx'),
reader:{
type:'json',
root:'result',
idProperty:'id',
totalProperty:'recordCount',
successProperty:'success'
}
}
});
var records = me.getSelectionModel().getSelection();//得到所有选择的商品
var store = Ext.getCmp('availableExchangeOrderItemGridID').getStore();//可换商品grid绑定的store
var arr = [];//创建一个空数组
var a = 0; //空数组的下标
for(var i = 0;i
me.on('itemcontextmenu', function (view, rec, node, index, e) {
//屏蔽默认右键菜单
e.preventDefault();
/**
* 创建订单grid 右键快捷菜单
*/
var rightClick = new Ext.menu.Menu({
items: [
{
text: '移除',
icon:path('/static/images/icons/fullcancel.png'),
handler:function(){
var store = Ext.getCmp('availableExchangeOrderItemGridID').getStore();
var length = store.data.length;
store.remove(rec);
store.data.length = length - 1;
console.info(length);
console.info(store.data.length);
}
}
]
});
//定位右键快捷菜单的显示位置
rightClick.showAt(e.getXY());
});
Ext.apply(win,{formRecord:rec});