Ext Combobox使用 Demo

第一步：JSP页面代码

<td>定时Flush：</td> <td colspan="3"> <table border="0" cellspacing="0"> <tr> <td><input type="text" name="flushtime" id="flushtime" size="20" maxlength="5" onkeyup="regNum(this)"/></td> <td style="padding-left: 5px;" mce_style="padding-left: 5px;"> <select id="unit_flush" style="cursor: pointer;" mce_style="cursor: pointer;"> <option value="1">分</option> <option value="2">时</option> </select> </td> <td><span id="flush_msg" class="msg" style="padding: 0" mce_style="padding: 0"></span></td> </tr> </table> </td>

第二步：JavaScript代码

 

function initFlushTime() { var datasource = new Ext.data.Store( { proxy : new Ext.data.HttpProxy( { url : 'cache/write/flushTime.jsp?id=1' }), reader : new Ext.data.JsonReader( {}, [ 'value', 'text' ]) }); datasource.load(); var flushCombobox = new Ext.form.ComboBox( { store : datasource, width : 153, valueField : 'value', displayField : 'text', typeAhead : true, mode : 'local', triggerAction : 'all', emptyText : '-请选择-', selectOnFocus : true, applyTo : "flushtime" }); var fatjames = Ext.get("unit_flush"); fatjames.on("change", function() { flushCombobox.reset(); datasource.proxy = new Ext.data.HttpProxy( { url : 'cache/write/flushTime.jsp?id=' + fatjames.dom.value }); datasource.load(); }); }

第三步：请求的数据源数据示例

<% if(request.getParameter("id").equals("1")){ %> [{"value":"1","text":"1"},{"value":"5","text":"5"},{"value":"10","text":"10"}, {"value":"20","text":"20"},{"value":"30","text":"30"},{"value":"40","text":"40"},{"value":"50","text":"50"}] <% }else if(request.getParameter("id").equals("2")){ %> [{"value":"1","text":"1"},{"value":"2","text":"2"},{"value":"5","text":"5"}, {"value":"8","text":"8"},{"value":"10","text":"10"},{"value":"12","text":"12"},{"value":"24","text":"24"}] <% } %>