extJSのいくつかの簡単な例
51056 ワード
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
//applyTo: 'tabs', // id tabs div tabs
activeTab: 0,
deferredRender: false,
autoTabs: true,
items: [{
title: 'Tab 1',
html: 'A simple tab',
closable: true,
listeners: {
'beforeclose':conrirmTab
}
},{
title: 'Tab 2',
html: 'Another one',
closable: true,
listeners: {
'beforeclose':conrirmTab
}
}]
});
var win = new Ext.Window({
title:' ',
el:'content',// div
layout:'fit',//
width:500,
height:300,
closeAction:'hide',//
plain: true,
draggable:false,
maximizable:true,
minimizable:true,
modal:false,
onEsc:function aa(){
Ext.Msg.alert('aaa');
},
resizable:false,
collapsible:true,
plain:true,
items:tabs
});
function conrirmTab(e){
Ext.Msg.confirm(' ',' ',
function(btn,text){
if(btn=='yes'){
tabs.remove(e);
}
});
return false;
}
win.show(Ext.getBody());// body
});
</script>
</head>
<body>
<div id="content">
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var tabs = new Ext.TabPanel({
applyTo: 'tabs',
activeTab: 0,
deferredRender: false,
autoTabs: true,
draggable:true,
items: [{
title: 'Tab 1',
html: 'A simple tab'
},{
title: 'Tab 2',
html: 'Another one'
}]
});
});
</script>
</head>
<body>
<div id='tabs'>
<div class='x-tab' title='The First Tab'> The First Tab </div>
<div class='x-tab' title='The Second Tab'> The Second Tab </div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:document.body,
title:" ",
width:500,
height:200,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "},
{title:" 3",html:" 3 "}
]
}
);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Viewport({
layout:"border",
items:[{region:"north",
height:50,
title:" "},
{region:"south",
height:50,
title:" "},
{region:"center",
title:" "},
{region:"west",
width:100,
title:" "},
{region:"east",
width:100,
title:" "}
]
});
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:document.body,
title:" ",
width:500,
height:200,
layout:"card",
activeItem: 0,
layoutConfig: {
animate: true
},
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "},
{title:" 3",html:" 3 "}
],
buttons:[{text:" ",handler:changeTab}]
}
);
var i=1;
function changeTab()
{
panel.getLayout().setActiveItem(i++);
if(i>2)i=0;
}
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:document.body,
title:" ",
layout:"column",
width:500,
height:100,
items:[{title:" 1",width:200},
{title:" 2",columnWidth:.3},
{title:" 3",columnWidth:.3},
{title:" 4",columnWidth:.4}
]
}
);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:document.body,
title:" ",
width:500,
height:300,
items:[{title:" 1",html:" 1 "},
{title:" 2",html:" 2 "}
]
}
);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:document.body,
title:" header",
width:300,
height:200,
html:'<h1> </h1>',
tbar:[{pressed:true,text:' topToolbar'}],
bbar:[{text:' bottomToolbar'}],
buttons:[{text:" footer"}]
});
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var MyRecord = Ext.data.Record.create([
{name: 'title'},
{name: 'username', mapping: 'author'},
{name: 'loginTimes', type: 'int'},
{name: 'lastLoginTime', mapping: 'loginTime', type: 'date'}
]);
var r=new MyRecord({
title:" ",
username:"easyjf",
loginTimes:100,
loginTime:new Date()
});
alert(MyRecord.getField("username").mapping);
alert(MyRecord.getField("lastLoginTime").type);
alert(r.data.username);
alert(r.get("loginTimes"));
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Accordion </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var panel=new Ext.Panel({
renderTo:document.body,
title:" ",
width:500,
height:200,
layout:"table",
layoutConfig: {
columns: 3
},
items:[{title:" 1",html:" 1 ",rowspan:2,height:100},
{title:" 2",html:" 2 ",colspan:2},
{title:" 3",html:" 3 "},
{title:" 4",html:" 4 "}
]
}
);
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script type="text/javascript" src="ExtJS/TabScrollerMenu.js" ></script>
<script type="text/javascript" src="ExtJS/tab-scroller-menu.js" ></script>
</head>
<body>
<div id="aa"></div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> div</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var divContent=new Ext.Panel({
renderTo:'aa',
contentEl:'content',
//html:' , java ',
width:400,
height:200,
title: 'My Panel',
collapsible:true // , panel
});
});
</script>
</head>
<body>
<div id="aa">
<div id="content">
, java , , java 。
</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title> </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
//1. tab
var tabs = new Ext.TabPanel({
el: 'tabs',//tab , , tab
activeTab: 0,
deferredRender: false,
autoTabs: true,
region: 'center', // ,
margins:'3 3 3 0',
defaults:{autoScroll:true}
});
//2. panel
var nav = new Ext.Panel({
el: 'nav',
title: 'Navigation',
layout:'accordion', //
region: 'west', // window
split: true,
width: 200,
collapsible: true,
margins:'3 0 3 3',
cmargins:'3 3 3 3',
layoutConfig:{
animate:true //
},
items: [{
contentEl: 't1',
title: 'I am no.1'
},{
contentEl: 't2',
title: 'I am no.2'
}]
});
//3.
var win = new Ext.Window({
el: 'win',
layout:'border',// , , , ,
closeAction:'hide',//
plain: true,
width:600,
height:350,
items: [nav,tabs] // , window
});
win.show(Ext.getBody());// body
});
</script>
</head>
<body>
<!-- window panel-->
<div id='win'>
<!-- window header -->
<div class='x-window-header'>Layout window</div>
</div>
<!-- navigation panel-->
<div id='nav'>
<div id='nav-content'>
<div id='t1'>I am the content area of t1</div>
<div id='t2'>I am the content area of t2</div>
</div>
</div>
<!-- tabs panel -->
<div id='tabs'>
<div class='x-tab' title='First'>I am the content area of Fisrt tab</div>
<div class='x-tab' title='Second'>I am the content area of Second tab</div>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tab </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
var tab = new Ext.form.DateField({
});
var con=new Ext.form.FieldSet({
renderTo:'content',
width: 400,
height: 250,
layout: 'form',
title:'My Fields',
items:tab
});
});
</script>
</head>
<body>
<div id='content'>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<style>
.b1{align:center;}
</style>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
var myForm2 = new Ext.form.FormPanel({
renderTo:document.body,
width:650,
height:350,
frame:true,
title: 'Simple Form',
buttonAlign:'center',
labelAlign : 'right',
//onSubmit: function(){alert('dd')},
//submit: function() {
//alert('submit');
//},
defaultType: 'textfield',
items: [{
fieldLabel: 'mylabel'
},{
xtype:'checkbox',
fieldLabel: 'mycheckbox',
boxLabel: 'cc'
},{
xtype:'combo',
emptyText:'Select a state...',
store: new Ext.data.ArrayStore({
id: 0,
fields:['myId','displayText'],
data: [[1, 'item1'], [2, 'item2'],[3, 'ikkkk']]
}),
mode: 'local',
fieldLabel: 'myselect11',
valueField: 'myId',
displayField: 'displayText'
},{
fieldLabel: 'mytext-area',
anchor: '60%',
height:'50'
},{
xtype: 'htmleditor',
fieldLabel: 'myhtmleditor',
height: 100
}],
buttons: [{
text: 'Save'
},{
text: 'Cancel'
}]
});
myForm2.getEl().center();
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ExtJs </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
Ext.QuickTips.init();
//
var tree = new Ext.tree.TreePanel({
animate:true, //
containerScroll: true, //
rootVisible:true, //
width:200,
height:200,
split:true,
title:'My Tree',
autoScroll:true
});
//
var root = new Ext.tree.TreeNode({
text: ' ',
allowDrag:true,
allowDrop:true
});
tree.setRootNode(root);//
// ,
var anewroot = new Ext.tree.TreeNode({
text: '2',
allowDrag:true,
allowDrop:true
});
anewroot.appendChild(
[new Ext.tree.TreeNode({text:' 2-1', cls:'album-node', allowDrag:true}),
new Ext.tree.TreeNode({text:' 2-2', cls:'album-node', allowDrag:true}),
new Ext.tree.TreeNode({text:' 2-3', cls:'album-node', allowDrag:true})]
);
//
root.appendChild(new Ext.tree.TreeNode({text:' 1', cls:'album-node', allowDrag:true}));
root.appendChild(new Ext.tree.TreeNode({text:' 2', cls:'album-node', allowDrag:true}));
root.appendChild(new Ext.tree.TreeNode({text:' 3', cls:'album-node', allowDrag:true}));
root.appendChild(anewroot);
//
var ge = new Ext.tree.TreeEditor(tree, {
allowBlank:false,
blankText:'A name is required',
selectOnFocus:true
});
/*
var panel = new Ext.Panel({
layout: 'border',
width:650,
height:400,
renderTo:document.body,
items: tree
});
*/
tree.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MessageBox </title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script>
Ext.onReady(function(){
Ext.get('mb1').on('click', function(e){
Ext.MessageBox.confirm('Confirm', 'Are you sure you want to do that?', showResult);
});
Ext.get('mb2').on('click', function(e){
Ext.MessageBox.prompt('Name', 'Please enter your name:', showResultText);
});
Ext.get('mb3').on('click', function(e){
Ext.MessageBox.show({
title: 'Address',
msg: 'Please enter your address:',
width:300,
buttons: Ext.MessageBox.OKCANCEL,
multiline: true,
fn: showResultText,
animEl: 'mb3'
});
});
Ext.get('mb4').on('click', function(e){
Ext.MessageBox.show({
title:'Save Changes?',
msg: 'You are closing a tab that has unsaved changes. <br />Would you like to save your changes?',
buttons: Ext.MessageBox.YESNOCANCEL,
fn: showResult,
animEl: 'mb4',
icon: Ext.MessageBox.QUESTION
});
});
Ext.get('mb6').on('click', function(){
Ext.MessageBox.show({
title: 'Please wait',
msg: 'Loading items...',
progressText: 'Initializing...',
width:300,
progress:true,
closable:false,
animEl: 'mb6'
});
// this hideous block creates the bogus progress
var f = function(v){
return function(){
if(v == 12){
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake items were loaded!');
}else{
var i = v/11;
Ext.MessageBox.updateProgress(i, Math.round(100*i)+'% completed');
}
};
};
for(var i = 1; i < 13; i++){
setTimeout(f(i), i*500);
}
});
Ext.get('mb7').on('click', function(){
Ext.MessageBox.show({
msg: 'Saving your data, please wait...',
progressText: 'Saving...',
width:300,
wait:true,
waitConfig: {interval:200},
icon:'ext-mb-download', //custom class in msg-box.html
animEl: 'mb7'
});
setTimeout(function(){
//This simulates a long-running operation like a database save or XHR call.
//In real code, this would be in a callback function.
Ext.MessageBox.hide();
Ext.example.msg('Done', 'Your fake data was saved!');
}, 8000);
});
Ext.get('mb8').on('click', function(){
Ext.MessageBox.alert('Status', 'Changes saved successfully.', showResult);
});
//Add these values dynamically so they aren't hard-coded in the html
Ext.fly('info').dom.value = Ext.MessageBox.INFO;
Ext.fly('question').dom.value = Ext.MessageBox.QUESTION;
Ext.fly('warning').dom.value = Ext.MessageBox.WARNING;
Ext.fly('error').dom.value = Ext.MessageBox.ERROR;
Ext.get('mb9').on('click', function(){
Ext.MessageBox.show({
title: 'Icon Support',
msg: 'Here is a message with an icon!',
buttons: Ext.MessageBox.OK,
animEl: 'mb9',
fn: showResult,
icon: Ext.get('icons').dom.value
});
});
function showResult(btn){
Ext.example.msg('Button Click', 'You clicked the {0} button', btn);
};
function showResultText(btn, text){
Ext.example.msg('Button Click', 'You clicked the {0} button and entered the text "{1}".', btn, text);
};
});
</script>
</head>
<body>
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>
<p>
<b>Confirm</b><br />
Standard Yes/No dialog.
<button id="mb1">Show</button>
</p>
<p>
<b>Prompt</b><br />
Standard prompt dialog.
<button id="mb2">Show</button>
</p>
<p>
<b>Multi-line Prompt</b><br />
A multi-line prompt dialog.
<button id="mb3">Show</button>
</p>
<p>
<b>Yes/No/Cancel</b><br />
Standard Yes/No/Cancel dialog.
<button id="mb4">Show</button>
</p>
<p>
<b>Progress Dialog</b><br />
Dialog with measured progress bar.
<button id="mb6">Show</button>
</p>
<p>
<b>Wait Dialog</b><br />
Dialog with indefinite progress bar and custom icon (will close after 8 sec).
<button id="mb7">Show</button>
</p>
<p>
<b>Alert</b><br />
Standard alert message dialog.
<button id="mb8">Show</button>
</p>
<p>
<b>Icons</b><br />
Standard alert with optional icon.
<select id="icons">
<option id="error" selected="selected">Error</option>
<option id="info">Informational</option>
<option id="question">Question</option>
<option id="warning">Warning</option>
</select>
<button id="mb9">Show</button>
</p>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>GMap Window Example</title>
<!-- GMaps API Key that works for dev.sencha.com -->
<script src="http://maps.google.com/maps?file=api&v=2&sensor=false&key=ABQIAAAAU95kDVDU-5Ve389sRBZmMRSDS7actCjtp4xNzNUSW7xICtwjdhQlKWh2kPaIb2ipOUl4vGqcEu0kWw" type="text/javascript"></script>
<!-- GMaps API Key that works for localhost -->
<!--<script src="http://maps.google.com/maps?file=api&v=2.x&key=ABQIAAAA2CKu_qQN-JHtlfQ5L7BLlRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQl3I3p2yrGARYK4f4bkjp9NHpm5w" type="text/javascript"></script>-->
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script src="ux/GMapPanel.js"></script>
<script src="gmap.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="shared/examples.css" />
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
</head>
<body>
<script type="text/javascript" src="../shared/examples.js"></script><!-- EXAMPLES -->
<h1>GMap Window</h1>
<p>This example shows how to create an extension and utilize an external library.</p>
<input type="button" id="show-btn" value="Gimme a Map" /><br /><br />
<p>Note that the js is not minified so it is readable. See <a href="../ux/GMapPanel.js">GMapPanel.js</a> and <a href="gmap.js">gmap.js</a> for the full source code.</p>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Hello World Window Example</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script language="javascript" src="hello.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="shared/examples.css" />
<style type="text/css">
.x-panel-body p {
margin:10px;
font-size:12px;
}
</style>
<script>
Ext.onReady(function() {
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var myReader = new Ext.data.ArrayReader({},
[
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]);
var grid = new Ext.grid.GridPanel({
store: new Ext.data.Store({
data: myData,
reader: myReader
}),
columns: [
{header: "Company",width: 120, sortable: true, dataIndex: 'company'},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true,renderer: Ext.util.Format.dateRenderer('m/d/Y'),dataIndex: 'lastChange'}
],
viewConfig: {
forceFit: true
},
renderTo: 'content',
title: 'My First Grid',
width: 500,
frame: true,
height:300
});
grid.getSelectionModel().selectFirstRow();});
</script>
</head>
<body>
<div id="content"></div>
</body>
</html>
<%@ 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 href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
Ext.form.Field.prototype.msgTarget = 'side';
var loginForm = new Ext.FormPanel( {
renderTo : document.body,
title : ' ',
bodyStyle : 'padding:5px 5px 0;',
frame : true,
labelAlign : 'right',
labelWidth : 75,
width : 300,
html : '<div align="right" style="width:94%"><a href=""> ?</a></div>',
defaultType : 'textfield',
defaults : {
width : 180
},
items : [ {
fieldLabel : ' ',
name : 'loginName',
id:'loginName',
blankText:" ",
allowBlank : false
}, {
fieldLabel : ' ',
name : 'passWord',
id:'passWord',
inputType : 'password',
blankText:" ",
allowBlank : false
}],
buttons : [ {
text : ' ',
handler : function login() {
if (loginForm.form.isValid()) {
var username_=Ext.getCmp('loginName').getValue();
var password_=Ext.getCmp('passWord').getValue();
Ext.MessageBox.wait(' , ……',' ');
Ext.Ajax.request({
url:'Login?action=2',
method:'post',
success: function(response, action) {
var sf=response.responseText;
Ext.Msg.alert(' ',sf);
},
failure: function(response, action){
Ext.Msg.alert(' ',sf);
},
params:{
username:username_,//
password:password_
}
});
}
}
}, {
text : ' ',
handler : function reset() {
loginForm.form.reset();
}
},{
text:' ',
handler: function register(){
if (loginForm.form.isValid()){
var username_=Ext.getCmp('loginName').getValue();
var password_=Ext.getCmp('passWord').getValue();
Ext.MessageBox.wait(' , ……',' ');
Ext.Ajax.request({
url:"Login?action=1",
method:"post",
success:function(response,msg){
var sf=response.responseText;
Ext.Msg.alert(" ",sf);
},
failure:function(response,opts){
Ext.Msg.alert(" "," ");
},
params:{
username:username_,//
password:password_
}
});
}
}
}]
});
loginForm.getEl().center();
});
</script>
</head>
<body>
</body>
</html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>MessageBox</title>
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<script type="text/javascript" src="msg-box.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="shared/examples.css" />
<style type="text/css">
.x-window-dlg .ext-mb-download {
background:transparent url(images/download.gif) no-repeat top left;
height:46px;
}
</style>
</head>
<body>
<script type="text/javascript" src="shared/examples.js"></script><!-- EXAMPLES -->
<h1>MessageBox Dialogs</h1>
<p>The example shows how to use the MessageBox class. Some of the buttons have animations, some are normal.</p>
<p>The js is not minified so it is readable. See <a href="msg-box.js">msg-box.js</a>.</p>
<p>
<b>Confirm</b><br />
Standard Yes/No dialog.
<button id="mb1">Show</button>
</p>
<p>
<b>Prompt</b><br />
Standard prompt dialog.
<button id="mb2">Show</button>
</p>
<p>
<b>Multi-line Prompt</b><br />
A multi-line prompt dialog.
<button id="mb3">Show</button>
</p>
<p>
<b>Yes/No/Cancel</b><br />
Standard Yes/No/Cancel dialog.
<button id="mb4">Show</button>
</p>
<p>
<b>Progress Dialog</b><br />
Dialog with measured progress bar.
<button id="mb6">Show</button>
</p>
<p>
<b>Wait Dialog</b><br />
Dialog with indefinite progress bar and custom icon (will close after 8 sec).
<button id="mb7">Show</button>
</p>
<p>
<b>Alert</b><br />
Standard alert message dialog.
<button id="mb8">Show</button>
</p>
<p>
<b>Icons</b><br />
Standard alert with optional icon.
<select id="icons">
<option id="error" selected="selected">Error</option>
<option id="info">Informational</option>
<option id="question">Question</option>
<option id="warning">Warning</option>
</select>
<button id="mb9">Show</button>
</p>
</body>
</html>
<%@ 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 href="<%=basePath%>">
<title>My JSP 'MyJsp.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<link rel="stylesheet" type="text/css" href="ExtJS/resources/css/ext-all.css">
<script type="text/javascript" src="ExtJS/adapter/ext/ext-base.js" ></script>
<script type="text/javascript" src="ExtJS/ext-all.js" ></script>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<style>
body{
font-size:13px;
}
</style>
</head>
<script>
Ext.onReady(function(){
new Ext.Panel({
renderTo:"hello",
title:" ",
width:200,
height:300,
layout:"accordion",
layoutConfig: {
animate: true
},
items:[{title:" ",html:" 1 "},
{title:" ",html:" 2 "},
{title:" ",html:" 3 "},
{title:" ",html:" 4 "},
{title:" ",html:" 5 "},
{title:" ",html:" 6 "}
] }
);
});
</script>
<body>
<div id="hello" style="margin:2px"></div>
</body>
</html>
<html><head>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!-- <link rel="stylesheet" type="text/css" href="styles.css"> -->
<style type="text/css">
<!--div { background-color: #F06; height: 100px; width: 300px;}
.myc { background-color: blue;}-->
</style>
<script src="jquery-1.4.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#load").click(function(){
$("div").toggleClass("myc");
//$.get( //"json",
//{a:1,b:2}, //function(data){
//alert(data); //}
//);
$.ajax({
type:"get",
url:"JSONAction",
data:"a=1&b=2&c=3",
dataType:"json",
success:function(data){
var items=data.list;
for(var i =0;i<items.length;i++)
{
var item=items[i];
//alert(item.username);
$("#tar").append(" :"+item[0]+"<p> :"+item[1]);
};
}
});
});
});
</script>
</head>
<body>
<input type="button" value=" " id="load">
<div id="tar"></div> </body></html>