- <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base >
- <script type="text/javascript" src1="Extjs/adapter/ext/ext-base.js"></script>
- <script type="text/javascript" src1="Extjs/ext-all.js"></script>
- <script>
- function fn()
- {
- var panel = new Ext.Panel({
- renderTo: Ext.getBody(),
- title: 'Message Title',
- width: 300, height: 130,
- html:'Message Title'
- });
- }
- function fn2()
- {
- var panel = new Ext.TabPanel({
- renderTo: Ext.getBody(),
- width: 300, height: 200,
- activeTab:'0',
- items :[new Ext.Panel({
- title: '面板一',
- width: 30,
- html:'面板一'
- }),new Ext.Panel({
- title: '面板二',
- width: 30,
- html:'面板二'
- }),new Ext.Panel({
- title: '面板三',
- width: 30,
- html:'面板三'
- })]
- });
- }
- function fn3()
- {
- var panel = new Ext.Panel({
- renderTo: Ext.getBody(),
- title: "面板头部header",
- width: 400, height: 230,
- html:'<h1>面板主区域</h1>',
- items :[
- {xtype:'htmleditor'}
- ],
- tbar:[
- {text:'顶部工具栏topToolbar'}
- ],
- bbar:[
- {text:'底部工具栏bootomToolbar'}
- ],
- buttons:[
- {text:'按钮位于footer'}
- ]});
- }
- function fn4()
- {
- var panel = new Ext.Panel
- ({
- renderTo: Ext.getBody(),
- width: 300, height: 200,
- layout:"column",
- items:[
- {
- columnWidth : .5,
- title: "面板一"
- },
- {
- columnWidth : .5,
- title: "面板二"
- }
- ]
- });
- }
- function fn5()
- {
- var viewport = new Ext.Viewport({
- layout:"border",
- items :[
- {
- title: '面板一',
- region: 'north',
- split: true,
- border: true,
- collapsible: true,
- heigth: 100,
- minSize: 100,
- maxSize: 120
- },{
- title: '面板二',
- region: 'south',
- split: true,
- border: true,
- collapsible: true,
- heigth: 100,
- minSize: 100,
- maxSize: 120
- },{
- title: '面板三',
- region: 'east',
- split: true,
- border: true,
- collapsible: true,
- heigth: 120,
- minSize: 120,
- maxSize: 200
- },{
- title: '面板四',
- region: 'west',
- split: true,
- border: true,
- collapsible: true,
- heigth: 120,
- minSize: 120,
- maxSize: 200
- },{
- title: '中间面板',
- region: 'center',
- split: true,
- border: true
- }
- ]
- });
- }
- function fn6()
- {
- var cm = new Ext.grid.ColumnModel([
- {header:'编号' ,dataIndex:'id'},
- {header:'姓名' ,dataIndex:'name'},
- {header:'薪水' ,dataIndex:'sal'}
- ]);
- var data = [
- ['1','袁旭云','3000'],
- ['2','汪自送','3000'],
- ['3','沈益杰','3500'],
- ['4','陈伟杰','3000']
- ];
- var ds = new Ext.data.Store({
- proxy : new Ext.data.MemoryProxy(data),
- reader: new Ext.data.ArrayReader({},[
- {name : 'id'},
- {name : 'name'},
- {name : 'sal'},
- ])
- });
- ds.load();
- var grid = new Ext.grid.GridPanel({
- renderTo: Ext.getBody(),
- ds:ds,
- cm:cm,
- width : 300,
- autoHeight : true
- });
- }
- function fn7()
- {
- var root = new Ext.tree.TreeNode({
- id :"root",
- text:"根节点"});
- root.appendChild(new Ext.tree.TreeNode({
- id:"c1",
- text:"子节点1"
- }));
- root.appendChild(new Ext.tree.TreeNode({
- id:"c2",
- text:"子节点2"
- }));
- root.appendChild(new Ext.tree.TreeNode({
- id:"c3",
- text:"子节点3"
- }));
- var tree = new Ext.tree.TreePanel({
- renderTo: Ext.getBody(),
- root:root,
- width:100});
- }
- function fn8()
- {
- Ext.BLANK_IMAGE_URL = 'Extjs/s.gif';
- var root = new Ext.tree.AsyncTreeNode({
- expanded : true,
- text : '系统菜单',
- id:"10001",//默认0
- draggable: false,
- iconCls:"b"
- });
- var tree = new Ext.tree.TreePanel({
- title:'树形结构',
- root : root,
- border : false,
- autoHight : true,
- renderTo: Ext.getBody(),
- autoScroll : true, //是否显示滚动条
- animate : true, //true表示使用动画展开/折叠
- enableDD : true,//允许拖拽
- containerScroll : true,
- listeners :
- { //加载之前的一个监听事件
- 'beforeload' : function (node){
- node.loader = new Ext.tree.TreeLoader({
- url : "viewtree.do?id="+node.id,
- baseParams:{}
- });
- }
- }
- });
- }
- function fn9()
- {
- Ext.BLANK_IMAGE_URL = 'Extjs/s.gif';
- var formPanel = new Ext.form.FormPanel({
- standardSubmit: false,
- title : '测试',
- id:'elID',
- autoHeight:true,
- x:200,
- y:200,
- width:300,
- renderTo: Ext.getBody(),
- frame : true,
- cls : 'text-align:center',
- labelAlign:'center',
- items :[{
- xtype : 'textfield',
- name :'username',
- fieldLabel :'用户',
- allowBlank :false,
- blankText:'请输入用户名!',
- msgTarget : 'under'
- },{
- xtype : 'textfield',
- name :'pwd',
- inputType:'password',
- fieldLabel :'密码',
- allowBlank :false,
- blankText:'请输入密码!',
- msgTarget : 'under'
- }],
- buttonAlign:'center',
- buttons:[{
- xtype : 'button',
- text :'登录',
- scope:this,
- handler:login
- },{
- xtype : 'button',
- text :'重置',
- scope:this,
- handler:reset
- }]
- });
- function login()
- {
- formPanel.form.submit({
- clientValidation:true,
- waitMsg:'登录中,请稍后......',
- url : "viewtree.do?id="+'10001',
- method:'POST',
- //成功
- success:function (form , action){
- Ext.Msg.alert('提示','登录成功!');
- },
- //失败
- failure:function (form , action){
- Ext.Msg.alert('提示','登录失败!');
- }
- });
- }
- function reset(){
- formPanel.form.reset();
- }
- }
- function fn10(){
- Ext.MessageBox.confirm('标题','内容。。。。。。',function (btn){
- if(btn == "yes"){
- new Ext.form.TimeField({
- minValue: '6:00 AM',
- maxValue: '8:00 PM',
- renderTo: Ext.getBody(),
- increment: 30,
- minText : '时间不合法',
- invalidText : '错误',
- allowBlank :false,
- blankText:'时间不合法!',
- msgTarget : 'under'
- });
- }else{
- alert("no");
- }
- });
- }
- /*
- 一般情况下extjs应用都是以 Ext.onReady 开始的
- */
- Ext.onReady(fn10);
- </script>
- </head>
- <body>
- This is my JSP page. <br>
- </body>
- </html>
- //该片段来自于http://www.codesnippet.cn/detail/081120136986.html
来源: http://www.codesnippet.cn/detail/081120136986.html