Ext ComboBox 展示
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ComboBoxTest.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all.js">
</script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js">
</script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var data = [['1', 'Lislie', 'D005', 'male'], ['2', 'Merry', 'D004', 'female'], ['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'], ['5', 'Leeon', 'D001', 'male']];
// 格式化数据
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data), // 数据源
reader: new Ext.data.ArrayReader({}, [ // 如何解析
{
name: 'id'
}, {
name: 'name'
}, {
name: 'depno'
}, {
name: 'sex'
}])
});
ds.load();
var storeList = new Ext.form.ComboBox({
store: ds,
fieldLabel: 'dfsfsd',
allowBlank: false,
forceSelection: true,
valueField: 'id', // option.value
typeAhead: true,
displayField: 'name', // option.text
triggerAction: 'all',
emptyText: 'Select a store...',
mode: 'local',
selectOnFocus: true,
width: 135
});
var folders = [{
'folderId': '1',
'folderName': '收信箱'
}, {
'folderId': '2',
'folderName': '发信箱'
}];
//用于下拉列表的store
var foldersJsonStore = new Ext.data.SimpleStore({
fields: [{
name: 'folderId',
mapping: 'folderId'
}, {
name: 'folderName',
mapping: 'folderName'
}],
data: folders
});
foldersJsonStore.loadData(folders);
var combo = new Ext.form.ComboBox({
fieldLabel: '文件夹',
name: 'folderMoveTo',
store: foldersJsonStore,
displayField: 'folderName',
valueField: 'folderId',
mode: 'local',
typeAhead: true, //自动将第一个搜索到的选项补全输入
triggerAction: 'all',
emptyText: '全部',
selectOnFocus: true,
forceSelection: true
});
var provinces = [[1, '北京'], [2, '上海']];
var cities = new Array();
cities[1] = [[11, '海淀'], [22, '东城']];
cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];
var comboProvinces = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["provinceId", "provinceName"],
data: provinces
}),
listeners: {
select: function(combo, record, index){
comboCities.clearValue();
comboCities.store.loadData(cities[record.data.provinceId]);
}
},
valueField: "provinceId",
displayField: "provinceName",
mode: 'local',
forceSelection: true,
blankText: '请选择省份',
emptyText: '请选择省份',
hiddenName: 'provinceId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '请选择省份',
name: 'provinceId',
width: 80
});
var comboCities = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["cityId", 'cityName'],
data: []
}),
valueField: "cityId",
displayField: "cityName",
mode: 'local',
forceSelection: true,
blankText: '选择地区',
emptyText: '选择地区',
hiddenName: 'cityId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '选择地区',
name: 'cityId',
width: 80
});
var form = new Ext.form.FormPanel({
region: 'center',
labelWidth: 100,
border: false,
labelAlign: 'right',
applyTo: 'local1',
height: 200,
width: 400,
layout: 'form',
items: [storeList, combo,comboProvinces,comboCities]
});
});
</script>
</head>
<body>
<div id="local1"></div>
</body>
</html>
<html>
<head>
<title>ComboBoxTest.html</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css" />
<script type="text/javascript" src="ext/ext-base.js">
</script>
<script type="text/javascript" src="ext/ext-all.js">
</script>
<script type="text/javascript" src="ext/ext-lang-zh_CN.js">
</script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var data = [['1', 'Lislie', 'D005', 'male'], ['2', 'Merry', 'D004', 'female'], ['3', 'Edison', 'D003', 'male'], ['4', 'Mark', 'D002', 'male'], ['5', 'Leeon', 'D001', 'male']];
// 格式化数据
var ds = new Ext.data.Store({
proxy: new Ext.data.MemoryProxy(data), // 数据源
reader: new Ext.data.ArrayReader({}, [ // 如何解析
{
name: 'id'
}, {
name: 'name'
}, {
name: 'depno'
}, {
name: 'sex'
}])
});
ds.load();
var storeList = new Ext.form.ComboBox({
store: ds,
fieldLabel: 'dfsfsd',
allowBlank: false,
forceSelection: true,
valueField: 'id', // option.value
typeAhead: true,
displayField: 'name', // option.text
triggerAction: 'all',
emptyText: 'Select a store...',
mode: 'local',
selectOnFocus: true,
width: 135
});
var folders = [{
'folderId': '1',
'folderName': '收信箱'
}, {
'folderId': '2',
'folderName': '发信箱'
}];
//用于下拉列表的store
var foldersJsonStore = new Ext.data.SimpleStore({
fields: [{
name: 'folderId',
mapping: 'folderId'
}, {
name: 'folderName',
mapping: 'folderName'
}],
data: folders
});
foldersJsonStore.loadData(folders);
var combo = new Ext.form.ComboBox({
fieldLabel: '文件夹',
name: 'folderMoveTo',
store: foldersJsonStore,
displayField: 'folderName',
valueField: 'folderId',
mode: 'local',
typeAhead: true, //自动将第一个搜索到的选项补全输入
triggerAction: 'all',
emptyText: '全部',
selectOnFocus: true,
forceSelection: true
});
var provinces = [[1, '北京'], [2, '上海']];
var cities = new Array();
cities[1] = [[11, '海淀'], [22, '东城']];
cities[2] = [[33, '黄埔'], [44, '浦东'], [55, '静安']];
var comboProvinces = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["provinceId", "provinceName"],
data: provinces
}),
listeners: {
select: function(combo, record, index){
comboCities.clearValue();
comboCities.store.loadData(cities[record.data.provinceId]);
}
},
valueField: "provinceId",
displayField: "provinceName",
mode: 'local',
forceSelection: true,
blankText: '请选择省份',
emptyText: '请选择省份',
hiddenName: 'provinceId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '请选择省份',
name: 'provinceId',
width: 80
});
var comboCities = new Ext.form.ComboBox({
store: new Ext.data.SimpleStore({
fields: ["cityId", 'cityName'],
data: []
}),
valueField: "cityId",
displayField: "cityName",
mode: 'local',
forceSelection: true,
blankText: '选择地区',
emptyText: '选择地区',
hiddenName: 'cityId',
editable: false,
triggerAction: 'all',
allowBlank: true,
fieldLabel: '选择地区',
name: 'cityId',
width: 80
});
var form = new Ext.form.FormPanel({
region: 'center',
labelWidth: 100,
border: false,
labelAlign: 'right',
applyTo: 'local1',
height: 200,
width: 400,
layout: 'form',
items: [storeList, combo,comboProvinces,comboCities]
});
});
</script>
</head>
<body>
<div id="local1"></div>
</body>
</html>