Extjs复习笔记（七）-- ComboBox的添加、修改-优快云博客

本文链接：https://blog.youkuaiyun.com/lybacm/article/details/83739947

ComboBox的测试，有几个方法没写完整，有待之后解决。。。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Combobox测试</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />

<script type="text/javascript" src="../../adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="../../ext-all.js">
</script>
<script type="text/javascript" src="../../build/locale/ext-lang-zh_CN.js">
</script>
<script language="javascript">
	Ext.onReady(function(){
		var JOB = Ext.data.Record.create([{name:"job"}]);
		
		var win = new Ext.Window({
			title:"ComboBox测试",
			layout:"form",
			labelWidth:45,
			plain:true,
			bodyStyle:"padding:5px",
			width:200,
			height:100,
			//defaults:[{xtype:"textfield",width:55}],
			items:[{
				fieldLabel:"职位",
				width:90,
				baseCls:"x-plain",
				xtype:"combo",
				mode:"local",		
				displayField:"job",		
				triggerAction:"all",
				value:"工程师",
				store:new Ext.data.SimpleStore({fields:["job"],
						data:[["工程师"],["经理"]]})
			},{
				layout:"column",
				baseCls:"x-plain",
				items:[{
				xtype:"button",
				columnWidth:.3,
				//width:40,
				text:"添加",
				listeners:{
					"click":function(){
						var _job = win.findByType("combo")[0];						
						Ext.MessageBox.prompt("添加","请输入要添加的职位名称：",function(_btn,_text){
							if(_btn == "ok"){
								//Ext.MessageBox.alert(_job.getValue(),_text);
								_job.getStore().insert(0,new JOB({job:_text}));
								this.setValue(_text) ;
							}
						},_job)
					}
				}
			},{
				xtype:"button",
				columnWidth:.3,
				//bodyStyle:"padding-left:5px",
				//width:40,
				text:"修改",
				listeners:{
					"click":function(){
						var _job = win.findByType("combo")[0];						
						Ext.MessageBox.prompt("修改","请修改相应的职位名称：",function(_btn,_text){
							if(_btn == "ok"){
								//_job["selectItem"].set("job",_text); //这个方法好像不起作用
								_job.setValue(_text); //只能做临时的修改，不会改变comboBox选项的内容的，要修改的话可以修改store
							}
						},_job,false,_job.getValue())
					}
				}
			},{
				xtype:"button",
				columnWidth:.3,
				//bodyStyle:"padding-left:5px",
				//width:40,
				text:"删除",
				listeners:{
					"click":function(){
						var _job = win.findByType("combo")[0];						
						Ext.MessageBox.confirm("注意","真要删除吗？",function(_btn){
							if(_btn == "yes"){
								//在这里删除comboBox里面的相应信息。
							}
						},_job)
					}
				}
			}]}]
		}).show();
	});
</script>
</head>

<body>

</body>
</html>