MiniUI汇总.doc

MiniUI汇总一、Layout布局1.1 Layout布局器mini-layout/docs/api/index.html#ui=LayoutregionString面板名称showSplitBoolean是否显示分割条trueshowHeaderBoolean是否显示头部trueallowResizeBoolean是否允许拖拽调节true north south west east mini.parse();/将html标签解析为miniui控件。/解析后，才能使用mini.get获取到控件对象。 var layout = mini.get(layout1); function hideHeader() layout.updateRegion(north, visible: false ); /更新region面板/ /docs/api/index.html#ui=Layout function showHeader() layout.updateRegion(north, visible: true ); function collapsePanel() layout.updateRegion(east, expanded: false ); function expandPanel() layout.updateRegion(east, expanded: true ); 1.2 splitter分割器mini-splitter/docs/api/index.html#ui=splitter横向分割器 1 2 竖向分割器 1 2 1.3 window弹出面包mini-window/docs/api/index.html#ui=windowshow ( left, top )showAtPos ( left, top ) left: left, center, right top: top, middle, bottom 弹出显示面板 x: Left Center Right y: Top Middle Bottom 1111111111111111 mini.parse(); function showAtPos() var win = mini.get(win1); var x = document.getElementById(x).value; var y = document.getElementById(y).value; win.showAtPos(x, y); function hideWindow() var win = mini.get(win1); win.hide(); showAtPos();二、forms表单2.1 spinner下拉列表组建/docs/api/index.html#ui=spinnerminValue最小值 maxValue最大值allowLimitValue Boolean 是否强制约束大小范围 true changeOnMousewheel Boolean 是否滚动滚轮改变值 true2.1.1 mini-timespinner/docs/api/index.html#ui=timespinner2.2 ButtonEdit按钮弹出框/docs/api/index.html#ui=buttoneditfunction onButtonEdit(e) var btnEdit = this;mini.open(url: MultiSelectTreeWindow.html, title: 多选树,width: 350,height: 350,ondestroy: function (action) if (action = ok) var iframe = this.getIFrameEl();var data = iframe.contentWindow.GetData();data = mini.clone(data);btnEdit.setValue(data.id);btnEdit.setText(data.text);); valuechanged 值改变时发生 buttonclick 按钮点击时发生 validation 验证时发生 enter 回车时发生 keydown 键盘按下时发生 keyup 键盘按起时发生 focus 获取焦点时发生 blur 失去焦点时发生 closeclick 点击关闭按钮时激发2.3 CheckBox复选框/docs/api/index.html#ui=checkboxvaluechanged 值改变时发生 checkedchanged 选中变化时发生 click 点击时发生2.4 button按钮mini-button mini-button-iconTop/docs/api/index.html#ui=button增加 修改 mini.parse(); function onClick(e) var button = e.sender; var iconCls = button.getIconCls(); var text = button.getText(); if (iconCls) alert(text: + text + nicon: + iconCls); else alert(text); 2.5 TreeSelect树状选择框mini-treeselect/docs/api/index.html#ui=treeselect function setValue() var obj = mini.get(select1); obj.setValue(base,button,ajax); function getValue() var obj = mini.get(select1); alert(obj.getValue() + : + obj.getText(); function enable() var obj = mini.get(select1); obj.enable(); function disable() var obj = mini.get(select1); obj.disable(); function onCloseClick(e) var obj = e.sender; obj.setText(); obj.setValue(); 单选：禁止选中父节点 function beforenodeselect(e) /禁止选中父节点 if (e.isLeaf = false) e.cancel = true; function onCloseClick(e) var obj = e.sender; obj.setText(); obj.setValue(); 2.6 Hidden隐藏字段mini-password/docs/api/index.html#ui=hidden单行输入框： 密码输入框： 多行输入框： mini.parse(); 2.7 RadioButtonList单选框组mini-radiobuttonlist mini.parse(); var rbl = mini.get(rbl); rbl.on(valuechanged, function (e) alert(this.getValue(); );2.8 form表单验证 帐号： 密码： mini.parse(); function submitForm() var form = new mini.Form(#form1); form.validate(); if (form.isValid() = false) return; /提交数据 var data = form.getData(); var json = mini.encode(data); alert(提交成功); 2.9 TextBox文本输入框mini-textbox/docs/api/index.html#ui=textboxvtypeString验证规则。如vtype=email。参考示例。2.10 DatePicker 日期选择器mini-datepicker/docs/api/index.html#ui=datepicker 2.11 FileUpload文件上传控件（flash实现）。mini-fileupload/docs/api/index.html#ui=fileupload mini.parse(); /动态设置url/ var fileupload = mini.get(fileupload1);/ fileupload.setUploadUrl(upload.aspx); function onFileSelect(e) /alert(选择文件); function onUploadSuccess(e) alert(上传成功： + e.serverData); this.setText(); function onUploadError(e) function startUpload() var fileupload = mini.get(fileupload1); fileupload.startUpload(); buttonText String 按钮文本 limitType String 文件限制类型。如*.bmp;*.txt limitSize String 文件尺寸限制。如10MB uploadUrl String 文件上传路径地址 flashUrl String Flash路径地址 uploadOnSelect Boolean 文件选择后即上传 startUpload（） 上传文件 setPostParam ( Object ) 设置post参数对象。如：fileupload.setPostParam(a:1, b: true); fileselect 文件选择时激发 uploadsuccess 上传成功 uploaderror sender: Object, file: Object, code: String, message: String 上传失败 uploadcomplete 上传完成三、base基本3.1.basemini.parse()mini.layout()mini.get(id)mini.getbyName(name)mini.getbyName(name, parent)name: 控件name;parent: 可选。限定获取控件的范围。根据name获取单个控件mini.getsbyName(name)mini.getsbyName(name, parent)name: 控件name;parent: 可选。限定获取控件的范围。根据name获取多个控件3.2 ajax jquery参考手册/jquery/jquery_ref_ajax.asp3.3 JSON组件 NameParameterDescriptionReturnmini.encode ( Object )把JS对象序列化为字符串Stringmini.decode ( json, autoParseDate ) json: String。json字符串。 autoParseDate: Boolean。是否自动解析日期字符串为Date类型。把字符串反序列化为JS对象Object3.4 Date日期类型处理组件NameParameterDescriptionReturnmini.parseDate ( String )String: 特定格式字符串。支持如下： 2010-11-22 2010/11/22 11-22-2010 11/22/2010 2010-11-22T23:23:59 2010/11/22T23:23:59 2010-11-22 23:23:59 2010/11/22 23:23:59把字符串转换成Date类型对象。Datemini.formatDate ( Date, String )Date: 日期类型对象。String: 格式化字符串。例如：yyyy-MM-dd HH:mm:ss。具体格式说明，请参考下面的“Format”内容。把Date类型转换为字符串String四、lists目录，grid网格4.1 Tree树目录A、点击“快捷”快捷 首页 plain 背景透明mini-button-iconTop iconCls 图标样式类一、对应函数： function onQuickClick(e) tree.expandPath(datagrid);/展开 tree.selectNode(datagrid);/选中，触发事件 expandPath ( node ) 展开节点路径selectNode ( node ) 选中节点二、触发函数： 三、触发函数： function onNodeSelect(e) var node = e.node; var isLeaf = e.isLeaf;/是否子节点 if (isLeaf) showTab(node); isLeaf ( node ) 是否叶子节点。四、触发函数： function showTab(node) var tabs = mini.get(mainTabs);/获得对象 var id = tab$ + node.id;/左边选中节点的id var tab = tabs.getTab(id);/在mainTabs中得到左边id的tab if (!tab) /如果得不到tab新建一个;本来就有不执行该语句 tab = ; tab._nodeid = node.id; = id; tab.title = node.text; tab.showCloseButton = true; /这里拼接了url，实际项目，应该从后台直接获得完整的url地址 tab.url = mini_JSPath + ././docs/api/ + node.id + .html; tabs.addTab(tab); /增加tab面板到mainTabs上 tabs.activeTab(tab);/选中tab面板 addTab ( Object , index ) Object：tab对象。index：Number。索引号。增加tab。activeTab ( tab ) 选中tab面板 四、触发函数 function onTabsActiveChanged(e) /面板切换时函数 var tabs = e.sender;/得到当前mini-tabs对象 var tab = tabs.getActiveTab();/得到当前tab对象 if (tab & tab._nodeid) /tab和id都有 var node = tree.getNode(tab._nodeid); /tab和node节点保持一致 if (node & !tree.isSelectedNode(node) tree.selectNode(node); activechanged sender: Object tab: Object 面板切换时发生4.2grid网格(直接在单元格内部编辑)/demo/#src=datagrid/celledit.html4.2.1查询事件处理函数 /输入查询key，按下enter键或点击查询都可以进行查询。 查询对应的js：function search() var key = mini.get(key).getValue(); grid.load( key: key ); /使用load方法，可以传递更多、任意复杂的查询条件。/后台通过Requestkey方式获取和处理。 function onKeyEnter(e) search(); 4.2.2员工账号对应表单数据：员工帐号allowSort=true 允许排序,点击一下出现上或下三角allowSortColumn 允许列排序field=loginname/单元格值字段headerAlign=center/表头列文本位置。left/center/rightproperty=editor/单元格编辑器4.2.3年龄年龄 4.2.4出生日期出生日期4.2.5备注备注 注意：Mini-textbox和mini-textarea的不同。4.2.6性别 性别 autoShowPopup=true /编辑时是否自动显示下拉框。data=Genders/ data 数据对象（Array数组）var Genders = id: 1, text: 男 , id: 2, text: 女;/ Genders在js脚本中声明4.2.7国家 国家 4.2.8“增加”增加tooltip=增加. /鼠标放在上面给出提示iconCls=ico