extjs 项目UI总结

最新推荐文章于 2019-07-22 16:31:48 发布

超然

最新推荐文章于 2019-07-22 16:31:48 发布

阅读量1.4k

点赞数 1

分类专栏： extjs 文章标签： ajax Ext JS jsp

本文链接：https://blog.csdn.net/caoliping_IT/article/details/9127209

版权

extjs 专栏收录该内容

20 篇文章 0 订阅

订阅专栏

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()
		}
		]
	});

2.计时器的使用（显示时钟效果）

//页面定时器的显示
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);

3.自定义遮罩功能

//整个页面显示遮罩功能
var myMask = new Ext.LoadMask('center',
{
	msg:"Please wait...",
	removeMask : true
});
myMask.show();

myMask.hide();

4.延迟触发事件

var task = new Ext.util.DelayedTask(function(){
	myMask.hide();
});

task.delay(3000);

5.右键快捷菜单Grid（list类型的数据，如何render到store中的文本）

/**
 * 右键快捷菜单 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);
        });
    }
});

6.可编辑行Grid，整体提交，java后台处理

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<String,Integer> map = new HashMap<String,Integer>();
		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'
        }
    }
});

9.将一个Grid中的记录到另一个Grid

var records = me.getSelectionModel().getSelection();//得到所有选择的商品
var store = Ext.getCmp('availableExchangeOrderItemGridID').getStore();//可换商品grid绑定的store
var arr = [];//创建一个空数组
var a = 0; //空数组的下标
for(var i = 0;i<records.length;i++){
	var j = store.find('omsProductSku',records[i].get('omsProductSku'));//查询当前的store是否已经存在当前的sku，如果存在，不再添加
	if(j<0){
		arr[a] = records[i];
		a++;
	}
}
//length必须加上，否则无法计算grid的rowNum
var length = store.data.length;
store.insert(length,arr);
store.data.length = length + arr.length;//这里的长度计算非常重要，不然会导致rowNum 数据混乱，导致grid各种问题

10.在Grid上添加右键删除行功能

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());
});

11.页面值的特殊用法

Ext.apply(win,{formRecord:rec});

超然

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
extjs 项目UI总结

1.页面布局（border）var panel = Ext.create('Ext.panel.Panel', { height:'100%', layout: 'border', defaults:{ split:true//各个布局之间可拉动 }, items: [
复制链接

扫一扫