投放本站广告请联系:
extjscn#126.com
广告合作
Sencha相关书籍
- 中文书籍:
- 英文书籍:
导航
聚合
定制:门户网站(Customizing: Portals)
演示(demo)地址在文章最后.
效果图如下:
主要文件portal.html。
portal.html
<html>
<head>
<title>Custom Layouts and Containers - Portal Sample</title>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<script type="text/javascript" src="Portal.js"></script>
<script type="text/javascript" src="PortalColumn.js"></script>
<script type="text/javascript" src="Portlet.js"></script>
<link rel="stylesheet" type="text/css" href="portal.css" />
<link rel="stylesheet" type="text/css" href="sample.css" />
<script type="text/javascript" src="sample.js"></script>
<script type="text/javascript" src="sample-grid.js"></script>
</head>
<body>
<script type="text/javascript" src="../examples.js"></script><!-- EXAMPLES -->
</body>
</html>
portal.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
Ext.ux.Portal = Ext.extend(Ext.Panel, {
layout: 'column',
autoScroll:true,
cls:'x-portal',
defaultType: 'portalcolumn',
initComponent : function(){
Ext.ux.Portal.superclass.initComponent.call(this);
this.addEvents({
validatedrop:true,
beforedragover:true,
dragover:true,
beforedrop:true,
drop:true
});
},
initEvents : function(){
Ext.ux.Portal.superclass.initEvents.call(this);
this.dd = new Ext.ux.Portal.DropZone(this, this.dropConfig);
}
});
Ext.reg('portal', Ext.ux.Portal);
Ext.ux.Portal.DropZone = function(portal, cfg){
this.portal = portal;
Ext.dd.ScrollManager.register(portal.body);
Ext.ux.Portal.DropZone.superclass.constructor.call(this, portal.bwrap.dom, cfg);
portal.body.ddScrollConfig = this.ddScrollConfig;
};
Ext.extend(Ext.ux.Portal.DropZone, Ext.dd.DropTarget, {
ddScrollConfig : {
vthresh: 50,
hthresh: -1,
animate: true,
increment: 200
},
createEvent : function(dd, e, data, col, c, pos){
return {
portal: this.portal,
panel: data.panel,
columnIndex: col,
column: c,
position: pos,
data: data,
source: dd,
rawEvent: e,
status: this.dropAllowed
};
},
notifyOver : function(dd, e, data){
var xy = e.getXY(), portal = this.portal, px = dd.proxy;
// case column widths
if(!this.grid){
this.grid = this.getGrid();
}
// handle case scroll where scrollbars appear during drag
var cw = portal.body.dom.clientWidth;
if(!this.lastCW){
this.lastCW = cw;
}else if(this.lastCW != cw){
this.lastCW = cw;
portal.doLayout();
this.grid = this.getGrid();
}
// determine column
var col = 0, xs = this.grid.columnX, cmatch = false;
for(var len = xs.length; col < len; col++){
if(xy[0] < (xs[col].x + xs[col].w)){
cmatch = true;
break;
}
}
// no match, fix last index
if(!cmatch){
col--;
}
// find insert position
var p, match = false, pos = 0,
c = portal.items.itemAt(col),
items = c.items.items;
for(var len = items.length; pos < len; pos++){
p = items[pos];
var h = p.el.getHeight();
if(h !== 0 && (p.el.getY()+(h/2)) > xy[1]){
match = true;
break;
}
}
var overEvent = this.createEvent(dd, e, data, col, c,
match && p ? pos : c.items.getCount());
if(portal.fireEvent('validatedrop', overEvent) !== false &&
portal.fireEvent('beforedragover', overEvent) !== false){
// make sure proxy width is fluid
px.getProxy().setWidth('auto');
if(p){
px.moveProxy(p.el.dom.parentNode, match ? p.el.dom : null);
}else{
px.moveProxy(c.el.dom, null);
}
this.lastPos = {c: c, col: col, p: match && p ? pos : false};
this.scrollPos = portal.body.getScroll();
portal.fireEvent('dragover', overEvent);
return overEvent.status;;
}else{
return overEvent.status;
}
},
notifyOut : function(){
delete this.grid;
},
notifyDrop : function(dd, e, data){
delete this.grid;
if(!this.lastPos){
return;
}
var c = this.lastPos.c, col = this.lastPos.col, pos = this.lastPos.p;
var dropEvent = this.createEvent(dd, e, data, col, c,
pos !== false ? pos : c.items.getCount());
if(this.portal.fireEvent('validatedrop', dropEvent) !== false &&
this.portal.fireEvent('beforedrop', dropEvent) !== false){
dd.proxy.getProxy().remove();
dd.panel.el.dom.parentNode.removeChild(dd.panel.el.dom);
if(pos !== false){
c.insert(pos, dd.panel);
}else{
c.add(dd.panel);
}
c.doLayout();
this.portal.fireEvent('drop', dropEvent);
// scroll position is lost on drop, fix it
var st = this.scrollPos.top;
if(st){
var d = this.portal.body.dom;
setTimeout(function(){
d.scrollTop = st;
}, 10);
}
}
delete this.lastPos;
},
// internal cache of body and column coords
getGrid : function(){
var box = this.portal.bwrap.getBox();
box.columnX = [];
this.portal.items.each(function(c){
box.columnX.push({x: c.el.getX(), w: c.el.getWidth()});
});
return box;
}
});
portal.css
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
.x-portal .x-panel-dd-spacer {
margin-bottom:10px;
}
.x-portlet {
margin-bottom:10px;
}
/* Clean up the look of the portlets */
.x-portlet .x-panel-ml {
padding-left:2px;
}
.x-portlet .x-panel-mr {
padding-right:2px;
}
.x-portlet .x-panel-bl {
padding-left:2px;
}
.x-portlet .x-panel-br {
padding-right:2px;
}
.x-portlet .x-panel-body {
background:white;
}
.x-portlet .x-panel-mc {
padding-top:2px;
}
.x-portlet .x-panel-bc .x-panel-footer {
padding-bottom:2px;
}
.x-portlet .x-panel-nofooter .x-panel-bc {
height:2px;
}
PortalColumn.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
Ext.ux.PortalColumn = Ext.extend(Ext.Container, {
layout: 'anchor',
autoEl: 'div',
defaultType: 'portlet',
cls:'x-portal-column'
});
Ext.reg('portalcolumn', Ext.ux.PortalColumn);
Portlet.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
Ext.ux.Portlet = Ext.extend(Ext.Panel, {
anchor: '100%',
frame:true,
collapsible:true,
draggable:true,
cls:'x-portlet'
});
Ext.reg('portlet', Ext.ux.Portlet);
sample.css
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
html, body {
font:normal 12px verdana;
margin:0;
padding:0;
border:0 none;
overflow:hidden;
height:100%;
}
.x-panel-body p {
margin:5px;
}
.settings {
background-image:url( ../shared/icons/fam/folder_wrench.png ) !important;
}
.nav {
background-image:url( ../shared/icons/fam/folder_go.png ) !important;
}
sample.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
// create some portlet tools using built in Ext tool ids
var tools = [{
id:'gear',
handler: function(){
Ext.Msg.alert('Message', 'The Settings tool was clicked.');
}
},{
id:'close',
handler: function(e, target, panel){
panel.ownerCt.remove(panel, true);
}
}];
var viewport = new Ext.Viewport({
layout:'border',
items:[{
region:'west',
id:'west-panel',
title:'West',
split:true,
width: 200,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'35 0 5 5',
cmargins:'35 5 5 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
html: Ext.example.shortBogusMarkup,
title:'Navigation',
autoScroll:true,
border:false,
iconCls:'nav'
},{
title:'Settings',
html: Ext.example.shortBogusMarkup,
border:false,
autoScroll:true,
iconCls:'settings'
}]
},{
xtype:'portal',
region:'center',
margins:'35 5 5 0',
items:[{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Grid in a Portlet',
layout:'fit',
tools: tools,
items: new SampleGrid([0, 2, 3])
},{
title: 'Another Panel 1',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px 0 10px 10px',
items:[{
title: 'Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 2',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
},{
columnWidth:.33,
style:'padding:10px',
items:[{
title: 'Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
},{
title: 'Another Panel 3',
tools: tools,
html: Ext.example.shortBogusMarkup
}]
}]
}]
});
});
sample-grid.js
/*
* Ext JS Library 2.0.2
* Copyright(c) 2006-2008, Ext JS, LLC.
* licensing＠extjs.com
*
* extjs.com/license
*/
SampleGrid = function(limitColumns){
function italic(value){
return '<i>' + value + '</i>';
}
function change(val){
if(val > 0){
return '<span style="color:green;">' + val + '</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '</span>';
}
return val;
}
function pctChange(val){
if(val > 0){
return '<span style="color:green;">' + val + '%</span>';
}else if(val < 0){
return '<span style="color:red;">' + val + '%</span>';
}
return val;
}
var columns = [
{id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company'},
{header: "Price", width: 75, sortable: true, renderer: Ext.util.Format.usMoney, dataIndex: 'price'},
{header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change'},
{header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange'},
{header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
];
// allow samples to limit columns
if(limitColumns){
var cs = [];
for(var i = 0, len = limitColumns.length; i < len; i++){
cs.push(columns[limitColumns[i]]);
}
columns = cs;
}
SampleGrid.superclass.constructor.call(this, {
store: new Ext.data.Store({
reader: 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'}
]),
data: [
['3m Co',71.72,0.02,0.03,'9/1 12:00am'],
['Alcoa Inc',29.01,0.42,1.47,'9/1 12:00am'],
['Altria Group Inc',83.81,0.28,0.34,'9/1 12:00am'],
['American Express Company',52.55,0.01,0.02,'9/1 12:00am'],
['American International Group, Inc.',64.13,0.31,0.49,'9/1 12:00am'],
['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
]
}),
columns: columns,
autoExpandColumn: 'company',
height:250,
width:600
});
}
Ext.extend(SampleGrid, Ext.grid.GridPanel);
- 要发表评论，请先登录
评论
主题:
它是一种伟大的机会，让我访问很长一段时间后，这种神奇的博客。我忙于在 70-236 exam 。这是要达到 N10-003 exam 证书我很希望在计算机的兴趣，通过了 70-648 exam 这是在IT领域最好的之一。
怎么不可以用
我就是按照这样的方法加上的怎么不可用