本人刚开始学习extjs,效果挺好的,但是在学习中遇到了一些问题:
我在grid里添加了一个添加信息按钮,点击后会弹出一个window,window里的formPanel有Textfield元素,问题是我第一次点击的时候是正常的效果,第二次点击的时候textfield失效了,不见了,多方查找未果,特来此求助页面代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ExtJS读取数据</title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> Ext.onReady(function() {
// 列
var cm = new Ext.grid.ColumnModel([
{ header: 'ID', dataIndex: 'RepairID', sortable: true, width: 10 },
{ header: '名称', dataIndex: 'GroupItemName', sortable: true },
{ header: '设备号', dataIndex: 'GroupItemPhone', sortable: true },
{ header: '维修日期', dataIndex: 'RepairTime', sortable: true, width: 50, renderer: renderDate }, // 在 renderDate 函数中格式化
{header: '维修内容', dataIndex: 'RepairContent', sortable: true },
{ header: '操作人', dataIndex: 'RepairDriver', sortable: true }
]); // 数据源
var store = new Ext.data.Store({
url: 'WebServiceGetData.asmx/GetArticles', // Web Service 地址
reader: new Ext.data.XmlReader(
{
totalRecords: 'totalRecords', // 数据总行数。对应于 GetArticles 返回的 DataSet 中的 results 表的 totalRecores 列
record: 'record', // 数据。对应于 GetArticles 返回的 DataSet 中的 record 表
id: 'RepairID' // 主键。对应于 GetArticles 返回的 DataSet 中的 record 表的 Id 列
},
[
{ name: 'RepairID' },
{ name: 'GroupItemName' },
{ name: 'GroupItemPhone' },
{ name: 'RepairTime' },
{ name: 'RepairContent' },
{ name: 'RepairDriver' }
]),
remoteSort: true // 服务端排序
});
store.setDefaultSort('RepairID', 'desc'); // 默认按 Date 列降序排列 // 分页栏
var bbar = new Ext.PagingToolbar(
{
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} 条,共 {2} 条',
emptyMsg: "暂无数据"
}
); // GridPanel 组件
var grid = new Ext.grid.GridPanel({
frame: true,
enableHdMenu: true,
width: 600,
height: 300,
title: 'repairHistory表的信息',
loadMask: { msg: '正在加载数据,请耐心等待……' },
el: 'grid',
store: store,
cm: cm,
bbar: bbar,
viewConfig: {
forceFit: true
},
items: [{
xtype: "textfield",
id: "show",
value: "",
hidden: true
}],
buttons: [{
text: "添加",
id: "add"
}, {
text: "删除",
id: "delete",
disabled: true
}]
});
grid.render();
store.load({ params: { start: 0, limit: 10} }); // 初始时显示第 1 页,每页显示 10条数据
///**
//点击添加按钮的事件
Ext.getCmp("add").on("click", function() {
//addForm();
/////////////////////////////////////////////////////////////
var formadd = new Ext.FormPanel({
//renderTo:"add",
width: 300,
height: 175,
labelAlign: "right",
buttonAlign: "center",
frame: true,
id: "addform",
defaultType: "textfield",
items: [{
fieldLabel: "名称",
id: "name",
allowBlank: false, //如果是true,则允许,否则不允许,默认是true
blankText: "请输入名称!"
}, {
fieldLabel: "设备号",
id: "number",
allowBlank: false,
blankText: "请输入设备号!"
}, {
fieldLabel: "维修内容",
id: "content",
allowBlank: false,
blankText: "请输入维修内容!"
}, {
fieldLabel: "操作人",
id: "driver",
allowBlank: false,
blankText: "请输入操作人!"
}],
buttons: [{
text: "添加",
id: "btnadd",
handler: function() { if (formadd.form.isValid()) {
//Ext.Msg.alert("sssssssssssss");
formadd.form.submit({
url: "addHandler.ashx",
waitMsg: "正在执行添加操作",
success: function(form, action) {
if (Ext.encode(action.result.res)) {
Ext.Msg.alert("提示", "添加成功!");
//window.location.href = "Default.aspx";
grid.store.reload();//重新加载grid
}
},
failure: function(form, action) {
if (Ext.encode(action.result.res)) {
Ext.Msg.alert("提示", "添加失败!");
}
}
});
} }
}, {
text: "重置",
id: "reset",
handler: function() {
formadd.form.reset();
}
}]
});
newWin = new Ext.Window
(
{
layout: 'form',
width: 320,
height: 220,
collapsible: true, //允许缩放条
closeAction: 'hide',
closable: true,
plain: true,
modal: 'true',
title: '添加信息',
items: formadd
}
)
//显示窗体
newWin.show();
///////////////////////////////////////////////////////////////////////////
});
//**/
});
grid.addListener('celldblclick', celldblclick);
function celldblclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
//var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var id = record.get("RepairID");
var name = record.get("GroupItemName");
var number = record.get("GroupItemPhone"); //
var content = record.get("RepairContent"); //
var driver = record.get("RepairDriver"); } grid.addListener("cellclick", cellclick);
function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex);
var id = record.get("RepairID");
Ext.getCmp("show").setValue(id);
Ext.getCmp("delete").setDisabled(false);
}
});
// 格式化日期
// 将 XML 数据中的原始日期数据(如:2008-04-07T14:39:41.02+08:00)格式化成可读的日期(如:2008-04-07 14:39:41)
function renderDate(value)
{
var reDate = /\d{4}\-\d{2}\-\d{2}/gi;
var reTime = /\d{2}:\d{2}:\d{2}/gi;
return value.match(reDate) + " " + value.match(reTime);
}</script>
</head>
<body>
<form id="form1" runat="server">
</form>
<!-- GridPanel 组件的显示位置 -->
<div id="grid" style="height:300px; margin:auto;"></div> <div id="add" style="height:300px; margin:auto;" align="center"></div>
</body>
</html>
我在grid里添加了一个添加信息按钮,点击后会弹出一个window,window里的formPanel有Textfield元素,问题是我第一次点击的时候是正常的效果,第二次点击的时候textfield失效了,不见了,多方查找未果,特来此求助页面代码如下:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
<title>ExtJS读取数据</title>
<script src="ext/adapter/ext/ext-base.js" type="text/javascript"></script>
<script src="ext/ext-all.js" type="text/javascript"></script>
<link href="ext/resources/css/ext-all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript"> Ext.onReady(function() {
// 列
var cm = new Ext.grid.ColumnModel([
{ header: 'ID', dataIndex: 'RepairID', sortable: true, width: 10 },
{ header: '名称', dataIndex: 'GroupItemName', sortable: true },
{ header: '设备号', dataIndex: 'GroupItemPhone', sortable: true },
{ header: '维修日期', dataIndex: 'RepairTime', sortable: true, width: 50, renderer: renderDate }, // 在 renderDate 函数中格式化
{header: '维修内容', dataIndex: 'RepairContent', sortable: true },
{ header: '操作人', dataIndex: 'RepairDriver', sortable: true }
]); // 数据源
var store = new Ext.data.Store({
url: 'WebServiceGetData.asmx/GetArticles', // Web Service 地址
reader: new Ext.data.XmlReader(
{
totalRecords: 'totalRecords', // 数据总行数。对应于 GetArticles 返回的 DataSet 中的 results 表的 totalRecores 列
record: 'record', // 数据。对应于 GetArticles 返回的 DataSet 中的 record 表
id: 'RepairID' // 主键。对应于 GetArticles 返回的 DataSet 中的 record 表的 Id 列
},
[
{ name: 'RepairID' },
{ name: 'GroupItemName' },
{ name: 'GroupItemPhone' },
{ name: 'RepairTime' },
{ name: 'RepairContent' },
{ name: 'RepairDriver' }
]),
remoteSort: true // 服务端排序
});
store.setDefaultSort('RepairID', 'desc'); // 默认按 Date 列降序排列 // 分页栏
var bbar = new Ext.PagingToolbar(
{
pageSize: 10,
store: store,
displayInfo: true,
displayMsg: '当前显示 {0} - {1} 条,共 {2} 条',
emptyMsg: "暂无数据"
}
); // GridPanel 组件
var grid = new Ext.grid.GridPanel({
frame: true,
enableHdMenu: true,
width: 600,
height: 300,
title: 'repairHistory表的信息',
loadMask: { msg: '正在加载数据,请耐心等待……' },
el: 'grid',
store: store,
cm: cm,
bbar: bbar,
viewConfig: {
forceFit: true
},
items: [{
xtype: "textfield",
id: "show",
value: "",
hidden: true
}],
buttons: [{
text: "添加",
id: "add"
}, {
text: "删除",
id: "delete",
disabled: true
}]
});
grid.render();
store.load({ params: { start: 0, limit: 10} }); // 初始时显示第 1 页,每页显示 10条数据
///**
//点击添加按钮的事件
Ext.getCmp("add").on("click", function() {
//addForm();
/////////////////////////////////////////////////////////////
var formadd = new Ext.FormPanel({
//renderTo:"add",
width: 300,
height: 175,
labelAlign: "right",
buttonAlign: "center",
frame: true,
id: "addform",
defaultType: "textfield",
items: [{
fieldLabel: "名称",
id: "name",
allowBlank: false, //如果是true,则允许,否则不允许,默认是true
blankText: "请输入名称!"
}, {
fieldLabel: "设备号",
id: "number",
allowBlank: false,
blankText: "请输入设备号!"
}, {
fieldLabel: "维修内容",
id: "content",
allowBlank: false,
blankText: "请输入维修内容!"
}, {
fieldLabel: "操作人",
id: "driver",
allowBlank: false,
blankText: "请输入操作人!"
}],
buttons: [{
text: "添加",
id: "btnadd",
handler: function() { if (formadd.form.isValid()) {
//Ext.Msg.alert("sssssssssssss");
formadd.form.submit({
url: "addHandler.ashx",
waitMsg: "正在执行添加操作",
success: function(form, action) {
if (Ext.encode(action.result.res)) {
Ext.Msg.alert("提示", "添加成功!");
//window.location.href = "Default.aspx";
grid.store.reload();//重新加载grid
}
},
failure: function(form, action) {
if (Ext.encode(action.result.res)) {
Ext.Msg.alert("提示", "添加失败!");
}
}
});
} }
}, {
text: "重置",
id: "reset",
handler: function() {
formadd.form.reset();
}
}]
});
newWin = new Ext.Window
(
{
layout: 'form',
width: 320,
height: 220,
collapsible: true, //允许缩放条
closeAction: 'hide',
closable: true,
plain: true,
modal: 'true',
title: '添加信息',
items: formadd
}
)
//显示窗体
newWin.show();
///////////////////////////////////////////////////////////////////////////
});
//**/
});
grid.addListener('celldblclick', celldblclick);
function celldblclick(grid, rowIndex, columnIndex, e) {
var record = grid.getStore().getAt(rowIndex); //Get the Record
//var fieldName = grid.getColumnModel().getDataIndex(columnIndex); //Get field name
var id = record.get("RepairID");
var name = record.get("GroupItemName");
var number = record.get("GroupItemPhone"); //
var content = record.get("RepairContent"); //
var driver = record.get("RepairDriver"); } grid.addListener("cellclick", cellclick);
function cellclick(grid, rowIndex, columnIndex, e) { var record = grid.getStore().getAt(rowIndex);
var id = record.get("RepairID");
Ext.getCmp("show").setValue(id);
Ext.getCmp("delete").setDisabled(false);
}
});
// 格式化日期
// 将 XML 数据中的原始日期数据(如:2008-04-07T14:39:41.02+08:00)格式化成可读的日期(如:2008-04-07 14:39:41)
function renderDate(value)
{
var reDate = /\d{4}\-\d{2}\-\d{2}/gi;
var reTime = /\d{2}:\d{2}:\d{2}/gi;
return value.match(reDate) + " " + value.match(reTime);
}</script>
</head>
<body>
<form id="form1" runat="server">
</form>
<!-- GridPanel 组件的显示位置 -->
<div id="grid" style="height:300px; margin:auto;"></div> <div id="add" style="height:300px; margin:auto;" align="center"></div>
</body>
</html>
解决方案 »
- 亲爱的兄弟们,请问如何判断文本框是否获得焦点的代码,有哪位知道,请告诉兄弟一下
- 复选框如何取消勾选动作
- 求救啊,快哭了……关于JS调用Servlet提示“404 /SAES/web/jqGridServlet”,在线急等!
- jquery ajax get post 火狐下无效
- 如何在正则里面匹配+-*/啊
- 【难题】iframe高度自适应问题
- OnClientClick 的简单问题
- 怎么用JavaScript 判断firefox2、firefox3版本号,急!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
- 框架之间的按钮联动问题?
- 为什么我这段js在火狐,ie下都可以使用,在谷歌浏览器就不行???
- 为什么addEvent不能使用了
- 如何使用微软的插件或者JavaScript获取插入在HTML中的PDF的页数.急!
方法2,在创建textField的时候,都使用new来创建
var formadd = new Ext.form.FormPanel({
method : 'POST',
frame : true,
items : [new Ext.form.TextField({
fieldLabel : '帐户名',
name : 'username',
id : 'username',
allowBlank : false,
blankText : '帐户名不能为空',
anchor : '95%'
})]
}]
我也遇到过这种问题~~一般就是这样解决的