<%@ page contentType="text/html; charset=utf-8"%>
<%@ taglib prefix="app" uri="/app-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>练习</title>
<style type="text/css">
<!--
@media print {
body {
display: none
}
}
-->
</style>
<link rel="stylesheet" type="text/css"
href="../../ext-3.4.0/resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="../../styles/msg.css" />
<script type="text/javascript"
src="../../ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../../ext-3.4.0/ext-all.js"></script>
<script type="text/javascript" src="../../scripts/ext-datetime.js"></script>
<script type="text/javascript" src="../../scripts/msg.js"></script>
<script type="text/javascript"
src="../../ext-3.4.0/source/locale/ext-lang-zh_CN.js"></script>
<script type="text/javascript">
Ext.onReady(function() {
var radio1 = new Ext.form.Radio({
boxLabel : "男",
id : "Radio1",
name : "a"
});
var radio2 = new Ext.form.Radio({
boxLabel : "女",
id : "Radio2",
name : "a",
checked : true
});
var comboBoxStore = new Ext.data.SimpleStore({
fields : [ 'value', 'data' ]
});
var auditStatusComboBox = new Ext.form.ComboBox({
store : comboBoxStore,
displayField : 'data',
valueField : 'value',
typeAhead : true,
hiddenName : 'isApporve',
mode : 'local',
width : 90,
fieldLabel : '是否审核',
triggerAction : 'all',
allowBlank : false,
//listeners:{'specialkey':p1EnterListener},
blankText : '该项不能为空',
value : '1',
editable : false,
selectOnFocus : true
});
comboBoxStore.loadData([ [ '0', '未审核' ], [ '1', '已审核' ] ]);
auditStatusComboBox.setValue(0);
var store = new Ext.data.JsonStore({
root : 'user',
//totalProperty : 'results',
//idProperty : 'smDbId',
//remoteSort : true,
fields : [ 'userName', 'id'
//后面的按照这样写好
],
// load using script tags for cross domain, if the data in on the same domain as
// this page, an HttpProxy would be better
//proxy : new Ext.data.ScriptTagProxy({
// url : '/test/testExt.action'//获取Json的地址或方法
//})
data : jsonData
});
//store.load();
var jsonData = {
user : [ {
ids : '7',
userName : '黑龙江1'
}, {
ids : '8',
userName : '吉林2'
} ],
results : 3
};
var testComboBoxStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/test/testExt.action'
}),
autoLoad : true,
autoSync : true,
//data : jsonData,
reader : new Ext.data.JsonReader({
totalProperty : 'results',
root : 'user',
//id:'id',
fields : [ 'userName', 'id' ]
})
/* listeners :{
load : function() {
// modelField.setValue(record.get('pid')); //这样可以解决的
Ext.get('sss').dom.setValue('aa');
alert('X');
}
} */
});
var editGridStore = new Ext.data.Store({
proxy : new Ext.data.HttpProxy({
url : '/test/gridEdit.action'
}),
autoLoad : true,
autoSync : true,
//data : jsonData,
reader : new Ext.data.JsonReader({
totalProperty : 'results',
root : 'user',
//id:'id',
fields : [ 'userName', 'id' ]
})
});
/* testComboBoxStore.add(new PersonRecord({
userName: 'other',
id: 0
}));
testComboBoxStore.add([new PersonRecord({
userName: 'other1',
id: 0
}), new PersonRecord({
userName: 'other2',
id: 0
})]); */
/* testComboBoxStore.on("load", function() {
//alert("我加载完了");
//do something
var boy = new Ext.data.Record({
userName : 'other1',
id : 6
});
testComboBoxStore.add(boy);
var boy2 = new Ext.data.Record({
userName : 'other2',
id : 7
});
testComboBoxStore.add(boy2);
var boy3 = new Ext.data.Record({
userName : 'other3',
id : 8
});
testComboBoxStore.add(boy3);
var boy4 = new Ext.data.Record({
userName : 'other4',
id : 9
});
testComboBoxStore.add(boy4);
var boy5 = new Ext.data.Record({
userName : 'other5',
id : 10
});
testComboBoxStore.add(boy5);
var boy6 = new Ext.data.Record({
userName : 'other6',
id : 11
});
testComboBoxStore.add(boy6);
}); */
var rec = new (testComboBoxStore.recordType)();
//写入数据
rec.set('id', '5');
rec.set('userName', 'a');
rec.set('id', '6');
rec.set('userName', 'a');
rec.set('id', '7');
//添加数据
testComboBoxStore.add(rec);
//testComboBoxStore.load();
/* testComboBoxStore.load({
//tsetComboBox.setValue('辽宁');
callback : function() {
alert('X');
//sss.setValue('辽宁');
},
scope : testComboBoxStore,
add : false
}); */
//var red = new Ext.data.JsonReader({
// totalProperty : results,
// root : 'user',
// id:'id',
// fields : [ 'userName', 'userName' ]
//});
var tsetComboBox = new Ext.form.ComboBox({
id : 'sss',
name : 'sss',
store : testComboBoxStore,
displayField : 'userName',
valueField : 'id',
typeAhead : true,
hiddenName : 'id',
mode : 'remote',
//mode : 'load',
width : 90,
fieldLabel : '自动加载',
triggerAction : 'all',
allowBlank : false,
//listeners:{'specialkey':p1EnterListener},
blankText : '该项不能为空',
value : '吉林',
editable : false,
selectOnFocus : true,
listeners : {
'select' : function() {
alert(Ext.get('sss').dom.value); //获取id为combo的值
}
/* afterRender : function(combo) {
//alert(testComboBoxStore.reader.jsonData.user);
//var firstValue = testComboBoxStore.reader.jsonData[0].text;
var firstValue = testComboBoxStore.reader.jsonData.user.userName;
alert(firstValue);
combo.setValue(firstValue);//同时下拉框会将与name为firstValue值对应的 text显示
} */
}
});
//tsetComboBox.setValue(4);
var customerCode = new Ext.form.TextField({
name : 'custCode',
width : 90,
fieldLabel : '客户编号'
});
var customerCode2 = new Ext.form.TextField({
name : 'custCode',
width : 90,
fieldLabel : '客户编号2'
});
var customerCode3 = new Ext.form.TextField({
name : 'custCode',
width : 90,
fieldLabel : '客户编号3'
});
var customerCode4 = new Ext.form.TextField({
name : 'custCode',
width : 90,
fieldLabel : '客户编号4'
});
//grid.render('grid1');
/* var window = new Ext.Window({
//applyTo:'form1',
title : '商品信息',
width : 1000,
height : 1000,
layout : 'form',
closeAction : 'hide',
plain : true,//true则主体背景透明，false则和主体背景有些差别
collapsible : true,//是否可收缩
modal : true,//是否为模式窗体
items : [ form1
]
}); */
/* new Ext.Viewport({
layout : 'form',
//autoWidth : true,
items : [ form2
]
}); */
var form2 = new Ext.form.FormPanel({
autoWidth : true,
//labelWidth : 70,
frame : true,
autoWidth : true,
height : 150,
border : true,
items : [ {
layout : 'column',
border : false,
items : [ {
columnWidth : .8,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ {
xtype : 'fieldset',
title : '控件名不同',
layout : 'column',
columnWidth : .8,
autoHeight : true,
items : [ new Ext.Panel({
layout : 'column',
columnWidth : .5,
items : [ {
items : customerCode4,
layout : 'form',
border : false,
width : 220
} ]
}) ]
} ]
} ]
} ]
});
var form3 = new Ext.form.FormPanel({
autoWidth : true,
//labelWidth : 70,
frame : true,
autoWidth : true,
height : 150,
border : true,
items : [ {
layout : 'column',
border : false,
items : [ {
columnWidth : .8,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ {
xtype : 'fieldset',
title : '控件名不同2',
layout : 'column',
//height : 100,
autoHeight : true,
items : [ new Ext.Panel({
layout : 'column',
columnWidth : .5,
items : [ {
items : customerCode2,
layout : 'form',
border : false,
width : 220
} ]
}), new Ext.Panel({
layout : 'column',
columnWidth : .5,
items : [ {
items : customerCode3,
layout : 'form',
border : false,
width : 220
} ]
}) ]
} ]
} ]
} ]
});
var form1 = new Ext.form.FormPanel({
//applyTo : 'form1',
autoWidth : true,
//labelAlign : 'right',
labelWidth : 70,
frame : true,
width : 800,
height : 240,
border : true,
buttonAlign : 'center',//确定，取消按钮居中
//region : 'north',
//columnWidth :.10,
//title : '练习FormPanel',
items : [ {
layout : 'column',
border : false,
items : [ {
columnWidth : .8,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ {
xtype : 'fieldset',
title : '控件名不同',
layout : 'column',
columnWidth : .8,
height : 180,
items : [ new Ext.Panel({
layout : 'column',
columnWidth : .33,
items : [ {
items : customerCode,
layout : 'form',
border : true,
width : 180,
defaultType : 'textfield'
} ]
}), new Ext.Panel({
layout : 'column',
columnWidth : .33,
items : [ {
items : auditStatusComboBox,
layout : 'form',
border : false,
width : 220
//defaultType : 'textfield'
} ]
}), ({
layout : 'column',
columnWidth : .33,
items : [ {
items : tsetComboBox,
layout : 'form',
border : false,
width : 220
//defaultType : 'textfield'
} ]
}) ]
} ]
}, {
columnWidth : .2,
layout : 'form',
bodyStyle : 'padding: 2px 2px 2px 2px',
border : false,
items : [ {
xtype : 'fieldset',
title : '控件名不同二',
height : 110,
items : [ {
fieldLabel : '姓名',
xtype : 'textfield',
width : 100,
anchor : '90%'
},
/* fieldLabel : '性别',
xtype : 'textfield',
width : 100,
anchor : '90%' */
new Ext.Panel({
layout : 'column',
columnWidth : .33,
fieldLabel : '性别',
items : [ radio1, radio2 ]
}) ]
} ]
} ]
} ],
buttons : [ {
text : '保存',
scope : this,
handler : function() {
alert('f');
alert(radio1.getValue());
alert(radio1.checked);
}
//style : {
// marginLeft : '200px',//距左边宽度
// marginRight : '200px'//距右边宽度
//}
}, {
text : '取消',
scope : this,
handler : function() {
alert('x');
}
} ]
});
var grid = new Ext.grid.GridPanel({
height : 200,
width : 600,
title : 'Grid练习',
frame : true,
columns : [ {
header : '编号',
width : 80,
height : 200,
sortable : true,
//renderer : leftPad,
dataIndex : 'id'
} ]
});
testComboBoxStore.load({
params : {
start : 0,
limit : 3
}
});
var cm = new Ext.grid.ColumnModel([ { //形式[{},{}] djy
header : "id",
width : 200,
dataIndex : 'id'
//hidden : false
}, {
header : "文件名称",
width : 200,
dataIndex : 'userName'
} ]
// ,{header: "文件大小",dataIndex: 'docSize'},
// {header: "上传时间",dataIndex: 'docTime'}
);
var gridPanel = new Ext.grid.GridPanel({
//el : 'grid',
//ds : testComboBoxStore,
store : testComboBoxStore,
closable : true,
//width : 600,
autoWidth : true,
title : '练习Grid',
height : 200,
cm : cm,
// bodyStyle:'width:100%',
// autoWidth:true,
viewConfig : {
forceFit : true
},
region : "center",
enableColLock : false,
loadMask : true,
stripeRows : true,
autoExpandColumn : 'docName',
bbar : new Ext.PagingToolbar({
pageSize : 3,//每页显示的记录值
store : testComboBoxStore,
displayInfo : true,
displayMsg : '总记录数 {0} - {1} of {2}',
emptyMsg : "没有记录"
})
});
var Record = new Ext.data.Record.create([ {
name : 'id',
type : 'string'
}, {
name : 'userNname',
type : 'string'
} ]);
var idx = testComboBoxStore.getCount();
var idxx = testComboBoxStore.getTotalCount() ;
var gridEdit = new Ext.grid.EditorGridPanel({
//renderTo : 'grid',
store : editGridStore,
//width : 400,
height : 200,
autoWidth : true,
clicksToEdit : 1,
columns : [ {
id : "id",
header : "编号",
width : 300,
dataIndex : "id"
}, {
id : "userName",
header : "姓名",
width : 300,
dataIndex : "userName",
editor : new Ext.form.TextField({
allowBlank : false
})
} ],
tbar : new Ext.Toolbar([
'-',
{
text : '添加一行',
handler : function() {
alert(idxx+'|'+idx);
var p = new Record({
id : '',
userNname : ''
});
//gridEdit.stopEditing();
editGridStore.insert(idx, p);
gridEdit.startEditing(0, 0);
}
},
'-',
{
text : '删除一行',
handler : function() {
Ext.Msg.confirm('信息', '确定要删 除？', function(btn) {
if (btn == 'yes') {
var sm = gridEdit.getSelectionModel();
var cell = sm.getSelectedCell();
var record = editGridStore.getAt(cell[0]);
editGridStore.remove(record);
}
});
}
},
'-',
{
text : '保存',
handler : function() {
gridEdit.stopEditing();
//var records = gridEdit.getStore().getRange();
var records = gridEdit.getStore()
.getModifiedRecords();
alert("被修改记录的个数" + records.length);
var arr = new Array();
for ( var i = 0; i < records.length; i++) {
arr.push(records[i].data);
}
var params = Ext.util.JSON.encode(arr);
alert('aa');
Ext.Ajax.request({
params : {
abc : params
},
url : "/test/gridSave.action",
success : function(response, options) {
var result = Ext.util.JSON
.decode(response.responseText);
}
});
}
}, '-' ])
});
//grid.render();
/* new Ext.Viewport({
layout : 'form',
autoHeight :true,
items : [ new Ext.Panel({
//region : 'center',
layout : 'form',
autoHeight :true,
tbar : [ {
text : '查询数据',
cls : 'x-btn-normal'
} ],
items : [ form1,grid ]
}) ]
}); */
/* var window = new Ext.Window({
//applyTo:'form1',
title : '商品信息',
width : 1000,
//height : 300,
autoHeight : true,
layout : 'form',
closeAction : 'hide',
plain : true,//true则主体背景透明，false则和主体背景有些差别
collapsible : true,//是否可收缩
modal : true,//是否为模式窗体
items : [ form1,gridPanel
]
});
window.show();
*/
// 创建带三个按钮的工具条
var tb = new Ext.Toolbar({
width : 300,
items : [ {
text : '新建'
}, {
text : '修改'
}, {
text : '删除'
} ]
});
// 为工具条再添加一个按钮
tb.add({
text : '显示'
});
/* var toolbar = Ext.create("Ext.Toolbar", {
renderTo : Ext.getBody(),
width : 500
}); */
var toolbar = new Ext.Toolbar({
autoWidth : true
});
var file = new Ext.menu.Menu({
shadow : "drop",
allowOtherMenus : true,
items : [ new Ext.menu.Item({
text : "新建",
handler : onMunuItem
}), new Ext.menu.Item({
text : "另存为",
handler : onMunuItem
}), new Ext.menu.Separator(), new Ext.menu.Item({
text : "退出",
handler : onMunuItem
}) ]
});
var edit = new Ext.menu.Menu({
shadow : "frame",
allowOtherMenus : true,
items : [ new Ext.menu.Item({
text : "撤销",
handler : onMunuItem
}), new Ext.menu.Separator(), new Ext.menu.Item({
text : "剪切",
handler : onMunuItem
}), new Ext.menu.Item({
text : "复制",
handler : onMunuItem
}) ]
});
toolbar.add({
text : "文件",
menu : file
}, {
text : "编辑",
menu : edit
});
function onMunuItem(item) {
Ext.MessageBox.alert(item.text);
}
var tree = new Ext.tree.TreePanel({
title : '选项列表',
//el : 'div-tree',
autoWidth : true,
height : 150,
root : treeNodeRoot,
animate : true,//是否动画
useArrows : true,//树形目录使用visit中树目录显示效果(三角形代替+号)
rootVisible : false,//顶节点是否显示、设置成false后顶节点的子节点就作为顶节点（可以有多个子节点作为顶节点）
enableDD : true,
loader : new Ext.tree.TreeLoader({
dataUrl : '/test/pages/test.json'
//dataUrl : '/test/treeData.action'
//preloadChildren: true
}),
lines : true
/* listeners : {
load : function(loader, node, response) {
alert('r');
}
} */
/* listeners : {
afterrender : function(node) {
tree.expandAll();//展开树
}
} */
/* ,
'beforeload' : function(node) {
//这一步很关键，获取要节点的ID，取出子节点
alert('r');
this.getLoader().baseParams = {
id : node.id
};
} */
});
var treeNodeRoot = new Ext.tree.AsyncTreeNode({
//进入时是否展开
id : id,
text : '根',
expanded : true
});
/* treeNodeRoot.appendChild(new Ext.tree.AsyncTreeNode({
listeners : {
'click' : function(node) {
alert('rs');
}
}
})); */
tree.setRootNode(treeNodeRoot);
//tree.render();
treeNodeRoot.expand();
tree.on('click', nodeClick);
function nodeClick(node, e) {
if (node.leaf) {
//alert('id' + node.attributes.id + 'name' + node.text);
if (node.attributes.id == 23) {
form3.show();
form2.hide();
}
if (node.attributes.id == 24) {
form3.hide();
form2.show();
}
}
}
form3.hide();
new Ext.Viewport({
layout : 'form',
//autoWidth : true,, gridPanel, gridEdit
items : [ toolbar, form1, new Ext.Panel({
layout : 'column',
items : [ {
columnWidth : .5,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ gridPanel ]
}, {
columnWidth : .5,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ gridEdit ]
} ]
}), new Ext.Panel({
layout : 'column',
border : true,
//align:top,
//height:150,
items : [ {
columnWidth : .2,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ tree ]
}, {
columnWidth : .8,
bodyStyle : 'padding: 2px 2px 2px 2px',
layout : 'form',
border : false,
items : [ form2, form3 ]
} ]
}) ]
});
});
</script>
</head>
<body>
<div id='form1'></div>
<div id='grid1'></div>
</body>
</html>
相关推荐
ExtStudy例子学习，Grid练习。
"网上搜的两个EXT小练习项目"这个标题暗示了我们有两个使用EXT JS编写的实践项目，可能包含了一些基础到进阶的EXT应用示例。这些项目可能是为了帮助学习者理解EXT JS的核心概念和用法，例如组件的创建、布局的应用、...
一些ext练习例子，一些ext练习例子，
最后，EXT教程.rar很可能是整个教程的综合资源包，包含了练习文件、代码示例和额外的学习材料。通过解压并实践其中的代码，你可以巩固所学知识，提升动手能力。 在EXT的学习过程中，理解其组件模型是关键。EXT的...
EXT，全称EXT JS，是一种基于JavaScript的前端...实践是检验理论的最好方式，所以在阅读笔记的同时，结合实际项目练习，将更好地巩固所学知识。希望这些资料能助你在EXT的世界里快速成长，成为一位熟练的EXT开发者。
对于初学者，理解EXT的核心组件和它们的交互方式至关重要，同时，通过实际项目练习，可以加深对EXT的理解和应用。 在学习EXT的过程中，建议结合实际案例进行实践，例如创建一个简单的数据管理应用，包含数据加载、...
- **文件操作**：练习创建、删除、移动、重命名文件及目录，理解权限和所有权的设置。 - **日志管理**：研究日志模式的配置和日志清理。 - **性能调优**：通过预分配、延迟分配等技术优化文件系统的性能。 - **...
EXT3文件系统是一种广泛用于Linux操作系统的日志型文件系统，由Linux内核开发者Stephen Tweedie设计。它提供了一种可靠的方式来组织和管理磁盘上的数据，支持大容量存储和快速的数据恢复。EXT3的主要特点是其日志式...
EXTJS的学习需要耐心和实践，通过不断的练习和查阅官方文档，你可以逐渐掌握EXT2.2的精髓，创造出功能丰富的Web应用。在自己练级EXT2.2环境的过程中，遇到问题不要怕，多查阅资料，参与社区讨论，你会慢慢成长。
1. **理论与实践结合**：在阅读官方文档的同时，多动手练习，将理论知识转化为实践经验。 2. **参与社区交流**：加入 Ext JS 的官方论坛或社区，与其他开发者互动交流，共同进步。 3. **关注官方动态**：定期查看 ...
EXT2.0中文教程.exe文件可能是用于运行的交互式教学软件，包含模拟操作和实践练习，旨在帮助用户更好地理解和掌握EXT2文件系统。学习此教程，无论是对Linux初学者还是需要深入了解文件系统原理的高级用户，都能从中...
`ext-2.1-tutorial-2009-03-19.rar`可能是EXT JS 2.1版本的教程资料，包含了该版本的示例代码和练习，这对于学习EXT JS的历史和版本差异非常有帮助。EXT JS的版本更新通常会引入新的特性和性能优化，通过研究不同...
在“Grid练习”文件中，可能包含了EXT Designer的设计文件、EXT-JS代码示例、数据源文件以及相关的资源文件，这些都是为了帮助你理解和实践EXT-JS Grid的用法。通过研究这些文件，你可以更深入地了解EXT-JS Grid的...
GWT(Google Web Toolkit)和Ext JS是两个在Web开发领域广泛应用的技术，它们结合形成的Gwt-ext库，为开发者提供了一种构建富客户端...不断练习和探索，你将能够熟练运用Gwt-ext构建出功能强大、用户体验优秀的Web应用。
haha廖的ext：extjs制作的小练习代码
- 结合实际项目进行练习是非常重要的，可以尝试着根据书中的示例构建自己的小项目，这样能够更深刻地理解所学知识。 - 参加相关的在线社区和论坛，与其他开发者交流心得和遇到的问题，可以获得更多的帮助和支持。 ...
同时，结合实际项目进行练习，将理论知识转化为实践经验，提升开发效率和应用质量。 总结，ExtJS 2.1中文帮助文档是学习和精通该框架的重要参考资料，它覆盖了主要组件的使用和源码解析，对于希望提升JavaScript...
这里，我们聚焦于`ext`继承，通常指的是JavaScript中的`extend`方法，这是一种实现继承的方式。在JavaScript中，由于语言本身没有内置的类机制，所以开发者通过函数和原型链来模拟类的概念。 `extend`方法通常被...
在本文中，我们将深入探讨如何使用EXT框架与Java Servlet技术构建一个简单的登录示例。EXT是一个强大的JavaScript...通过不断地练习和实践，你可以进一步掌握EXT和Java Servlet，为更复杂的Web应用开发打下坚实的基础。
EXT Tree 是一个基于 ExtJS 库的组件，用于构建可交互的树形数据结构。...通过实际编码练习，如在 "EXT Tree 的简单实践" 中，开发者可以掌握如何配置、填充数据以及响应用户交互，从而在项目中有效地利用这一工具。