日期:2014-05-16 浏览次数:20560 次
?? ?
?? 这几天,研究了一下Extjs,做了一个关于Extjs动态创建Checkboxgroup的例子,也参照了网上的一些代码。Web JSP页面代码如下:
??
<%@ page language="java" contentType="text/html; charset=GB18030"
pageEncoding="GB18030"%>
<!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=GB18030">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="../extjs/resources/css/ext-all.css"/>
<script type="text/javascript" src="../extjs/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../extjs/ext-all.js"></script>
<script type="text/javascript" src="../extjs/ext-basex.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var MyCheckboxGroup=Ext.extend(Ext.form.CheckboxGroup,{
columns:4,
dataUrl:'', //数据地址
labelFiled:'label',
valueFiled:'value',
setValue:function(val){
alert(val);
if(val.split){
val=val.split(',');
}
this.reset();
for(var i=0;i <val.length;i++){
this.items.each(function(c){
//debugger;
if(c.inputValue==val[i]){
c.setValue(true);
}
});
}
},
reset:function(){
this.items.each(function(c){
c.setValue(false);
});
},
getValue:function(){
var val=[];
this.items.each(function(c){
if(c.getValue()==true)
val.push(c.inputValue);
});
return val.join(',');
},
onRender:function(ct, position){
var items=[];
if(!this.items){
/*
Ext.Ajax.request({
url:this.dataUrl,
scope:this,
async:false,
success: function(resp,opts) {
var respText = Ext.util.JSON.decode(resp.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue};
items.push(chk);
}
}
});
*/
/**
//传统AJAX
var obj;
if (window.ActiveXObject) {
obj = new ActiveXObject('Microsoft.XMLHTTP');
}
else if (window.XMLHttpRequest) {
obj = new XMLHttpRequest();
}
obj.open('GET', this.dataUrl, false);
obj.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
obj.send(null);
var respText = Ext.util.JSON.decode(obj.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue};
items.push(chk);
}
*/
/*Ext Ajax*/
var conn = Ext.lib.Ajax.getConnectionObject().conn;
conn.open("get", this.dataUrl,false);
conn.send(null);
// 成功状态码为200
if (conn.status == "200") {
var respText = Ext.util.JSON.decode(conn.responseText);
for(var i=0;i <respText.totalCount;i++){
var d=respText.records[i];
var chk ={boxLabel:d.boxLabel, name: d.name, inputValue:d.inputValue,checked:d.check};
items.push(chk);
}
}
this.items=items;
}
MyCheckboxGroup.superclass.onRender.call(this, ct, position);