2016-6-23 html、extjs总结--在panel中加控件
来源：互联网 发布：linux中开启ftp端口号 编辑：程序博客网 时间：2024/06/12 21:22
继续之前的留守儿童界面修改，新添加了东西。
1.文本域textarea
<table align="center" class="table3" width="85%" cellspacing="0" cellpadding="0"><tr ><td class="td3" style="width:8%;">备注：</td><td style="width:92%"><textarea name="tg" class="area" > </textarea></td></tr></table>
.area{border:1px solid #NaNNaNNaN; overflow:auto; //不显示滚动条width:99%; margin-top:5px;margin-bottom:5px;margin-right:5px;height:80px;}①ComboBox
②CheckboxGroup
var BaseCheck = function(_userId) {this._userId = _userId;var panel = this.setup(this._userId);Ext.Ajax.request({scope : this,url:__ctxPath + '/system/isAggentedAppPostAgent.do',method:'POST',success:function(response,options){var object=Ext.util.JSON.decode(response.responseText);var isAggented = object.isAggented;if(isAggented) {//Ext.getCmp('postAggented').disable();} else {//Ext.getCmp('cancelAggented').disable();}},failure:function(response,options){Ext.ux.Toast.msg('操作信息', '撤审失败！');}});return panel;};BaseCheck.prototype.setup = function(userId) {var footToolbar = this.initFooterToolbar(userId);var BaseCheck = new Ext.form.FormPanel({title:'基本情况排查',id : 'BaseCheck',closable : true,iconCls : 'menu-customer',border : false, autoScroll : true,tbar : footToolbar,//工具栏url : __ctxPath + '/system/profileBaseCheckr.do', //addreader : new Ext.data.JsonReader({root : 'data'}, [{name : 'AddChild.address',mapping : 'address'},{name : 'AddChild.total',mapping : 'total'}, {name : 'AddChild.age',mapping : 'age'}, {name : 'AddChild.sex',mapping : 'sex'}, {name : 'appUser.email',mapping : 'email'}, {name : 'AddChild.education',mapping : 'education'}, {name : 'AddChild.check',mapping : 'check'}, {name : 'AddChild.lodgingschool',mapping : 'lodgingschool'}, {name : 'AddChild.healthGrade',mapping : 'healthGrade'}, {name : 'AddChild.custodyStyle',mapping : 'custodyStyle'}, {name : 'AddChild.appraisal',mapping : 'appraisal'}, {name : 'AddChild.familyMoneySource',mapping : 'familyMoneySource'},{name : 'AddChild.helpCondition',mapping : 'helpCondition'}]),items : [{xtype : "panel",id : 'CheckInfo',width : '700px',height : '700px',frame:false,layout :'form',border:false,labelAlign : "left",columns:1,hideLabels : false,items : [ new Ext.form.ComboBox({ name:'AddChild.address', fieldLabel: '地区', triggerAction: 'all', emptyText: '广西壮族自治区', mode: 'local', }), //第一部分 new Ext.form.CheckboxGroup({ items:[{ name:'AddChild.total', boxLabel: '总表', }] }), //第二部分 new Ext.form.CheckboxGroup({ items:[{name: 'AddChild.age',inputValue: '0',boxLabel: '0-5岁',},{name: 'AddChild.age',inputValue: '1',boxLabel: '6(含)-13岁',},{name: 'AddChild.age',inputValue: '2',boxLabel: '14(含)-16岁',},{name: 'AddChild.sex',inputValue: 'man',boxLabel: '男',},{name: 'AddChild.sex',inputValue: 'woman',boxLabel: '女',}] }), //第三部分 new Ext.form.CheckboxGroup({ items:[{ boxLabel: '就学情况', name: 'AddChild.education', }] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.education', inputValue: 'null', boxLabel: '未入学', }, { name: 'AddChild.education', inputValue: 'kindergarten', boxLabel: '幼儿园', },{ name: 'AddChild.education', inputValue: 'primaryschool', boxLabel: '小学', },{ name: 'AddChild.education', inputValue: 'juniorschool', boxLabel: '初中', },{ name: 'AddChild.education', inputValue: 'highschool', boxLabel: '高中', },{ name: 'AddChild.education', inputValue: 'secondaryschool', boxLabel: '中职', },{ name: 'AddChild.education', inputValue: 'leaveschool', boxLabel: '辍学', },{ name: 'AddChild.education', inputValue: 'noshool', boxLabel: '不在学', }] }), //第四部分 new Ext.form.CheckboxGroup({ items:[{ boxLabel: '户籍情况', name: 'AddChild.check', }] }), new Ext.form.CheckboxGroup({ columns:3, items: [{ name: 'AddChild.check', inputValue: 'yes', boxLabel: '已登记户口', }, { name: 'AddChild.check', inputValue: 'no', boxLabel: '未登记户口', }] }), //第五部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '义务教育在校生寄宿情况',}] }), new Ext.form.CheckboxGroup({ columns:3, items: [{ name: 'AddChild.lodgingschool', inputValue: 'yes', boxLabel: '寄宿生', }, { name: 'AddChild.lodgingschool', inputValue: 'no', boxLabel: '非寄宿生', }] }), //第六部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '健康状况',}] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.healthGrade', inputValue: 'healty', boxLabel: '健康', }, { name: 'AddChild.healthGrade', inputValue: 'disabled', boxLabel: '残疾', },{ name: 'AddChild.healthGrade', inputValue: 'sick', boxLabel: '患病', }] }), //第七部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '实际监护情况',}] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.custodyStyle', inputValue: 'relative', boxLabel: '祖父母、外祖父母', }, { name: 'AddChild.custodyStyle', inputValue: 'friends', boxLabel: '亲戚朋友', },{ name: 'AddChild.custodyStyle', inputValue: 'noman', boxLabel: '无人监护', },{ name: 'AddChild.custodyStyle', inputValue: 'single', boxLabel: '父或母无监护能力', }] }), //第八部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '监护情况评估',}] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.appraisal', inputValue: 'verygood', boxLabel: '较好', }, { name: 'AddChild.appraisal ', inputValue: 'good', boxLabel: '一般', },{ name: 'AddChild.appraisal ', inputValue: 'bad', boxLabel: '差', }] }), //第九部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '家庭经济来源',}] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.familyMoneySource', inputValue: '1', boxLabel: '打工', }, { name: 'AddChild.familyMoneySource ', inputValue: '2', boxLabel: '种养殖业', },{ name: 'AddChild.familyMoneySource ', inputValue: '3', boxLabel: '政府救助', },{ name: 'AddChild.familyMoneySource ', inputValue: '4', boxLabel: '亲朋接济', },{ name: 'AddChild.familyMoneySource ', inputValue: '5', boxLabel: '其他', }] }), //第十部分 new Ext.form.CheckboxGroup({ items:[{boxLabel: '救助帮扶情况',}] }), new Ext.form.CheckboxGroup({ items: [{ name: 'AddChild.helpCondition', inputValue: '1', boxLabel: '低保', }, { name: 'AddChild.helpCondition ', inputValue: '2', boxLabel: '临时救助', },{ name: 'AddChild.helpCondition ', inputValue: '3', boxLabel: '医疗救助', },{ name: 'AddChild.helpCondition ', inputValue: '4', boxLabel: '住房救助', },{ name: 'AddChild.helpCondition ', inputValue: '5', boxLabel: '其他救助', }] }), ]}]}); BaseCheck.getForm().load({deferredRender : false,url : __ctxPath + '/system/getAppUser.do',waitMsg : '正在载入数据...',success : function(form, action) {},failure : function(form, action) {Ext.ux.Toast.msg('编辑', '载入失败');}});return BaseCheck;};// 初始化操作菜单BaseCheck.prototype.initFooterToolbar = function(userId) {var toolbar = new Ext.Toolbar({id : 'BaseCheckToolbar',width : '100%',height : 30,items : [{text : '保存',iconCls : 'btn-save',handler : function() {var userform = Ext.getCmp('BaseCheck'); if(userform.getForm().isValid()){userform.getForm().submit({waitMsg : '正在提交用户信息',success : function(userform, o) {Ext.ux.Toast.msg('操作信息', '保存成功！')var userview = Ext.getCmp('AppUserGrid');if (userview != null) {// 假如员工列表不为空,则重载数据userview.getStore().reload({start : 0,limit : 15});}//var tabs = Ext.getCmp('centerTabPanel');//var proForm = Ext.getCmp('BaseCheck');//tabs.remove(proForm)}});}}}, {text : '取消',iconCls : 'reset',handler : function() {var tabs = Ext.getCmp('centerTabPanel');tabs.remove('BaseCheck');}}, {text : '查询',iconCls : 'search',}]});return toolbar;};遇到的问题：1.panel的边框去不掉，查API，border是boolean类型的
2.控制CheckboxGroup中选项的间距用columns
columns : String/Number/Array
使用自动布局显示 checkbox/radio 组的时候使用的列的数目...
使用自动布局显示 checkbox/radio 组的时候使用的列的数目，这个配置选项可以有多种不同的类型的值。
- 'auto' :
渲染的时候，组件会一列挨着一列，每一列的宽度按照整行的宽度均分。默认的是auto
- Number :
如果你指定了一个像 3 这样的数字，那么将会创建指定的数目的列，包含的组建将会根据vertical的值 自动的分发。
- Array : Object
你也可以指定一个整形和浮点型的数字组成的数组来表示各个列的宽度，比如[100, .25, .75]。Any integer values will be rendered first, 所有的整数型值会被先用来渲染，然后剩下的浮点型值将会被当做剩下的空间的百分比来计算。虽然不用使数据里的浮点型的值的和为一(100%)， 但是如果你想要让组件填充满容器，你应该是他们的和为一。
extjs还在不断学习中，我昨天才发现API是个好东西，一定要多看！
下拉列表ComboBox--http://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559421.html
单选组、多选组--http://www.cnblogs.com/iamlilinfeng/archive/2012/06/23/2559234.html
*3.昨天拿到别人的代码，发现了之前不会写的一个功能。在表格中添加一个“+”按钮，点击自动加一行。
<input id="relativesName" type="button" value="+" class="add"/><span>姓名</span><input id="relativesName" type="button" value="-" class="add"/>
<script type="text/javascript"> var familySituation = document.getElementById('familySituation');$('#childrenName').click(function(){var rowIndex = $('#rowIndex');var currentRowId = rowIndex.val();//要添加的行的id var addRowID=currentRowId+1;var str = "<tr id='"+addRowID+"'><span style="white-space:pre"></span><td colspan='2'><input class='tableInput input_8' name='childrenName1'/></td><span style="white-space:pre"></span><td colspan='2'></td><span style="white-space:pre"></span><td colspan='3'><input class='tableInput input_9' name='childrenAddress1'/></td><span style="white-space:pre"></span><td colspan='2'></td><span style="white-space:pre"></span><td colspan='2'><select class='select_2' name='whetherHasSupport'></select></td><span style="white-space:pre"></span><td colspan='2'><input type='text' class='tableInput input_2' name='childrenTel1'/></td></tr>";<span style="white-space:pre"></span>addRowByID(currentRowId, str);<span style="white-space:pre"></span>rowIndex.val(currentRowId+1);<span style="white-space:pre"></span>var num=familySituation.rowSpan+1;<span style="white-space:pre"></span>familySituation.rowSpan=num;});$('#relativesName').click(function(){var relativesSituation = document.getElementById('relativesSituation');var rowIndex = $('#rowIndex2');var currentRowId = rowIndex.val();//要添加的行的id var addRowID=currentRowId+1;var str = "<tr id='"+addRowID+"'><td colspan='2'><input type='text' class='tableInput input_1'/></td><td colspan='2'><input type='text' class='tableInput input_1'/></td><td colspan='2'><input type='text' class='tableInput input_1'/></td><td colspan='5'><input type='text' class='tableInput input_4'/></td></tr>";addRowByID(currentRowId, str);rowIndex.val(currentRowId+1);familySituation.rowSpan=familySituation.rowSpan+1;relativesSituation.rowSpan=relativesSituation.rowSpan+1;});function addRowByID(currentRowId, str){ //遍历每一行，找到指定id的行的位置i,然后在该行后添加新行 $.each( $('table:first tbody tr'), function(i, tr){ if($(this).attr('id')==currentRowId){ //获取当前行 var currentRow=$('table:first tbody tr:eq('+i+')'); //当前行之后插入一行 currentRow.after(str); } }); } </script> 0 0
- 2016-6-23 html、extjs总结--在panel中加控件
- Extjs 中在一个Panel中嵌入html元素
- (28)ExtJS之在Panel中使用html配置项自定义面板的内容
- EXTjs中如何获取Panel中html的内容
- 在Html页面中获取Extjs Tree控件
- 将百度地图放入EXTJS的panel控件中
- ExtJs中panel学习
- ExtJS 控件的基础 Panel
- Extjs 面板控件panel应用
- 在Panel控件中添加窗体
- extjs在panel中动态添加模板并加载数据
- 在HTML 中加视频
- extjs如何操作panel的html
- Extjs 为panel动态添加html页面
- ExtJs 复杂的panel设置控件只读
- ExtJs 查看到panel中元素值 【请求得到html的值】
- 重写panel控件，加自定义边框颜色
- 如何动态的在panel中显示控件
- nginx前端，tomcat后端服务器获取客户的真实IP，包括tomcat访问日志获取真实IP的配置
- leetcode 204 Count Primes
- jquery mobile开发手机webapp页面（三）拖动排序插件Sortable
- Linux——bug记录
- esxi error 1962
- 2016-6-23 html、extjs总结--在panel中加控件
- python使用基础
- java多线程--优先级
- web容器 web服务器 servlet/jsp容器 之间的区别和关系
- python+opencv开发环境之不能import cv的问题
- HDU 2829 (斜率优化)
- 我的shiro之旅:自定义filter
- 编码转换工具编写笔记
- Word Break II
