JavaScript DHTML/Ext JS/ViewPort
Содержание
Add viewport to body
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "fit",
title : "Tab",
items : {
xtype : "tabpanel",
activeTab : 0,
id : "myTPanel",
enableTabScroll : true,
resizeTabs : true,
minTabWidth : 75,
items : [
{
title : "our first tab"
}
]
}
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>
collapseMode in a Viewport
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout: "border",
id: "movieview",
renderTo: document.body,
items: [{
region: "north",
xtype: "panel",
html: "North"
},{
region: "west",
xtype: "panel",
split: true,
collapsible: true,
collapseMode: "mini",
title: "Some Info",
bodyStyle:"padding:5px;",
width: 200,
minSize: 200,
html: "West"
},{
region: "center",
xtype: "tabpanel",
activeTab: 0,
items: [{
title: "Grid",
html: "Center"
}]
},{
region: "east",
xtype: "panel",
split: true,
width: 200,
html: "East"
},{
region: "south",
xtype: "panel",
html: "South"
}]
});});
</script>
<body>
</body>
</html>
Ext.Viewport with tree view and table
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
var Forum = {};
//////////////////////////////////////////////////////////////////////////////////////////////
// The data store for topics
Forum.TopicStore = function(){
Forum.TopicStore.superclass.constructor.call(this, {
remoteSort: true,
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "threadid"
}, [
"title", "forumtitle", "forumid", "author",
{name: "replycount", type: "int"},
{name: "lastpost", mapping: "lastpost", type: "date", dateFormat: "timestamp"},
"lastposter", "excerpt"
])
});
this.setDefaultSort("lastpost", "desc");
};
Ext.extend(Forum.TopicStore, Ext.data.Store, {
loadForum : function(forumId){
this.baseParams = {
forumId: forumId
};
this.load({
params: {
start:0,
limit:25
}
});
}
});
//////////////////////////////////////////////////////////////////////////////////////////////
// some renderers
Forum.Renderers = {
topic : function(value, p, record){
return String.format(
"<div class="topic"><b>{0}</b><span class="author">{1}</span></div>",
value, record.data.author, record.id, record.data.forumid);
},
lastPost : function(value, p, r){
return String.format("<span class="post-date">{0}</span><br/>by {1}", value.dateFormat("M j, Y, g:i a"), r.data["lastposter"]);
}
};
//////////////////////////////////////////////////////////////////////////////////////////////
Forum.SearchView = function(search){
this.preview = new Ext.Panel({
region:"south",
height:250,
title:"View Message",
split:true
});
this.store = new Ext.data.Store({
remoteSort: true,
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "post_id"
}, [
{name: "postId", mapping: "post_id"},
{name: "title", mapping: "topic_title"},
{name: "topicId", mapping: "topic_id"},
{name: "author", mapping: "author"},
{name: "lastPost", mapping: "post_time", type: "date", dateFormat: "timestamp"},
{name: "excerpt", mapping: "post_text"}
])
});
this.store.setDefaultSort("lastpost", "desc");
this.grid = new Ext.grid.GridPanel({
region:"center",
store: this.store,
cm: new Ext.grid.ColumnModel([{
id: "topic",
header: "Post Title",
dataIndex: "title",
width: 420,
renderer: Forum.Renderers.topic
},{
id: "last",
header: "Date Posted",
dataIndex: "lastpost",
width: 150,
renderer: Ext.util.Format.dateRenderer("M j, Y, g:i a")
}]),
sm: new Ext.grid.RowSelectionModel({
singleSelect:true
}),
trackMouseOver:false,
loadMask: {msg:"Searching..."},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds){
if(this.showPreview){
p.body = "<p>"+record.data.excerpt+"</p>";
return "x-grid3-row-expanded";
}
return "x-grid3-row-collapsed";
}
},
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds,
displayInfo: true,
displayMsg: "Displaying results {0} - {1} of {2}",
emptyMsg: "No results to display"
})
});
Forum.SearchView.superclass.constructor.call(this, {
layout:"border",
title:"Search: "+Ext.util.Format.htmlEncode("""+search+"""),
items:[ this.grid, this.preview ]
});
this.store.baseParams = {
query: search
};
this.store.load({params:{start:0, limit: 25}});
};
Ext.extend(Forum.SearchView, Ext.Panel);
Ext.onReady(function(){
Ext.QuickTips.init();
var ds = new Forum.TopicStore();
var cm = new Ext.grid.ColumnModel([{
id: "topic",
header: "Topic",
dataIndex: "title",
width: 420,
renderer: Forum.Renderers.topic
},{
header: "Author",
dataIndex: "author",
width: 100,
hidden: true
},{
header: "Replies",
dataIndex: "replycount",
width: 70,
align: "right"
},{
id: "last",
header: "Last Post",
dataIndex: "lastpost",
width: 150,
renderer: Forum.Renderers.lastPost
}]);
cm.defaultSortable = true;
var viewport = new Ext.Viewport({
layout:"border",
items:[
new Ext.BoxComponent({ // raw
region:"north",
el: "header",
height:32
}),
new Ext.tree.TreePanel({
id:"forum-tree",
region:"west",
title:"Forums",
split:true,
width: 325,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:"0 0 5 5",
loader: new Forum.TreeLoader(),
rootVisible:false,
lines:false,
autoScroll:true,
root: new Ext.tree.AsyncTreeNode({
text: "Forums",
expanded:true
})
}),
new Ext.TabPanel({
id:"main-tabs",
activeTab:0,
region:"center",
margins:"0 5 5 0",
resizeTabs:true,
tabWidth:150,
items: {
id:"main-view",
layout:"border",
title:"Loading...",
items:[
new Ext.grid.GridPanel({
region:"center",
id:"topic-grid",
store: ds,
cm: cm,
sm:new Ext.grid.RowSelectionModel({
singleSelect:true,
listeners: {
selectionchange: function(sel){
var rec = sel.getSelected();
if(rec){
Ext.getCmp("preview").body.update("<b><u>" + rec.get("title") + "</u></b><br /><br />Post details here.");
}
}
}
}),
trackMouseOver:false,
loadMask: {msg:"Loading Topics..."},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds){
if(this.showPreview){
p.body = "<p>"+record.data.excerpt+"</p>";
return "x-grid3-row-expanded";
}
return "x-grid3-row-collapsed";
}
},
tbar:[
{
text:"New Topic",
iconCls: "new-topic",
handler:function(){alert("Not implemented.");}
},
"-",
{
pressed: true,
enableToggle:true,
text:"Preview Pane",
tooltip: {title:"Preview Pane",text:"Show or hide the Preview Pane"},
iconCls: "preview",
toggleHandler: togglePreview
},
" ",
{
pressed: true,
enableToggle:true,
text:"Summary",
tooltip: {title:"Post Summary",text:"View a short summary of each post in the list"},
iconCls: "summary",
toggleHandler: toggleDetails
}
],
bbar: new Ext.PagingToolbar({
pageSize: 25,
store: ds,
displayInfo: true,
displayMsg: "Displaying topics {0} - {1} of {2}",
emptyMsg: "No topics to display"
})
}), {
id:"preview",
region:"south",
height:250,
title:"View Topic",
split:true,
bodyStyle: "padding: 10px; font-family: Arial; font-size: 12px;"
}
]
}
})
]
});
var tree = Ext.getCmp("forum-tree");
tree.on("append", function(tree, p, node){
if(node.id == 40){
node.select.defer(100, node);
}
});
var sm = tree.getSelectionModel();
sm.on("beforeselect", function(sm, node){
return node.isLeaf();
});
sm.on("selectionchange", function(sm, node){
ds.loadForum(node.id);
Ext.getCmp("main-view").setTitle(node.text);
});
var searchStore = new Ext.data.Store({
proxy: new Ext.data.ScriptTagProxy({
url: "http://extjs.ru/forum/topics-browse-remote.php"
}),
reader: new Ext.data.JsonReader({
root: "topics",
totalProperty: "totalCount",
id: "threadid"
}, [
"title", "author",
{name: "lastpost", type: "date", dateFormat: "timestamp"}
])
});
// Custom rendering Template
var resultTpl = new Ext.XTemplate(
"<tpl for=".">",
"<div class="x-combo-list-item search-item">{title} by <b>{author}</b></div>",
"</tpl>"
);
var search = new Ext.form.ruboBox({
store: searchStore,
applyTo: "search",
displayField:"title",
typeAhead: false,
loadingText: "Searching...",
width: 200,
pageSize:10,
listWidth:550,
hideTrigger:true,
tpl: resultTpl,
minChars:3,
emptyText:"Quick Search",
onSelect: function(record){ // override default onSelect to do redirect
window.location =
String.format("http://extjs.ru/forum/showthread.php?t={0}&p={1}", record.data.topicId, record.id);
}
});
// apply it to the exsting input element
//search.applyTo("search");
function toggleDetails(btn, pressed){
var view = Ext.getCmp("topic-grid").getView();
view.showPreview = pressed;
view.refresh();
}
function togglePreview(btn, pressed){
var preview = Ext.getCmp("preview");
preview[pressed ? "show" : "hide"]();
preview.ownerCt.doLayout();
}
});
Forum.TreeLoader = function(){
Forum.TreeLoader.superclass.constructor.call(this);
this.proxy = new Ext.data.ScriptTagProxy({
url : this.dataUrl
});
};
Ext.extend(Forum.TreeLoader, Ext.tree.TreeLoader, {
dataUrl: "http://extjs.ru/forum/forums-remote.php",
requestData : function(node, cb){
this.proxy.request("read", null, {}, {
readRecords : function(o){
return o;
}
}, this.addNodes, this, {node:node, cb:cb});
},
addNodes : function(o, arg){
var node = arg.node;
for(var i = 0, len = o.length; i < len; i++){
var n = this.createNode(o[i]);
if(n){
node.appendChild(n);
}
}
arg.cb(this, node);
}
});
</script>
<div id="header">
<div style="float:right;margin:5px;" class="x-small-editor">
<input type="text" id="search" /></div></div>
</body>
</html>
Set split to true for east part of the Viewport
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout: "border",
id: "movieview",
renderTo: document.body,
items: [{
region: "north",
xtype: "panel",
html: "North"
},{
region: "west",
xtype: "panel",
split: true,
collapsible: true,
collapseMode: "mini",
title: "Some Info",
bodyStyle:"padding:5px;",
width: 200,
minSize: 200,
html: "West"
},{
region: "center",
xtype: "tabpanel",
activeTab: 0,
items: [{
title: "Grid",
html: "Center"
}]
},{
region: "east",
xtype: "panel",
split: true,
width: 200,
html: "East"
},{
region: "south",
xtype: "panel",
html: "South"
}]
});});
</script>
<body>
</body>
</html>
Set Viewport center to a tab panel
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout: "border",
id: "movieview",
renderTo: document.body,
items: [{
region: "north",
xtype: "panel",
html: "North"
},{
region: "west",
xtype: "panel",
split: true,
collapsible: true,
collapseMode: "mini",
title: "Some Info",
bodyStyle:"padding:5px;",
width: 200,
minSize: 200,
html: "West"
},{
region: "center",
xtype: "tabpanel",
activeTab: 0,
items: [{
title: "Grid",
html: "Center"
}]
},{
region: "east",
xtype: "panel",
split: true,
width: 200,
html: "East"
},{
region: "south",
xtype: "panel",
html: "South"
}]
});});
</script>
<body>
</body>
</html>
Set xtype to panel for Viewport
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<script type="text/javascript">
Ext.onReady(function() {
Ext.QuickTips.init();
var viewport = new Ext.Viewport({
layout: "border",
id: "movieview",
renderTo: document.body,
items: [{
region: "north",
xtype: "panel",
html: "North"
},{
region: "west",
xtype: "panel",
split: true,
collapsible: true,
collapseMode: "mini",
title: "Some Info",
bodyStyle:"padding:5px;",
width: 200,
minSize: 200,
html: "West"
},{
region: "center",
xtype: "tabpanel",
activeTab: 0,
items: [{
title: "Grid",
html: "Center"
}]
},{
region: "east",
xtype: "panel",
split: true,
width: 200,
html: "East"
},{
region: "south",
xtype: "panel",
html: "South"
}]
});});
</script>
<body>
</body>
</html>
Use AccordionPanel in a Viewport
<!--
/*!
* Ext JS Library 3.0.0
* Copyright(c) 2006-2009 Ext JS, LLC
* licensing@extjs.ru
* http://www.extjs.ru/license
*/
-->
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<!-- Revised from demo code in ext3.0.0 -->
<body>
<script type="text/javascript">
Ext.onReady(function() {
var item1 = new Ext.Panel({
title: "Accordion Item 1",
html: "<empty panel>",
cls:"empty"
});
var item2 = new Ext.Panel({
title: "Accordion Item 2",
html: "<empty panel>",
cls:"empty"
});
var item3 = new Ext.Panel({
title: "Accordion Item 3",
html: "<empty panel>",
cls:"empty"
});
var item4 = new Ext.Panel({
title: "Accordion Item 4",
html: "<empty panel>",
cls:"empty"
});
var item5 = new Ext.Panel({
title: "Accordion Item 5",
html: "<empty panel>",
cls:"empty"
});
var accordion = new Ext.Panel({
region:"west",
margins:"5 0 5 5",
split:true,
width: 210,
layout:"accordion",
items: [item1, item2, item3, item4, item5]
});
var viewport = new Ext.Viewport({
layout:"border",
items:[
accordion, {
region:"center",
margins:"5 5 5 0",
cls:"empty",
bodyStyle:"background:#f1f1f1",
html:"<br/><br/><empty center panel>"
}]
});
});
</script>
</body>
</html>
Viewport: north, west, center
<html>
<head>
<title>Hello World Window</title>
<link rel="stylesheet" type="text/css" href="ext-3.0.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-3.0.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-3.0.0/ext-all.js"></script>
</head>
<body>
<script type="text/javascript">
Ext.onReady(function() {
new Ext.Viewport({
layout : "border",
items : [
{
height : 75,
region : "north",
title : "North"
},
{
width : 150,
region : "west",
title : "west"
},
{
region : "center",
title : "center"
}
]
});
});
</script>
<div id="div1">asdf</div>
</body>
</html>