SGUAP平台前端功能扩展的规范化操作说明

《SGUAP平台前端功能扩展的规范化操作说明》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、SG-UAP平台前端功能扩展的规范化操作说明1.扩展原则1.1最小化原则通常情况下，通过新建MXFramework的扩展模块项目来对前端框架进行扩展，扩展模块只需要包含所需要扩展的文件（脚本文件、样式文件等），切记不要把整个MXFramework的拷贝过来。1.2继承扩展原则当MXFramework提供的控件满足大部分用户需要的时候，只需要对其进行继承扩展，以满足部分个性化的需求。1.3组合扩展原则当一个通用组件涉及到俩个以上控件组合实现的时候，使用组合扩展方式。1.4面向接口扩展原则当用户扩展一个现有控件的时候，应当针对公共接口和

2、保护方法扩展，切记不要重写该控件，如需重写请创建一个全新的控件。2.功能扩展方法2.1继承扩展即继承一个MXFramework现有的控件，扩展个性化的功能。例如：我们需要一个垂直选项控件VTabControl，如下所示：$ns(“mx.containers”);mx.containers.VTabControl=function(){varme=$extend(mx.containers.Container);varbase={};base.init=me.init;me.init=function(){base.init();_i

3、nit();}function_init(){//自定义初始化逻辑}returnme.endOfClass(arguments);}2.2组合扩展即将两个以上的MXFramework提供的控件通过组合的方式扩展。例如，我们需要一个包含工具条的表格控件，如下所示：$ns(“mx.datacontrols”);mx.datacontrols.CompositeGrid=function(){varme=$extend(mx.containers.Container);varbase={};me.dataGrid=null;me.tool

4、Bar=null;base.init=me.init;me.init=function(){base.init();_init();}function_init(){me.dataGrid=$instanceOf(me.dataGrid,mx.datacontrols.DataGrid)?me.dataGrid:(newmx.datacontrols.DataGrid(me.dataGrid));me.toolBar=$instanceOf(me.toolBar,mx.controls.ToolBar)?me.toolBar:(ne

5、wmx.controls.ToolBar(me.toolBar));me.addControl(me.toolBar);me.dataControl(me.dataGrid);}returnme.endOfClass(arguments);}2.3自定义扩展自定义扩展时用户创建一个全新的控件，即遵循MXFramework的类编写规范创建一个全新的控件，切记创建的新控件的名称不要与平台已有的控件重名。1.样式扩展方法3.1默认样式扩展默认样式是指前端框架提供的Default和Aero主题样式。扩展的默认样式可以应用到所有的模块项目中,

6、只需要在扩展模块中对默认的样式文件进行修改即可。例如：TabControl控件默认的标签头是在顶部，我们需要标签头在底部，修改的样式文件如下:.mx.tabControl>#head{bottom:0px;top:auto;height:33px;}.mx.tabControl>#body{bottom:32px;top:0px;padding:5px;}.mx.tabControl>#head>a{border-bottom:1pxsolid#898C95;border-top:none;margin-top:0px;height

7、:33px;background:url(images/tab_control_button_bg.png);}.mx.tabControl>#head>a:hover{border-top:none;color:#FFFFFF;background:url(images/tab_control_button_selected.png);}.mx.tabControl>#head>a.selected{top:0px;height:33px;border-top:none;border-bottom:1pxsolid#898C95;

8、color:#FFFFFF;background:url(images/tab_control_button_selected.png);}.mx.tabControl>#head>a.selected:hover{border-bo