extjs 之 list checkbox
来源:互联网 发布:苹果电脑装mac系统 编辑:程序博客网 时间:2024/06/11 17:30
本例完成在一个listview中放入checkbox列表,设计知识:Ext.XTemplate和Ext.DataView
源码如下
function casereport_init() {function oncheck(str) {if (Ext.fly('box' + str).hasClass('checked')) {Ext.fly('box' + str).removeClass('checked');document.getElementById('check' + str).checked = false;} else {Ext.fly('box' + str).addClass('checked');document.getElementById('check' + str).checked = true;}}var proxyData = new Ext.data.HttpProxy({url : 'GetCaseReportType'});var strData = new Ext.data.JsonStore({proxy : proxyData,root : 'data',fields : [ 'id', 'message' ]});var tplData = new Ext.XTemplate('<tpl for=".">','<div class="databox" id="box{id}" onclick="oncheck({id})">','<input type="checkbox" id="check{id}" value="c{id}"> ',' {message}</div>', '</tpl>', '<div class="x-clear"></div>');var dataV = new Ext.DataView({autoScroll : true,store : strData,tpl : tplData,autoHeight : true,height : 265,multiSelect : true,itemSelector : 'div.thumb-wrap',emptyText : 'No data to display',loadingText : 'Please Wait...'//,//style : 'border:1px solid #99BBE8;background:#fff;'});function checkvalue() {var obj = Ext.select('input[type=checkbox]').elements;var i = 0;var cb = '';var total = 0;for (i = 0; i < obj.length; i++) {if (obj[i].checked) {cb = cb + ' ' + obj[i].value;total++;}}Ext.MessageBox.alert('Checked', 'You clicked ' + total+ ' checkbox, they value are ' + cb);} var gen_button = new Ext.Toolbar.Button({ xtype:'button', text:'生成报表', handler: function(){ checkvalue(); } }); var outer_center_west = new Ext.Panel({region : 'west',width : Glb.outer_center.getWidth() * 0.25,height : Glb.outer_center.getHeight(),border : true,split : true,tbar:[gen_button],bodyStyle : 'padding:5px;',autoScroll : true,collapsible : true});outer_center_west.show();var outer_center_center = new Ext.Panel({region : 'center',width : Glb.outer_center.getWidth() * 0.7,height : Glb.outer_center.getHeight(),border : true,autoScroll : true,bodyStyle : 'padding:5px;',split : true});outer_center_center.show();outer_center_west.add(dataV);var caseReportPanel = new Ext.Panel({id : 'border-panel',layout : 'border',width : Glb.outer_center.getWidth(),height : Glb.outer_center.getHeight(),border : true,items : [ outer_center_west, outer_center_center ]});strData.load();Glb.outer_center.add(caseReportPanel);Glb.outer_center.show();Glb.outer_center.doLayout();}效果图如下
- extjs 之 list checkbox
- Extjs之checkbox修改boxLabel的值
- ExtJs之Radio和CheckBox实例
- ExtJs之treePanel checkbox 复选框
- checkbox的extjs实例
- Extjs checkbox处理
- extjs -- checkbox radio
- extjs treePanel checkBox级联
- EXTJS 动态添加Checkbox
- ExtJS 显示checkbox, radio数据
- extjs判断checkbox是否选中
- ExtJs 设置checkbox 全选/全不选
- Extjs中checkbox和checkboxgroup
- extjs 4.0 checkbox全选失效
- (12)ExtJS之Ext.form.field.Radio、Ext.form.field.Checkbox
- 练习Checkbox list
- Checkbox Text List
- List显示checkBox
- 媒体播放器三大底层架构
- geoserver 绘制地图 "rendering process failed / by zero"
- 关于EF4里的 “关系”删除行为的解释
- VBScript类型转换函数
- httpclient添加代理
- extjs 之 list checkbox
- 看来我要好好学习一下,我的专业外语了
- Linux内核引导参数简介
- 根据UILabel内容调节UILabel的大小
- 我是不是得工作恐惧症了
- Windows上cwRsync备份服务器数据
- 清除ASP.net页面的HTML代码
- unix编程的for循环的几种格式
- asp vbscript 数组的使用