- 浏览: 191706 次
- 性别:
- 来自: 北京
最新评论
-
WH_LPWH:
哥呀 牛逼 大赞一个
使用JAVA写出DBF出现乱码和数据错位 -
z390174504:
不错啊...ID和hide不能一样,多谢
后台取不到extJs2.3的comboBox手写输入的值 -
三里小龙:
linwei_211 写道三里小龙 写道mysql也会出现类似 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
linwei_211:
三里小龙 写道mysql也会出现类似的情况,但这个理由有点牵强 ...
java.sql.SQLException: 无法从套接字读取更多的数据 -
三里小龙:
mysql也会出现类似的情况,但这个理由有点牵强附会
java.sql.SQLException: 无法从套接字读取更多的数据
<script type="text/javascript">
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var cm=new Ext.grid.ColumnModel([
sm,
{
header : "员工编号",
dataIndex : "eid",
sortable:true
}, {
header : "员工姓名",
dataIndex : "ename"
}, {
header : "邮箱",
dataIndex : "eemail"
}, {
header : "地址",
dataIndex : "eaddress"
}, {
header : "工资",
dataIndex : "salary"
},{
header:"部门",
dataIndex:"did"
}
])
var store = new Ext.data.JsonStore({
url : 'getEmployeeWeb?id='+<%=id%>,
root : 'rows',
fields : ['did', 'eemail', 'eaddress', 'ename', 'eid', 'salary']
});
Ext.onReady(function() {
store.load({ params: { start: 0, limit: 2 }});
var grid = new Ext.grid.GridPanel({
id:'employeegrid',
renderTo : "employee",
title : "员工信息",
height : 635,
width : 900,
cm:cm,
store : store,
autoExpandColumn : 2,
sm:sm,
trackMouseOver:true,
stripeRows:true,
viewConfig: {
forceFit:true ,//平均分配列
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列"
},
//分页
bbar:new Ext.PagingToolbar({
store:store, //数据源
pageSize:2,
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录', //显示右下角信息
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
}),
tbar: //工具条
[
{
text: '添加',
handler: function(btn, pressed)
{
AddEmployeeInfo(); //添加新的员工信息
}
}, '-',
{
text: '修改',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
editEmployee(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{
deleteEmployee(row[0]);//删除角色信息
}
else
{
}
})
}
}
}
],
listeners : {
// 点击行弹出一个窗体
rowclick : function(grid, row) {
//doubleclick();
}
}
});
/*********************删除员工信息****************************/
function deleteEmployee(record){
Ext.Ajax.request({
url : 'deleteEmployeeWeb',//Ajax请求路径,返回success or false
params:{
eid:record.get("eid")
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","删 除 成 功!");
//window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","删 除 失 败!");
//window.close();
}
}
}
})
}
/*********************编辑员工信息****************************/
function editEmployee(record) {
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
items : new Ext.FormPanel({
id : 'employee-form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
items : [{
fieldLabel : '员工编号',
id:'id',
readOnly:true,
value : record.get("eid")
},
{
fieldLabel : '部门编号',
id:'did',
readOnly:true,
value : record.get("did")
},
{
fieldLabel : '姓名',
name : 'ename',
id:'ename',
value : record.get("ename")
}, {
fieldLabel : '邮箱',
name : 'eemail',
id:'eemail',
value : record.get("eemail")
}, {
fieldLabel : '地址',
id:'eaddress',
name : 'eaddress',
value : record.get("eaddress")
}, {
fieldLabel : '工资',
id:'salary',
name : 'salary',
value : record.get("salary")
},{
xtype : 'panel',
layout : 'fit',
id : 'loginform-btnpanel',
border : false
}
],
buttons: [{
text: '保存',
handler:function(){
Ext.Ajax.request({
url : 'editEmployeeWeb',//Ajax请求路径,返回success or false
params:{
id:document.getElementById("id").value+"/"+document.getElementById("ename").value+
'/'+document.getElementById("eemail").value+"/"+
document.getElementById("eaddress").value+"/"+
document.getElementById("salary").value+"/"+
document.getElementById("did").value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败!");
window.close();
}
}
}
})
}
},{
text: '取消',
handler:function(){
window.close();
}
}]
}),
plain : true,
title : "个人详细信息"
})
window.show();
}
});
/**************添加员工信息**********************/
function AddEmployeeInfo(){
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
plain : true,
title : "员工信息",
items:new Ext.FormPanel({
id : 'addEmployee_form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
baseCls:"x-plain",
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
items:[
{
name:"id",
id:"id",
xtype:"hidden",
value:"<%=id%>"
},
{
fieldLabel:"姓名",//文本框标题
name:"ename",
id:"ename"
}
,
{
fieldLabel:"邮箱",//文本框标题
name:"eemail",
id:"eemail"
}
,
{
fieldLabel:"地址",//文本框标题
name:"eaddress",
id:"eaddress"
}
,
{
fieldLabel:"工资",//文本框标题
name:"salary",
id:"salary"
}
],
buttons:[{text:"确定",handler:function(){
Ext.Ajax.request({
//请求地址
url:'addEmployeeWeb',
//提交参数组
params: {
id:Ext.get('id').dom.value,
ename:Ext.get('ename').dom.value,
eemail:Ext.get('eemail').dom.value,
eaddress:Ext.get('eaddress').dom.value,
salary:Ext.get('salary').dom.value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败!");
window.close();
}
}
}
});
}},{text:"取消",handler:function(){window.close()}}]
})
})
window.show();
}
</script>
var sm = new Ext.grid.CheckboxSelectionModel({
dataIndex:"roleId"
});
var cm=new Ext.grid.ColumnModel([
sm,
{
header : "员工编号",
dataIndex : "eid",
sortable:true
}, {
header : "员工姓名",
dataIndex : "ename"
}, {
header : "邮箱",
dataIndex : "eemail"
}, {
header : "地址",
dataIndex : "eaddress"
}, {
header : "工资",
dataIndex : "salary"
},{
header:"部门",
dataIndex:"did"
}
])
var store = new Ext.data.JsonStore({
url : 'getEmployeeWeb?id='+<%=id%>,
root : 'rows',
fields : ['did', 'eemail', 'eaddress', 'ename', 'eid', 'salary']
});
Ext.onReady(function() {
store.load({ params: { start: 0, limit: 2 }});
var grid = new Ext.grid.GridPanel({
id:'employeegrid',
renderTo : "employee",
title : "员工信息",
height : 635,
width : 900,
cm:cm,
store : store,
autoExpandColumn : 2,
sm:sm,
trackMouseOver:true,
stripeRows:true,
viewConfig: {
forceFit:true ,//平均分配列
columnsText:"显示/隐藏列",
sortAscText:"正序排列",
sortDescText:"倒序排列"
},
//分页
bbar:new Ext.PagingToolbar({
store:store, //数据源
pageSize:2,
displayInfo:true,
displayMsg:'当前记录 {0} -- {1} 条 共 {2} 条记录', //显示右下角信息
emptyMsg:"No results to display",
prevText:"上一页",
nextText:"下一页",
refreshText:"刷新",
lastText:"最后页",
firstText:"第一页",
beforePageText:"当前页",
afterPageText:"共{0}页"
}),
tbar: //工具条
[
{
text: '添加',
handler: function(btn, pressed)
{
AddEmployeeInfo(); //添加新的员工信息
}
}, '-',
{
text: '修改',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections();//选择行的个数
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else if(row.length>1){
Ext.Msg.alert("提示信息","对不起只能选择一个!");
}else if(row.length==1)
{
editEmployee(row[0]);//传行一行记录直接加载 编辑角色信息
}
}
}, '-',
{
text: '删除',
handler: function(btn, pressed)
{
var row=Ext.getCmp("employeegrid").getSelectionModel().getSelections(); //获取选中的行
if(row.length==0)
{
Ext.Msg.alert("提示信息","请您至少选择一个!");
}
else{
Ext.Msg.confirm("提 示!","您确定要删除吗?",function(btn){
if(btn=="yes")
{
deleteEmployee(row[0]);//删除角色信息
}
else
{
}
})
}
}
}
],
listeners : {
// 点击行弹出一个窗体
rowclick : function(grid, row) {
//doubleclick();
}
}
});
/*********************删除员工信息****************************/
function deleteEmployee(record){
Ext.Ajax.request({
url : 'deleteEmployeeWeb',//Ajax请求路径,返回success or false
params:{
eid:record.get("eid")
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","删 除 成 功!");
//window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","删 除 失 败!");
//window.close();
}
}
}
})
}
/*********************编辑员工信息****************************/
function editEmployee(record) {
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
items : new Ext.FormPanel({
id : 'employee-form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
items : [{
fieldLabel : '员工编号',
id:'id',
readOnly:true,
value : record.get("eid")
},
{
fieldLabel : '部门编号',
id:'did',
readOnly:true,
value : record.get("did")
},
{
fieldLabel : '姓名',
name : 'ename',
id:'ename',
value : record.get("ename")
}, {
fieldLabel : '邮箱',
name : 'eemail',
id:'eemail',
value : record.get("eemail")
}, {
fieldLabel : '地址',
id:'eaddress',
name : 'eaddress',
value : record.get("eaddress")
}, {
fieldLabel : '工资',
id:'salary',
name : 'salary',
value : record.get("salary")
},{
xtype : 'panel',
layout : 'fit',
id : 'loginform-btnpanel',
border : false
}
],
buttons: [{
text: '保存',
handler:function(){
Ext.Ajax.request({
url : 'editEmployeeWeb',//Ajax请求路径,返回success or false
params:{
id:document.getElementById("id").value+"/"+document.getElementById("ename").value+
'/'+document.getElementById("eemail").value+"/"+
document.getElementById("eaddress").value+"/"+
document.getElementById("salary").value+"/"+
document.getElementById("did").value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败!");
window.close();
}
}
}
})
}
},{
text: '取消',
handler:function(){
window.close();
}
}]
}),
plain : true,
title : "个人详细信息"
})
window.show();
}
});
/**************添加员工信息**********************/
function AddEmployeeInfo(){
var window = new Ext.Window({
title : "窗口",
width : 400,
modal :true,//模式窗口
height : 250,
maximizable : true,
autoScroll : false,
plain : true,
title : "员工信息",
items:new Ext.FormPanel({
id : 'addEmployee_form',
labelWidth : 75,
hideMode:"offsets",
frame : true,
bodyStyle : 'padding:5px 5px 0',
baseCls:"x-plain",
width : 500,
defaults : {
width : 250
},
defaultType : 'textfield',
autoScroll : false,
items:[
{
name:"id",
id:"id",
xtype:"hidden",
value:"<%=id%>"
},
{
fieldLabel:"姓名",//文本框标题
name:"ename",
id:"ename"
}
,
{
fieldLabel:"邮箱",//文本框标题
name:"eemail",
id:"eemail"
}
,
{
fieldLabel:"地址",//文本框标题
name:"eaddress",
id:"eaddress"
}
,
{
fieldLabel:"工资",//文本框标题
name:"salary",
id:"salary"
}
],
buttons:[{text:"确定",handler:function(){
Ext.Ajax.request({
//请求地址
url:'addEmployeeWeb',
//提交参数组
params: {
id:Ext.get('id').dom.value,
ename:Ext.get('ename').dom.value,
eemail:Ext.get('eemail').dom.value,
eaddress:Ext.get('eaddress').dom.value,
salary:Ext.get('salary').dom.value
},
success : function(response) {
if (response.responseText != "") {
var jsonStr = response.responseText;
if(jsonStr == "success"){
Ext.Msg.alert("系统提示","修 改 成 功!");
window.close();
store.reload();
}else{
Ext.Msg.alert("系统提示","修 改 失 败!");
window.close();
}
}
}
});
}},{text:"取消",handler:function(){window.close()}}]
})
})
window.show();
}
</script>
发表评论
-
后台取不到extJs2.3的comboBox手写输入的值
2012-08-29 18:32 2887在用extJs2.3做页面的时候发现将comboB ... -
关于extjs(2.3) treepanel一点技巧
2012-08-01 16:02 12131.在做树的拖动的时候,遇到一个问题。树叶子节点无法进行app ... -
Ext.Ajax.request2.x实现同步请求
2012-06-25 11:08 3827Ext.Ajax.request在2.x是异步请求的 ... -
setAttribute()的使用方法与ie不兼容onclick事件解决方法
2011-12-31 13:12 2354setAttribute()的使用方法与ie不兼容onclic ... -
【仿IE顶部弹出提示】可用来设置公告可关闭
2011-12-31 13:11 1437第一种方式:基础写法 ... -
js 常用正则表达式表单验证代码
2011-08-19 11:20 1192js 常用正则表达式表单 ... -
Ext中的get、getDom、getCmp、getBody、getDoc的区别
2011-08-19 11:11 1324Ext中的get、getDom、getCmp ... -
EXT JS 常见问题FAQ
2011-08-19 10:50 1085EXT JS 常见问题FAQ 收藏 1) 如果组件之 ... -
js技巧
2011-08-19 10:47 1050javascript中几个有意思的 ... -
Combox下拉GridPanel菜单
2011-08-19 10:42 2643extjs Combox下拉GridPanel菜单 Ext ... -
重写时间控件,只有选择年月的界面
2011-08-19 10:39 5884下面是在ext官方网站上down的一个函数只显示年和月,不显示 ... -
修改ext中拖拽和CheckboxSelectionModel冲突的问题
2011-08-19 10:36 1759因为gridpanel定义了拖拽 所以致使选中gridpane ... -
浏览器窗口关闭事件的监听搜集
2011-08-19 10:16 1801方式一:(适用与IE浏览器,而且刷新不提示,只在点击浏览器关闭 ... -
GRID拖拽行的例子
2011-08-19 10:15 2898---------------------GRID拖拽 ... -
去掉gridPanel表头的全选框
2011-08-19 10:14 2297给gridpanel 加上listener即可 ,liste ... -
treepanel动态加载数据的例子
2011-08-19 10:10 2010var tree = new Ext.tree.TreePan ... -
gridpanel动态加载数据的例子
2011-08-19 10:07 1781<script type='text/javascrip ... -
combox带treepanel的例子
2011-08-19 10:06 2033new Ext.form.ComboBox({ id: '& ... -
项目开发中遇到的extjs常见问题
2011-08-19 10:04 13001.把一个汉字转成两个字符计数 Ext.getCmp('s ... -
event.keycode值大全
2011-08-19 10:02 873keycode 8 = BackSpace BackSpace ...
相关推荐
通过阅读和理解这个项目,你可以学习到如何在AngularJS中实现动态添加表单的完整流程,包括创建动态表单、数据模型的管理以及表单的验证和提交。 ### 5. 环境要求 注意,这个项目需要在Apache环境下运行,因为某些...
标题中提到的关键技术点是“vue+layui实现select动态加载后台数据”,这个知识点涉及了前后端数据交互、前端框架Vue.js以及前端UI组件库Layui的使用。接下来将详细解析标题和内容中涉及的关键知识点。 ### Vue.js ...
微信小程序提供了内置的表单数据校验功能,可以通过`validateFields`和`getFieldsValue`方法来对表单字段进行校验和获取值。例如: ```javascript Page({ validate() { this.selectComponent('#myForm')....
本教程将深入探讨如何利用Vue和Element UI快速创建生成表单,执行数据校验,并获取表单数据。 首先,创建一个基于Vue的项目,可以使用官方推荐的Vue CLI工具。通过运行`vue create project-name`命令,你可以快速...
5. **交互与数据提交**:在JavaScript动态创建的表单元素与ASP.NET/C#后端交互时,可能需要额外处理,因为默认情况下,只有在HTML页面加载时存在的表单元素才能在POST请求中发送数据。可以通过设置`runat="server"`...
在网页开发中,AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。本示例主要涉及如何使用AJAX来提交表单,并解决在...
在网页设计中,表单是收集用户数据的重要工具,尤其在处理动态或不确定的数据量时,如报名系统中不确定的报名人数。本示例聚焦于一个动态增加表单输入的解决方案,允许用户根据需求自由添加新的姓名输入框,以适应...
在实际项目中,结合`jq`库(可能是jQuery的简写),可以方便地处理DOM操作,与EXTJS的组件交互,进一步增强动态加载的效果,比如添加动态加载的动画、错误处理等。 总结来说,`Ext.Panel`和`TreePanel`在EXTJS中是...
动态表单插件允许开发者控制表单的编辑样式、列表样式、操作以及 model 数据,从而实现高度定制化的业务流程。 在请求加载单据的过程中,动态表单插件会经历多个关键阶段: 1. **PreOpenForm**:这是在请求打开...
在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高数据质量和用户体验。jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理以及动画效果。jQuery的...
这里提供一个简单的动态表单创建例子,假设你已经有一个`formSchema`对象包含了所有字段信息: ```html (item, index) in formSchema"> [item.prop]"> ``` 9. **实际项目中的应用** 动态表单在实际...
在这个例子中,`postData`变量包含了表单数据,例如:"name=John&age=30"。你需要将`yourwebsite.com`替换为你的目标服务器地址,`/target_script.php`替换为接收POST数据的脚本。 另一种方法是使用Microsoft.XML...
在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而保证数据的有效性和安全性。"表单验证例子"这个项目提供了一个简单的示例,演示了如何进行前端表单验证,特别是针对...
总结来说,这个示例展示了如何使用JavaScript在前端动态添加表格行,以及如何通过表单提交这些数据到服务器。虽然例子使用的是较旧的技术(如IE6和ASP),但基本的JavaScript逻辑仍然适用于现代Web开发。在现代Web...
在Web开发中,动态生成表单页面是一种常见的需求,特别是在数据驱动的应用中。"使用json数据生成表单页面"这个主题就是围绕这一需求展开的。它涉及到的主要技术是JavaScript,特别是利用JSON(JavaScript Object ...
总结,这个SpringBoot与Thymeleaf结合的表单数据验证例子展示了如何使用JSR303/JSR349的注解进行数据校验,以及如何在Thymeleaf模板中优雅地处理验证错误。通过这种方式,我们可以构建出更健壮、用户体验更好的Web...
8. **实际应用**:这个例子对于任何需要动态管理数据展示的场景都非常有用,比如在线表单、数据分析工具或简单的数据库前端界面等。 这个“动态增加删除表格行例子”提供了一个基础的模板,开发者可以根据自己的...
在这个范例中,表单可能包含了一个MSHFlexGrid控件,用于显示和编辑数据库中的数据,以及用于执行添加、删除、更新操作的按钮。 3. **frm_xs.frx** - 这是表单的资源文件,存储了表单的非代码属性,比如控件的位置...