<%@ 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>