<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>combox</title> <!-- ExtJS --> <link rel="stylesheet" type="text/css" href="EXTJS/resources/css/ext-all.css" /> <script type="text/javascript" src="EXTJS/bootstrap.js"></script> <!-- Example --> <script type="text/javascript"> Ext.onReady(function() { //json数据 var states = [ {"id":"1","name":"总经理"}, {"id":"2","name":"总监"}, {"id":"3","name":"经理"}, {"id":"3","name":"职员"} ]; //数据字段 Ext.regModel('State', { fields: [ {type: 'string', name: 'id'}, {type: 'string', name: 'name'} ] }); //创建数据源 var store = Ext.create('Ext.data.Store', { model: 'State', data: states }); //单选combox(不可编辑) var SingleCombox = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '权限', //显示名 renderTo: 'SingleCombox', //对应ID displayField: 'name', //显示字段 width: 150, //combox宽 multiSelect:false, //是否多选 labelWidth: 35, //label长度 store: store, //数据源 queryMode: 'local', //最好设定queryMode为local，这样可以提高用户的响应速度 editable:false //是否可以编辑 }); //单选combox(可编辑) var SingleComboxEdit = Ext.create('Ext.form.field.ComboBox', { fieldLabel: '权限', renderTo: 'SingleComboxEdit', displayField: 'name', width: 150, multiSelect:false, labelWidth: 35, store: store, queryMode: 'local', editable:true }); //多选combox(不可编辑) var MultipleCombox=Ext.create('Ext.form.field.ComboBox',{ fieldLabel:'权限', renderTo:'MultipleCombox', displayField:'name', width:150, multiSelect:true, labelWidth:35, store: store, queryMode: 'local', editable:false }); //多选combox(可编辑) var MultipleComboxEdit=Ext.create('Ext.form.field.ComboBox',{ fieldLabel:'权限', renderTo:'MultipleComboxEdit', displayField:'name', width:150, multiSelect:true, labelWidth:35, store: store, queryMode: 'local', editable:true }); }); </script> </head> <body> <span>单选combox(不可编辑)</span><br/><div id="SingleCombox"></div><hr/> <span>单选combox(可编辑)</span><br/><div id="SingleComboxEdit"></div><hr/> <span>多选combox(不可编辑)</span><br/><div id="MultipleCombox"></div><hr/> <span>多选combox(可编辑)</span><br/><div id="MultipleComboxEdit"></div><hr/> </body> </html> 在33-41行我已经给了一些注释，刚看了EXTJS被它吸引，以前自己一直研究jquery ui,现在觉得EXTJS 有面向对象的思想，非常适合咱们编程人员学习。
