MiniUI知识点汇总

MiniUI知识点汇总一、Layout布局1.1Layout布局器mini-layout=LayoutregionString面板名称showSplitBoolean是否显示分割条trueshowHeaderBoolean是否显示头部trueallowResizeBoolean是否允许拖拽调节truedivid=layout1class=mini-layoutstyle=width:600px;height:400px;borderStyle=border:solid1px#aaa;divtitle=northregion=northheight=80showSplitIcon=truenorth/divdivtitle=southregion=southshowSplit=falseshowHeader=trueheight=80showSplitIcon=truesouth/divdivtitle=westshowProxyText=trueregion=westwidth=200expanded=falseshowSplitIcon=truewest/divdivtitle=eastregion=eastshowCloseButton=trueshowSplitIcon=trueeast/divdivtitle=centerregion=centerinputtype=buttonvalue=隐藏onclick=hideHeader()/inputtype=buttonvalue=显示onclick=showHeader()/br/br/inputtype=buttonvalue=折叠onclick=collapsePanel()/inputtype=buttonvalue=展开onclick=expandPanel()//div/divscripttype=text/javascriptmini.parse();//将html标签解析为miniui控件。//解析后，才能使用mini.get获取到控件对象。varlayout=mini.get(layout1);functionhideHeader(){layout.updateRegion(north,{visible:false});//更新region面板//=Layout}functionshowHeader(){layout.updateRegion(north,{visible:true});}functioncollapsePanel(){layout.updateRegion(east,{expanded:false});}functionexpandPanel(){layout.updateRegion(east,{expanded:true});}/script1.2splitter分割器mini-splitter=splitterh4横向分割器/h4divclass=mini-splitterstyle=width:350px;height:200px;divsize=30%showCollapseButton=truestyle=padding:5px;1/divdivshowCollapseButton=true2/div/divh4竖向分割器/h4divclass=mini-splittervertical=truestyle=width:350px;height:200px;divsize=30%showCollapseButton=true1/divdivshowCollapseButton=true2/div/div1.3window弹出面包mini-window=windowshow(left,top)showAtPos(left,top)left:left,center,righttop:top,middle,bottom弹出显示面板x:selectid=xoptionvalue=leftLeft/optionoptionvalue=centerCenter/optionoptionvalue=rightselectedRight/option/selecty:selectid=yoptionvalue=topTop/optionoptionvalue=middleMiddle/optionoptionvalue=bottomselectedBottom/option/selectinputtype=buttonvalue=showAtPosonclick=showAtPos()/divid=win1class=mini-windowtitle=Windowstyle=width:400px;height:250px;showMaxButton=trueshowCollapseButton=trueshowShadow=trueshowToolbar=trueshowFooter=trueshowModal=falseallowResize=trueallowDrag=truedivproperty=toolbarstyle=padding:5px;inputtype='button'value='Hide'onclick=hideWindow()style='vertical-align:middle;'//divdivproperty=footerstyle=text-align:right;padding:5px;padding-right:15px;inputtype='button'value='Hide'onclick=hideWindow()style='vertical-align:middle;'//div1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br/1br//divscripttype=text/javascriptmini.parse();functionshowAtPos(){varwin=mini.get(win1);varx=document.getElementById(x).value;vary=document.getElementById(y).value;win.showAtPos(x,y);}functionhideWindow(){varwin=mini.get(win1);win.hide();}showAtPos();/script二、forms表单2.1spinner下拉列表组建inputid=sp1class=mini-spinnerminValue=100maxValue=250/=spinnerminValue最小值maxValue最大值allowLimitValueBoolean是否强制约束大小范围truechangeOnMousewheelBoolean是否滚动滚轮改变值true2.1.1mini-timespinnerinputid=tsp1class=mini-timespinnerformat=H:mm/=timespinner2.2ButtonEdit按钮弹出框=buttoneditinputid=btnEdit1class=mini-buttoneditonbuttonclick=onButtonEdit/functiononButtonEdit(e){varbtnEdit=this;mini.open({url:MultiSelectTreeWindow.html,title:多选树,width:350,height:350,ondestroy:function(action){if(action==ok){variframe=this.getIFrameEl();vardata=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.3CheckBox复选框=checkboxdivid=ck1name=productclass=mini-checkboxchecked=falsereadOnly=falsetext=大堂经理onvaluechanged=onValueChanged/divvaluechanged值改变时发生checkedchanged选中变化时发生click点击时发生2.4button按钮mini-buttonmini-button-iconTop=buttonaclass=mini-buttonmini-button-iconTopiconCls=icon-addonclick=onClick增加/aaclass=mini-buttonmini-button-iconTopiconCls=icon-editonclick=onClick修改/ascripttype=text/javascriptmini.parse();functiononClick(e){varbutton=e.sender;variconCls=button.getIconCls();vartext=button.getText();if(iconCls){alert(text:+text+\nicon:+iconCls);}else{alert(text);}}2.5TreeSelect树状选择框mini-treeselect=treeselectinputid=select1class=mini-treeselecturl=../data/listTree.txtmultiSelect=truetextField=textvalueField=idparentField=pidcheckRecursive=trueshowFolderCheckBox=falseexpandOnLoad=trueshowClose=trueoncloseclick=onCloseClickpopupWidth=200/scripttype=text/javascriptfunctionsetValue(){varobj=mini.ge