树形结构代码：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ext2.2 Demo</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 src="Ext.ux.GMapPanel.js"></script>
<script>
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
Ext.onReady(function(){
var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'north',
height:32
}),
new Ext.BoxComponent({ // raw
region:'south',
el: 'south',
height:32
}),
{
region:'west',
id:'west-panel',
title:'Menu',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [
{
contentEl: 'west',
title:'TreeDemo',
border:false,
iconCls:'nav'
},
{
title:'Settings',
html:'<p>Some settings in here.</p>',
border:false,
iconCls:'settings'
}
]
},
new Ext.TabPanel({
region:'center',
id:'tabs',
deferredRender:false,
activeTab:0,
defaults: {autoScroll:true},
enableTabScroll:true,
resizeTabs:true, // turn on tab resizing
items:[{
contentEl:'content',
title: 'Welcome',
autoScroll:true
}]
})
]
});
//var loader=new Ext.tree.TreeLoader({
// url:"treedata.js"
//});
var root=new Ext.tree.AsyncTreeNode({
id:"root",
text:"Examples",
hrefTarget:"_blank",
leaf:false,
children:[{
id: 1,
text: 'Floating Windows Example',
children:[{id:2,text:'Hello World Window Example',href:"hello.html",hrefTarget:"content",leaf:true}
]
},
{
id: 5,
text: 'Drag and Drop Example',
children:[{id:6,text:'Grid to Grid Drag and Drop Example',href:"dnd_grid_to_grid.html",hrefTarget:"content",leaf:true}
]
},
{
id: 7,
text: 'Sliding Windows Example',
children:[{id:7,text:'GMap Window Example',href:"gmap.html",hrefTarget:"content",leaf:true}
]
}
]
});
var tree=new Ext.tree.TreePanel({
id:"0",
title:"Extjs静态树",
renderTo:"tree",
root:root,
width:300
});
//tree.on("click",function(node,event){
// viewport.findById("tabs").add({
// title:node.text,
// closable:true,
// autoLoad:{url: node.attributes.url, scripts:true}
// }).show();
//});
});
</script>
<style type="text/css">
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
p {
margin:5px;
}
.settings {
background-image:url(../shared/icons/fam/folder_wrench.png);
}
.nav {
background-image:url(../shared/icons/fam/folder_go.png);
}
</style>
</head>
<body>
<!--
<div id="loading-mask" style=""></div>
<div id="loading">
<div class="loading-indicator"><img src="images/loader.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle"/>Loading...</div>
</div>
<!-- include everything after the loading indicator -->
<div id="north">
<p>EXT2.2 Test</p>
</div>
<div id="west">
<div id="tree"></div>
</div>
<div id="center1">
<iframe name="content" width="800" height="500" ></iframe>
</div>
<div id="props-panel" style="width:200px;height:200px;overflow:hidden;">
</div>
<div id="south" align="right">
<p>By Roger</p>
</div>
</body>
</html>
浮动窗口js代码：
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
var win;
var button = Ext.get('show-btn');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!win){
win = new Ext.Window({
applyTo : 'hello-win',
layout : 'fit',
width : 500,
height : 300,
closeAction :'hide',
plain : true,
items : new Ext.TabPanel({
applyTo : 'hello-tabs',
autoTabs : true,
activeTab : 0,
deferredRender : false,
border : false
}),
buttons: [{
text : 'Submit',
disabled : true
},{
text : 'Close',
handler : function(){
win.hide();
}
}]
});
}
win.show(button);
});
});
googlemap代码：
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
var mapwin;
var button = Ext.get('show-btn');
button.on('click', function(){
// create the window on the first click and reuse on subsequent clicks
if(!mapwin){
mapwin = new Ext.Window({
layout: 'fit',
title: 'GMap Window',
closeAction: 'hide',
width:400,
height:400,
x: 40,
y: 60,
items: {
xtype: 'gmappanel',
region: 'center',
zoomLevel: 14,
gmapType: 'map',
mapConfOpts: ['enableScrollWheelZoom','enableDoubleClickZoom','enableDragging'],
mapControls: ['GSmallMapControl','GMapTypeControl','NonExistantControl'],
setCenter: {
geoCodeAddr: '4 Yawkey Way, Boston, MA, 02215-3409, USA',
marker: {title: 'Fenway Park'}
},
markers: [{
lat: 42.339641,
lng: -71.094224,
marker: {title: 'Boston Museum of Fine Arts'},
listeners: {
click: function(e){
Ext.Msg.alert('Its fine', 'and its art.');
}
}
},{
lat: 42.339419,
lng: -71.09077,
marker: {title: 'Northeastern University'}
}]
}
});
}
mapwin.show();
});
});
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/**
* @author Shea Frederick
*/
Ext.namespace('Ext.ux');
/**
*
* @class GMapPanel
* @extends Ext.Panel
*/
Ext.ux.GMapPanel = Ext.extend(Ext.Panel, {
initComponent : function(){
var defConfig = {
plain: true,
zoomLevel: 3,
yaw: 180,
pitch: 0,
zoom: 0,
gmapType: 'map',
border: false
};
Ext.applyIf(this,defConfig);
Ext.ux.GMapPanel.superclass.initComponent.call(this);
},
afterRender : function(){
var wh = this.ownerCt.getSize();
Ext.applyIf(this, wh);
Ext.ux.GMapPanel.superclass.afterRender.call(this);
if (this.gmapType === 'map'){
this.gmap = new GMap2(this.body.dom);
}
if (this.gmapType === 'panorama'){
this.gmap = new GStreetviewPanorama(this.body.dom);
}
if (typeof this.addControl == 'object' && this.gmapType === 'map') {
this.gmap.addControl(this.addControl);
}
if (typeof this.setCenter === 'object') {
if (typeof this.setCenter.geoCodeAddr === 'string'){
this.geoCodeLookup(this.setCenter.geoCodeAddr);
}else{
if (this.gmapType === 'map'){
var point = new GLatLng(this.setCenter.lat,this.setCenter.lng);
this.gmap.setCenter(point, this.zoomLevel);
}
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear);
}
}
if (this.gmapType === 'panorama'){
this.gmap.setLocationAndPOV(new GLatLng(this.setCenter.lat,this.setCenter.lng), {yaw: this.yaw, pitch: this.pitch, zoom: this.zoom});
}
}
GEvent.bind(this.gmap, 'load', this, function(){
this.onMapReady();
});
},
onMapReady : function(){
this.addMarkers(this.markers);
this.addMapControls();
this.addOptions();
},
onResize : function(w, h){
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.onResize.call(this, w, h);
},
setSize : function(width, height, animate){
if (typeof this.getMap() == 'object') {
this.gmap.checkResize();
}
Ext.ux.GMapPanel.superclass.setSize.call(this, width, height, animate);
},
getMap : function(){
return this.gmap;
},
getCenter : function(){
return this.getMap().getCenter();
},
getCenterLatLng : function(){
var ll = this.getCenter();
return {lat: ll.lat(), lng: ll.lng()};
},
addMarkers : function(markers) {
if (Ext.isArray(markers)){
for (var i = 0; i < markers.length; i++) {
var mkr_point = new GLatLng(markers[i].lat,markers[i].lng);
this.addMarker(mkr_point,markers[i].marker,false,markers[i].setCenter, markers[i].listeners);
}
}
},
addMarker : function(point, marker, clear, center, listeners){
Ext.applyIf(marker,G_DEFAULT_ICON);
if (clear === true){
this.getMap().clearOverlays();
}
if (center === true) {
this.getMap().setCenter(point, this.zoomLevel);
}
var mark = new GMarker(point,marker);
if (typeof listeners === 'object'){
for (evt in listeners) {
GEvent.bind(mark, evt, this, listeners[evt]);
}
}
this.getMap().addOverlay(mark);
},
addMapControls : function(){
if (this.gmapType === 'map') {
if (Ext.isArray(this.mapControls)) {
for(i=0;i<this.mapControls.length;i++){
this.addMapControl(this.mapControls[i]);
}
}else if(typeof this.mapControls === 'string'){
this.addMapControl(this.mapControls);
}else if(typeof this.mapControls === 'object'){
this.getMap().addControl(this.mapControls);
}
}
},
addMapControl : function(mc){
var mcf = window[mc];
if (typeof mcf === 'function') {
this.getMap().addControl(new mcf());
}
},
addOptions : function(){
if (Ext.isArray(this.mapConfOpts)) {
var mc;
for(i=0;i<this.mapConfOpts.length;i++){
this.addOption(this.mapConfOpts[i]);
}
}else if(typeof this.mapConfOpts === 'string'){
this.addOption(this.mapConfOpts);
}
},
addOption : function(mc){
var mcf = this.getMap()[mc];
if (typeof mcf === 'function') {
this.getMap()[mc]();
}
},
geoCodeLookup : function(addr) {
this.geocoder = new GClientGeocoder();
this.geocoder.getLocations(addr, this.addAddressToMap.createDelegate(this));
},
addAddressToMap : function(response) {
if (!response || response.Status.code != 200) {
Ext.MessageBox.alert('Error', 'Code '+response.Status.code+' Error Returned');
}else{
place = response.Placemark[0];
addressinfo = place.AddressDetails;
accuracy = addressinfo.Accuracy;
if (accuracy === 0) {
Ext.MessageBox.alert('Unable to Locate Address', 'Unable to Locate the Address you provided');
}else{
if (accuracy < 7) {
Ext.MessageBox.alert('Address Accuracy', 'The address provided has a low accuracy.<br><br>Level '+accuracy+' Accuracy (8 = Exact Match, 1 = Vague Match)');
}else{
point = new GLatLng(place.Point.coordinates[1], place.Point.coordinates[0]);
if (typeof this.setCenter.marker === 'object' && typeof point === 'object'){
this.addMarker(point,this.setCenter.marker,this.setCenter.marker.clear,true, this.setCenter.listeners);
}
}
}
}
}
});
Ext.reg('gmappanel',Ext.ux.GMapPanel);
拖拽效果代码：
/*
* Ext JS Library 2.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
/*
* Ext JS Library 2.1
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing@extjs.com
*
* http://extjs.com/license
*/
Ext.onReady(function(){
var myData = {
records : [
{ name : "Rec 0", column1 : "0", column2 : "0" },
{ name : "Rec 1", column1 : "1", column2 : "1" },
{ name : "Rec 2", column1 : "2", column2 : "2" },
{ name : "Rec 3", column1 : "3", column2 : "3" },
{ name : "Rec 4", column1 : "4", column2 : "4" },
{ name : "Rec 5", column1 : "5", column2 : "5" },
{ name : "Rec 6", column1 : "6", column2 : "6" },
{ name : "Rec 7", column1 : "7", column2 : "7" },
{ name : "Rec 8", column1 : "8", column2 : "8" },
{ name : "Rec 9", column1 : "9", column2 : "9" }
]
};
// Generic fields array to use in both store defs.
var fields = [
{name: 'name', mapping : 'name'},
{name: 'column1', mapping : 'column1'},
{name: 'column2', mapping : 'column2'}
];
// create the data store
var firstGridStore = new Ext.data.JsonStore({
fields : fields,
data : myData,
root : 'records'
});
// Column Model shortcut array
var cols = [
{ id : 'name', header: "Record Name", width: 160, sortable: true, dataIndex: 'name'},
{header: "column1", width: 50, sortable: true, dataIndex: 'column1'},
{header: "column2", width: 50, sortable: true, dataIndex: 'column2'}
];
// declare the source Grid
var firstGrid = new Ext.grid.GridPanel({
ddGroup : 'secondGridDDGroup',
store : firstGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 325,
region : 'west',
title : 'First Grid'
});
var secondGridStore = new Ext.data.JsonStore({
fields : fields,
root : 'records'
});
// create the destination Grid
var secondGrid = new Ext.grid.GridPanel({
ddGroup : 'firstGridDDGroup',
store : secondGridStore,
columns : cols,
enableDragDrop : true,
stripeRows : true,
autoExpandColumn : 'name',
width : 325,
region : 'center',
title : 'Second Grid'
});
//Simple 'border layout' panel to house both grids
var displayPanel = new Ext.Panel({
width : 650,
height : 300,
layout : 'border',
renderTo : 'panel',
items : [
firstGrid,
secondGrid
],
bbar : [
'->', // Fill
{
text : 'Reset both grids',
handler : function() {
//refresh source grid
firstGridStore.loadData(myData);
//purge destination grid
secondGridStore.removeAll();
}
}
]
});
// used to add records to the destination stores
var blankRecord = Ext.data.Record.create(fields);
/****
* Setup Drop Targets
***/
// This will make sure we only drop to the view container
var firstGridDropTargetEl = firstGrid.getView().el.dom.childNodes[0].childNodes[1];
var firstGridDropTarget = new Ext.dd.DropTarget(firstGridDropTargetEl, {
ddGroup : 'firstGridDDGroup',
copy : true,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = firstGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
firstGridStore.add(record);
// Call a sort dynamically
firstGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
// This will make sure we only drop to the view container
var secondGridDropTargetEl = secondGrid.getView().el.dom.childNodes[0].childNodes[1]
var destGridDropTarget = new Ext.dd.DropTarget(secondGridDropTargetEl, {
ddGroup : 'secondGridDDGroup',
copy : false,
notifyDrop : function(ddSource, e, data){
// Generic function to add records.
function addRow(record, index, allItems) {
// Search for duplicates
var foundItem = secondGridStore.find('name', record.data.name);
// if not found
if (foundItem == -1) {
secondGridStore.add(record);
// Call a sort dynamically
secondGridStore.sort('name', 'ASC');
//Remove Record from the source
ddSource.grid.store.remove(record);
}
}
// Loop through the selections
Ext.each(ddSource.dragData.selections ,addRow);
return(true);
}
});
});
