❝小闫语录:最好的心灵鸡汤就是少看那些心灵鸡汤。 ❞
Ext.js
系列课程笔记「表单子项二」更多精彩文章请关注公众号『Pythonnote』或者『全栈技术精选』
Combobox_Two
//创建市数据源
var combocitystore = new Ext.data.Store({
//设定读取的代理,添加后端地址
proxy: new Ext.data.HttpProxy({ url: "/demo/city" }),
//设定读取的格式
//读取json返回值 - 根节点为data,对象列为id和name
//服务器返回数据:{"data": [{"id": 1, "name": "北京"},{"id": 2, "name":"上海"}]}
reader: new Ext.data.JsonReader({ root: "data" }, [
{ name: "id" },
{ name: "name" }
])
});
//创建区数据源
var comboareastore = new Ext.data.Store({
//设定读取的代理,添加后端地址
proxy: new Ext.data.HttpProxy({ url: "/demo/area" }),
//读取json返回值 - 根节点为data,对象列为id和name
//服务器返回数据示例:{"data": [{"id": 1, "name": "东城区"},{"id": 2, "name": "西城区"},{"id": 2, "name": "海淀区"}]}
reader: new Ext.data.JsonReader({ root: "data" }, [
{ name: "id" },
{ name: "name" }
])
});
//创建市Combobox
var comboboxcity = new Ext.form.ComboBox({
id: "comboboxcity",
//框前面的文字(标签)
fieldLabel: "市",
//宽度
width: 120,
//数据源为市数据源
store: combocitystore,
//显示的列
displayField: "name",
//对应的值列
valueField: "id",
//请设置为”all”,否则默认为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项
triggerAction: "all",
//默认显示提示文字
emptyText: "请选择...",
//不允许为空
allowBlank: false,
//校验为空时的提示文字
blankText: "请选择市",
//不可编辑
editable: false,
mode: "local", //该属性和以下方法为了兼容ie8
listeners: {
render: function() {
combocitystore.load();
}
}
});
//创建区Combobox
var comboareacity = new Ext.form.ComboBox({
//框前面的文字(标签)
fieldLabel: "区",
//宽度
width: 120,
//数据源为区数据源
store: comboareastore,
//显示的列
displayField: "name",
//对应的值列
valueField: "id",
//请设置为”all”,否则默认为”query”的情况下,你选择某个值后,再此下拉时,只出现匹配选项
triggerAction: "all",
//默认显示提示文字
emptyText: "请选择...",
//不允许为空
allowBlank: false,
//校验为空时的提示文字
blankText: "请选择区",
//不可编辑
editable: false
});
//联动的实现
comboboxcity.on("select", function() {
//注意等号左边comboareastore是区的数据源,当市变化时,给区的数据源加上个向service端发送的参数
comboareastore.baseParams.id = comboboxcity.getValue();
//把区的下拉列表设置为空,由于非空验证,Ext会提示用户“请选择区”
comboareacity.setValue("");
//区的数据源重新加载
comboareastore.load();
});
File
Ext.onReady(function() {
//初始化提示信息
Ext.QuickTips.init();
//定义函数,弹窗
var msg = function(title, msg) {
Ext.Msg.show({
//消息框的标题栏文字
title: title,
//提示信息
msg: msg,
//宽度
minWidth: 200,
//模态窗体:打开此窗体后,不能对其他窗体进行操作
modal: true,
//显示图标
icon: Ext.Msg.INFO,
//显示 ok 按钮
buttons: Ext.Msg.OK
});
};
// 文件上传框
var fibasic = new Ext.form.FileUploadField({
//传到html中的标签中:<div id="fi-basic"></div>
renderTo: "fi-basic",
//宽
width: 400
});
//创建一个按钮
new Ext.Button({
//按钮显示文本
text: "Get File Path",
//传到HTML中的标签中:<div id="fi-basic-btn"></div>
renderTo: "fi-basic-btn",
//处理函数
handler: function() {
//获取 id 为 fibasic 的值
var v = fibasic.getValue();
//使用 msg 函数,如果文件上传框中有值,那么显示文件的路径;如果没有值,显示 None
msg("Selected File", v && v != "" ? v : "None");
}
});
});