参考示例：ComboBox：联动选择

一：创建两个ComboBox 

<span>部门</span><br />
<input id="deptCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" 
    onvaluechanged="onDeptChanged" url="../data/DataService.aspx?method=GetDepartments"
    showNullItem="true"
        />         
<br /><br />
<span>职位</span><br />
<input id="positionCombo" class="mini-combobox" style="width:150px;" textField="name" valueField="id" />  
            

二：valuechanged加载第二个ComboBox

function onDeptChanged(e) {
    var id = deptCombo.getValue();
    positionCombo.setValue("");
    var url = "../data/DataService.aspx?method=GetPositionsByDepartmenId&id=" + id
    positionCombo.setUrl(url);            
}

参考示例：ComboBox：下拉选择框

创建ComboBox

<input id="combo1" class="mini-combobox" style="width:150px;" textField="text" valueField="id" 
    url="../data/countrys.txt" value="cn" showNullItem="true" /> 
            

多选 + 多列

<div class="mini-combobox" style="width:250px;"  popupWidth="400" textField="text" valueField="id" 
    url="../data/countrys.txt" value="cn,usa" multiSelect="true"  >     
    <div property="columns">
        <div header="ID" field="id"></div>
        <div header="国家" field="text"></div>
    </div>
</div>

参考示例：TextBox：文本输入框

创建代码

单行输入框：<input class="mini-textbox" value="0" /> <br /><br />
密码输入框：<input class="mini-password" value="12345"  /> <br /><br />
多行输入框：<input class="mini-textarea" value="中国"  /> <br />
 

参考示例：
                ButtonEdit：按钮输入框   
                弹出面板   
                弹出选择树
     
           

创建ButtonEdit

buttonclick事件

$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

提交表单

function onButtonEdit(e) {
    alert("弹出选择");
}

参考示例：  弹出：选择表格   
                弹出：多选表格   
                弹出：多选表格（复杂）   
                弹出：选择表格（JS）   
                   

mini.open

mini.open({
    url: bootPATH + "../demo/CommonLibs/SelectGridWindow.html",           
    title: "选择列表",
    width: 650,
    height: 380,
    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.name);
        }
    }
});

参考示例：表单：加载、保存

宽度调整

高度调整

/* button */
.mini-button-text
{
    padding-top:1px;
    padding-bottom:2px;
    
    padding-top:3px\9;
    padding-bottom:1px\9;
}
/* textbox */        
.mini-textbox
{
    height:19px;
}
.mini-textbox-input
{
    height:17px;
    line-height:15px;
}
/* buttonedit */        
.mini-buttonedit
{
    height:19px;
}
.mini-buttonedit-border
{
    height:17px;
}
.mini-buttonedit-input
{
    height:17px;
    line-height:15px;
}
.mini-buttonedit-button
{
    height:13px;
}
.mini-buttonedit-icon
{
       
    width:15px;
    height:14px;
}
.mini-datepicker .mini-buttonedit-icon
{
    background-position:50% 1px;
}

参考示例：
                验证规则   
                表单验证   
                表单验证：文本提示   
                表单验证：组合验证                   
         

           

绑定validation事件

function onUserNameValidation(e) {
    if (e.isValid) {
        if (isEmail(e.value) == false) {
            e.errorText = "必须输入邮件地址";
            e.isValid = false;
        }
    }
}

设置vtype  

<input class="mini-textbox" vtype="email"/>           

TextBox内置了vtype属性，有如下验证规则：email、url、int、float、maxLength、minLength、rangeLength、rangeChar、range、date等。
       
           

验证表单

var form = new mini.Form("#form1");
form.validate();
if(form.isValid()){
    alert("验证成功");
}

参考示例：表单：加载、保存          


           

创建表单            

只需要一个id即可创建表单对象：

加载表单

$.ajax({
    url: "../data/FormService.aspx?method=LoadData",
    type: "post",
    success: function (text) {
        var data = mini.decode(text);   //反序列化成对象
        form.setData(data);             //设置多个控件数据
    }
});

提交表单

//提交表单数据
var form = new mini.Form("#form1");            
var data = form.getData();      //获取表单多个控件的数据
var json = mini.encode(data);   //序列化成JSON
$.ajax({
    url: "../data/FormService.aspx?method=SaveData",
    type: "post",
    data: { submitData: json },
    success: function (text) {
        alert("提交成功，返回结果:" + text);
    }
});

清除表单

form.clear();

重置表单

form.reset();

参考示例：DataBinding：数据绑定

数据绑定       

数据绑定后：当表格变化时，控件值跟随变动；控件值修改时，表格单元格内容变动。
最后使用表格的数据提交保存，达到：多次修改、一次保存的效果。

//绑定表单
var db = new mini.DataBinding();
db.bindForm("editForm1", grid);

//绑定控件
db.bindField(textbox, grid, "username");