Ext form + radiogroup问题

发布网友发布时间：2022-05-05 07:54

共1个回答

热心网友时间：2022-04-24 22:03

这是我曾经写的一个人员表查询，里面也有下拉表，你看看对你有用吗？
-----------------------------
Ext.onReady(function(){
Ext.QuickTips.init();

var empFields = new Ext.data.Record.create([
{name:"id",type:"int"},
{name:"name",type:"string"},
{name:"eno",type:"string"},
{name:"sex",type:"string"},
{name:"age",type:"string"},
{name:"deptno",type:"string"},
{name:"birthday",type:"date" ,dateFormat:"Y-n-j"},
{name:"birthplace",type:"string"},
{name:"nationality",type:"string"},
{name:"health",type:"string"},
{name:"marital",type:"string"},
{name:"worktime",type:"string"},
{name:"polity",type:"string"},
{name:"residence",type:"string"},
{name:"indate",type:"date" ,dateFormat:"Y-n-j" },
{name:"officialdate",type:"date" ,dateFormat:"Y-n-j"},
{name:"cellphone",type:"string"},
{name:"idcardno",type:"string"},
{name:"remark",type:"string"}
]);
//var sm = new Ext.grid.CheckboxSelectionModel({handleMouseDown: Ext.emptyFn});

var proxy = new Ext.data.HttpProxy({
url : '../../servlets/DeptServlet?command=findAllDept'
});

var reader = new Ext.data.JsonReader({
root : 'depts'
}, [{
name : 'deptname',
mapping : 'deptname'
},{
name : 'deptno',
mapping : 'deptno'
}]);

var combostore = new Ext.data.Store({
proxy : proxy,
reader : reader
});

combostore.load();

var cproxy = new Ext.data.HttpProxy({
url : '../../servlets/EmpServlet?command=findAllEmpno'
});

var creader = new Ext.data.JsonReader({
root : 'empnos'
}, [{
name : 'empno',
mapping : 'empno'
}]);

var ccombostore = new Ext.data.Store({
proxy : cproxy,
reader : creader
});

ccombostore.load();

//出生日期
var birthField = new Ext.form.DateField({
header: "出生日期",
id:"birthday",
dataIndex:"birthday",
timePicker:true,
allowBlank : false,
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
editor:new Ext.form.DateField({format:"Y-m-d",allowBlank:false,timePicker:true}) //在浏览器的grid里显示的格式
});

var colM = new Ext.grid.ColumnModel([
{header: "序号",
dataIndex:"id",
sortable: true,
width:50
},

{header: "姓名",
dataIndex:"name",
width:50,
editor: new Ext.form.TextField()},
{header: "编号",
dataIndex:"eno",
width:50 },
{header: "性别",
align : 'center',
dataIndex:"sex",
width:40,
disable:true,
editor: new Ext.form.ComboBox({
triggerAction:"all",lazyRender:true,
store:new Ext.data.SimpleStore({ fields:['supName'], data:[['男'],['女']]}),
displayField:'supName',valueField:'supName',typeAhead: true, mode: 'local',
forceSelection:true, selectOnFocus:true
})
},
{header: "年龄",
dataIndex:"age",
width:40,
align : 'center',
editor: new Ext.form.NumberField()},

{header: "所属部门",
dataIndex:"deptno",
width:100,
editor: new Ext.form.ComboBox({
triggerAction:"all",lazyRender:true,
store:combostore ,displayField:'deptname',valueField:'deptname',
typeAhead: true, mode: 'local', forceSelection:true, selectOnFocus:true
})
},
birthField,

{header: "出生地",
dataIndex:"birthplace",
width:60,
editor: new Ext.form.TextField()},
{header: "民族",
dataIndex:"nationality",
width:50,
editor: new Ext.form.TextField()},
{header: "健康状况",
dataIndex:"health",
width:100,
editor: new Ext.form.TextField()},
{header: "婚姻",
dataIndex:"marital",
width:50,
editor: new Ext.form.ComboBox({
triggerAction:"all",lazyRender:true,
store:new Ext.data.SimpleStore({ fields:['supName'], data:[['未婚'],['已婚']]})
, displayField:'supName',valueField:'supName',typeAhead: true, mode: 'local', forceSelection:true, selectOnFocus:true
})
},
{header: "用工期限",
dataIndex:"worktime",
width:100,
editor: new Ext.form.TextField()},
{header: "*面貌",
dataIndex:"polity",
width:100,
editor: new Ext.form.TextField()},
{header: "户口所在地",
dataIndex:"residence",
width:120,
editor: new Ext.form.TextField()},
{header: "聘任日期",
dataIndex:"indate",
allowBlank : false,
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
editor:new Ext.form.DateField({format:"Y-m-d",allowBlank:false,timePicker:true}) //在浏览器的grid里显示的格式
},
{header: "转正日期",
dataIndex:"officialdate",
allowBlank : false,
renderer:Ext.util.Format.dateRenderer('Y-m-d'),
editor:new Ext.form.DateField({format:"Y-m-d",allowBlank:false,timePicker:true}) //在浏览器的grid里显示的格式
},
{header: "移动号码",
dataIndex:"cellphone",
width:100,
editor: new Ext.form.TextField()},
{header: "身份证号码",
dataIndex:"idcardno",
width:120,
editor: new Ext.form.TextField()},
{header: "备注",
dataIndex:"remark",
editor: new Ext.form.ComboBox({
triggerAction:"all",lazyRender:true,
store:new Ext.data.SimpleStore({ fields:['supName'], data:[['在职'],['离职']]})
, displayField:'supName',valueField:'supName',typeAhead: true, mode: 'local', forceSelection:true, selectOnFocus:true
})
}
]);
colM.defaultSortable = true;

var store = new Ext.data.JsonStore({
url:'../../servlets/EmpServlet',
baseParams:{qname:'',qeno:'',qdeptno:'',command:'query'},
totalProperty:'count',
root:'emps',
fields:empFields,
pruneModifiedRecords:true,
sortInfo: {field: "id", direction: "ASC"}
});

var qnameField = new Ext.form.TextField({
fieldLabel:'姓名',
id:'qname',
name:'qname',
anchor:'100%'
});
var qenoField = new Ext.form.ComboBox({
fieldLabel:'编号',
id:'qeno',
name:'qeno',
store:ccombostore,
anchor:'100%',
triggerAction:"all",lazyRender:true,
displayField:'empno',valueField:'empno',
typeAhead: true, mode: 'local', forceSelection:true,
selectOnFocus:true
});
var qdeptnoField = new Ext.form.ComboBox({
fieldLabel:'所属部门',
id:'qdeptno',
name:'qdeptno',
store:combostore,
anchor:'100%',
triggerAction:"all",lazyRender:true,
displayField:'deptname',valueField:'deptname',
typeAhead: true, mode: 'local', forceSelection:true,
selectOnFocus:true
});
var btnSearch = new Ext.Button({
text:'查询',
iconCls:'search',
disabled:pri,
handler:function(){
if(qnameField.isValid() && qenoField.isValid()&& qdeptnoField.isValid()){
store.baseParams.qname=qnameField.getValue();
store.baseParams.qeno=qenoField.getValue();
store.baseParams.qdeptno=qdeptnoField.getValue();
}
store.load({params:{start:0,limit:20}});
}
});
var linkButton = new Ext.Button({
text: '导出到Excel',
iconCls:'toexcel',
handler: function() {
var vExportContent = grid.getExcelXml();
if (Ext.isIE6 || Ext.isIE7 || Ext.isIE8 || Ext.isSafari || Ext.isSafari2 || Ext.isSafari3) {
var fd=Ext.get('frmDummy');
if (!fd) {
fd=Ext.DomHelper.append(Ext.getBody(),{tag:'form',method:'post',id:'frmDummy',action:'../exportexcel.jsp', target:'right',name:'frmDummy',cls:'x-hidden',cn:[
{tag:'input',name:'exportContent',id:'exportContent',type:'hidden'}
]},true);
}
fd.child('#exportContent').set({value:vExportContent});
fd.dom.submit();
} else {
document.location = 'data:application/vnd.ms-excel;base64,'+Base64.encode(vExportContent);
}}
});

//表单窗体
var memberAddWindow;
var PassAddWindow;

var grid = new Ext.grid.EditorGridPanel({
renderTo:"showGrid",
title: "职员基本信息",
height: 680,
width: 1000,
cm: colM,
store: store,
frame:true,
clicksToEdit:1,
loadMask: true,
stripeRows:true,

tbar:[
{// 添加按钮
text:'添加',
iconCls:'user_add',
disabled:pri,
handler:function(){
var ef = new empFields({
name:'新员工',
sex:'男',
birthday:new Date(),
eno:'无',
age:'无',
deptno:'无',
birthplace:'无',
nationality:'无',
health:'良好',
marital:'未婚',
worktime:'3个月',
polity:'无',
residence:'无',
indate:new Date(),
officialdate:new Date(),
cellphone:'无',
idcardno:'无',
remark:'在职'
});
grid.stopEditing();
store.insert(0, ef);
grid.startEditing(0, 2);
store.getAt(0).dirty=true; // 设置该行记录为脏数据(默认为非脏数据),否则在保存时将无法判断该行是否已修改
}
},'-',
{//保存按钮
text:'保存',
iconCls:'save',
disabled:pri,
handler:function(){
var json = [];
for(i=0,cnt=store.getCount();i<cnt;i+=1){
var record = store.getAt(i);
if(record.dirty) // 得到所有修改过的数据
json.push(record.data);
}
if(json.length==0){
Ext.Msg.alert('信息','没有对数据进行任何更改');
return;
}

//发送保存请求
Ext.lib.Ajax.request(
'POST',
'../../servlets/EmpServlet',{
success:function(request){
var message = request.responseText;
Ext.Msg.alert('信息',message);
store.reload();
//grid.getView().refresh();
},
failure:function(request){
var message = request.responseText;
Ext.Msg.alert("错误", message);
}
},
'command=save&emps='+encodeURIComponent(Ext.encode(json))
);

}
},'-',
{
id:'newWindowButton',
text:'修改密码',
iconCls:'reset',
handler:function(){
showMemerAddWindow(); //显示表单所在窗体
}
},'-',
{
id:'newWindowButton2',
text:'修改密保',
iconCls:'reset',
handler:function(){
showPassAddWindow(); //显示表单所在窗体
}
},'-',
'姓名:',qnameField,'编号:',qenoField,'部门:',qdeptnoField,btnSearch,linkButton
],

bbar: new Ext.PagingToolbar({
pageSize: 20,
store: store,
displayInfo: true,
displayMsg: "显示第 {0} 条到 {1} 条记录，一共 {2} 条",
emptyMsg: "没有记录"
})
});

grid.on("afterEdit", afterEdit, grid);
function afterEdit(obj){
var r = obj.record;//获取被修改的行
var l = obj.field;//获取被修改的列

var indate = r.get("indate");
var birthday = r.get("birthday");
var officialdate = r.get("officialdate");
if(indate == ""){
alert('聘任日期不能为空!');
return;
}
if(birthday == ""){
alert('出生日期不能为空!');
return;
}
if(officialdate == ""){
alert('转正日期不能为空!');
return;
}
}
store.load({params:{start:0,limit:20}});

/**
* 以下是修改密码表单 __________________________________________________
* */

var oldpwdField = new Ext.form.TextField({
fieldLabel:'原密码',
name:'oldpwd',
inputType:'password',
allowBlank:false,
anchor:'90%'
});

var newpwdField = new Ext.form.TextField({
fieldLabel:'新密码',
name:'newpwd',
inputType:'password',
allowBlank:false,
anchor:'90%'
});

var repwdField = new Ext.form.TextField({
fieldLabel:'重复密码',
name:'repwd',
inputType:'password',
allowBlank:false,
anchor:'90%'
});

//表单对象
var memberForm = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: '修改密码',
width: 300,
url:'../../servlets/UserServlet?command=changepwd',

items: [{
layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
items:[
{//第一列
columnWidth:0.8,
layout: 'form',
items: [oldpwdField,newpwdField,repwdField]
}]
}],
buttons:[{
text:'提交',
handler:function(){
if(memberForm.getForm().isValid())
memberForm.getForm().submit({
waitMsg:'保存中,请稍后...',
success:function(){
memberForm.getForm().reset();
Ext.Msg.alert("修改成功！");
memberAddWindow.hide();
store.reload();
},
failure:function(){
memberForm.getForm().reset();
Ext.Msg.alert("修改失败，请确定输入正确！");
memberAddWindow.hide();
store.reload();
}
});
}
},{
text:'取消',
handler:function(){
memberForm.getForm().reset();
memberAddWindow.hide();
}
}]
});

//窗体对象
function showMemerAddWindow(){
if(!memberAddWindow){
memberAddWindow = new Ext.Window({
// el:'window_win',
layout:'fit',
width:300,
height:250,
closable:true,
closeAction:'hide',
plain:true,
items: [memberForm]
});
}
memberAddWindow.show();
}

/**
* 以下是修改密保表单 __________________________________________________
* */

var passpro = new Ext.form.TextField({
fieldLabel:'密保',
name:'passpro',
allowBlank:false,
anchor:'90%'
});

//表单对象
var PassForm = new Ext.FormPanel({
labelAlign: 'top',
frame:true,
title: '修改密保',
width: 300,
url:'../../servlets/UserServlet?command=changepro',

items: [{
layout:'column',// 该FormPanel的layout布局模式为列模式(column),包含2列
items:[
{//第一列
columnWidth:0.8,
layout: 'form',
items: [passpro]
}]
}],
buttons:[{
text:'提交',
handler:function(){
if(PassForm.getForm().isValid())
PassForm.getForm().submit({
waitMsg:'保存中,请稍后...',
success:function(){
PassForm.getForm().reset();
Ext.Msg.alert("修改成功！");
PassAddWindow.hide();
store.reload();
},
failure:function(){
PassForm.getForm().reset();
Ext.Msg.alert("修改失败，请确定输入正确！");
PassForm.hide();
store.reload();
}
});
}
},{
text:'取消',
handler:function(){
PassForm.getForm().reset();
PassAddWindow.hide();
}
}]
});

//窗体对象
function showPassAddWindow(){
if(!PassAddWindow){
PassAddWindow = new Ext.Window({
// el:'window_win',
layout:'fit',
width:300,
height:250,
closable:true,
closeAction:'hide',
plain:true,
items: [PassForm]
});
}
PassAddWindow.show();
}

});