继续之前的留守儿童界面修改，新添加了东西。
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', //add
reader : 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>
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
