Created
December 14, 2011 21:23
-
-
Save ernestlv/1478602 to your computer and use it in GitHub Desktop.
EXTJS 3.4 Screen with Grid
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!doctype html> | |
<html> | |
<head> | |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> | |
<title>main screen</title> | |
<!-- ** CSS ** --> | |
<!-- base library --> | |
<link rel="stylesheet" type="text/css" href="/~903205/ext34/resources/css/ext-all.css" /> | |
<!-- ** Javascript ** --> | |
<!-- ExtJS library: base/adapter --> | |
<script type="text/javascript" src="/~903205/ext34/adapter/ext/ext-base.js"></script> | |
<!-- ExtJS library: all widgets --> | |
<script type="text/javascript" src="/~903205/ext34/ext-all-debug.js"></script> | |
<!-- page specific --> | |
</head> | |
<body> | |
<script type="text/javascript"> | |
var myData = [ | |
['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'] | |
]; | |
/** | |
* Custom function used for column renderer | |
* @param {Object} val | |
*/ | |
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; | |
} | |
/** | |
* Custom function used for column renderer | |
* @param {Object} 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; | |
} | |
// create the data store | |
var store = new Ext.data.ArrayStore({ | |
fields: [ | |
{name: 'company'}, | |
{name: 'price', type: 'float'}, | |
{name: 'change', type: 'float'}, | |
{name: 'pctChange', type: 'float'}, | |
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'} | |
] | |
}); | |
// manually load local data | |
store.loadData(myData); | |
// create the Grid | |
var grid = new Ext.grid.GridPanel({ | |
store: store, | |
columns: [ | |
{ | |
id :'company', | |
header : 'Company', | |
width : 160, | |
sortable : true, | |
dataIndex: 'company' | |
}, | |
{ | |
header : 'Price', | |
width : 75, | |
sortable : true, | |
renderer : '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' | |
} | |
], | |
stripeRows: true, | |
autoExpandColumn: 'company', | |
height: 250, | |
width: 600, | |
title: 'Modules', | |
// config options for stateful behavior | |
stateful: true, | |
stateId: 'grid' | |
}); | |
var viewPort = {}; | |
viewPort.tabs = [{},{}]; | |
viewPort.tabs[0].form = new Ext.FormPanel({ | |
labelWidth: 100, // label settings here cascade unless overridden | |
url:'save-form.php', | |
frame:true, | |
title: 'Properties', | |
bodyStyle:'padding:5px 5px 0', | |
autoScroll: true, | |
width: 450, | |
id:'myForm', | |
sni_linkMin: 3, | |
sni_linkMax: 7, | |
sni_linkCount: 3, | |
items: [{ | |
xtype:'fieldset', | |
title:'Title Image Link', | |
defaults: {anchor: '95%', height:30}, | |
defaultType: 'textfield', | |
items: [{ | |
fieldLabel: 'Title', | |
name: 'Title', | |
allowBlank:false | |
},{ | |
fieldLabel: 'Feature Image', | |
name: 'image' | |
},{ | |
fieldLabel: 'Link', | |
id: 'link1', | |
name: 'link1' | |
},{ | |
fieldLabel: 'Link', | |
id: 'link2', | |
name: 'link2' | |
},{ | |
fieldLabel: 'Link', | |
id: 'link3', | |
name: 'link3' | |
}] | |
}], | |
buttons: [{ | |
text: 'Add Link', | |
id: 'addLinkBtn', | |
handler:function(b, e){ | |
var form = Ext.getCmp('myForm'); | |
form.sni_linkCount++; | |
var x = form.items.get(0).add({fieldLabel:'Link', id:'link'+form.sni_linkCount, name:'link'+form.sni_linkCount}); | |
Ext.getCmp('delLinkBtn').enable(); | |
if ( form.sni_linkCount >= form.sni_linkMax ){ | |
b.disable(); | |
} | |
form.doLayout(); | |
} | |
},{ | |
text: 'Remove Link', | |
id: 'delLinkBtn', | |
disabled:true, | |
handler:function(b, e){ | |
var form = Ext.getCmp('myForm'), field; | |
if ( form.sni_linkCount > form.sni_linkMin ){ | |
form.sni_linkCount = form.sni_linkCount > form.sni_linkMax ? sni_linkMax : form.sni_linkCount; | |
field = Ext.getCmp('link'+form.sni_linkCount); | |
form.items.get(0).remove(field); | |
form.sni_linkCount--; | |
Ext.getCmp('addLinkBtn').enable(); | |
if ( form.sni_linkCount <= form.sni_linkMin ){ | |
b.disable(); | |
} | |
}else{ | |
b.disable(); | |
} | |
form.doLayout(); | |
} | |
},{ | |
text: 'Save' | |
},{ | |
text: 'Cancel' | |
}] | |
}); | |
viewPort.tabs[0].preview = { // sub tab 1.2 | |
title:'Preview', | |
html:'<iframe src="http://firefly-stg.scrippsnetworks.com/cr/cda/preview/module/1,,FOOD_2069378_24_yes,00.html?parentAssetType=&parentAssetEntityId=" width="100%" height="100%" frameBorder="0"></iframe>' | |
}; | |
viewPort.tabs[1].form = new Ext.FormPanel({ | |
labelWidth: 100, // label settings here cascade unless overridden | |
autoScroll: true, | |
url:'save-form.php', | |
frame:true, | |
title: 'Properties', | |
bodyStyle:'padding:5px 5px 0', | |
width: 450, | |
id:'myForm2', | |
sni_linkMin: 3, | |
sni_linkMax: 7, | |
sni_linkCount: 3, | |
items: [{ | |
xtype:'fieldset', | |
title:'Super Lead Events', | |
defaults: {anchor: '95%', height:30}, | |
defaultType: 'textfield', | |
collapsible: true, | |
items: [{ | |
fieldLabel: 'Headline', | |
name: 'Headline', | |
allowBlank:false | |
},{ | |
fieldLabel: 'Title', | |
name: 'title' | |
},{ | |
fieldLabel: 'Image', | |
name: 'image' | |
},{ | |
xtype: 'textarea', | |
anchor: '95%', | |
height: 70, | |
fieldLabel: 'Description', | |
name: 'description' | |
},{ | |
fieldLabel: 'Call To Action', | |
name: 'callToAction' | |
}] | |
},{ | |
xtype:'fieldset', | |
title:'Entry', | |
defaults: {anchor: '95%', height:30}, | |
defaultType: 'textfield', | |
collapsible: true, | |
collapsed: true, | |
items: [{ | |
fieldLabel: 'Headline', | |
name: 'Headline2', | |
allowBlank:false | |
},{ | |
fieldLabel: 'Title', | |
name: 'title2' | |
},{ | |
fieldLabel: 'Image', | |
name: 'image2' | |
},{ | |
xtype: 'textarea', | |
anchor: '95%', | |
height: 70, | |
fieldLabel: 'Description', | |
name: 'description2' | |
},{ | |
fieldLabel: 'Call To Action', | |
name: 'callToAction2' | |
}] | |
},{ | |
xtype:'fieldset', | |
title:'Entry', | |
defaults: {anchor: '95%', height:30}, | |
defaultType: 'textfield', | |
collapsible: true, | |
collapsed: true, | |
items: [{ | |
fieldLabel: 'Headline', | |
name: 'headline' | |
},{ | |
fieldLabel: 'Link', | |
id: 'linkB1', | |
name: 'linkB1' | |
},{ | |
fieldLabel: 'Link', | |
id: 'linkB2', | |
name: 'linkB2' | |
},{ | |
fieldLabel: 'Link', | |
id: 'linkB3', | |
name: 'linkB3' | |
}] | |
}], | |
buttons: [{ | |
text: 'Add Link', | |
id: 'addLinkBtn2', | |
handler:function(b, e){ | |
var form = Ext.getCmp('myForm2'); | |
form.sni_linkCount++; | |
form.items.get(2).expand(); | |
var x = form.items.get(2).add({fieldLabel:'Link', id:'linkB'+form.sni_linkCount, name:'linkB'+form.sni_linkCount}); | |
Ext.getCmp('delLinkBtn2').enable(); | |
if ( form.sni_linkCount >= form.sni_linkMax ){ | |
b.disable(); | |
} | |
form.doLayout(); | |
} | |
},{ | |
text: 'Remove Link', | |
id: 'delLinkBtn2', | |
disabled:true, | |
handler:function(b, e){ | |
var form = Ext.getCmp('myForm2'), field; | |
if ( form.sni_linkCount > form.sni_linkMin ){ | |
form.sni_linkCount = form.sni_linkCount > form.sni_linkMax ? sni_linkMax : form.sni_linkCount; | |
field = Ext.getCmp('linkB'+form.sni_linkCount); | |
form.items.get(2).expand(); | |
form.items.get(2).remove(field); | |
form.sni_linkCount--; | |
Ext.getCmp('addLinkBtn2').enable(); | |
if ( form.sni_linkCount <= form.sni_linkMin ){ | |
b.disable(); | |
} | |
}else{ | |
b.disable(); | |
} | |
form.doLayout(); | |
} | |
},{ | |
text: 'Save' | |
},{ | |
text: 'Cancel' | |
}] | |
}); | |
viewPort.tabs[1].preview = { | |
title:'Preview', | |
html:'<iframe src="http://firefly-stg.scrippsnetworks.com/cr/cda/preview/module/1,,FOOD_2069266_268481_yes,00.html?parentAssetType=&parentAssetEntityId=" width="100%" height="100%" frameBorder="0"></iframe>' | |
}; | |
viewPort.content = { | |
region:'center', | |
layout:'fit', | |
items:[{ | |
xtype:'tabpanel', | |
activeTab:0, | |
items:[{ // tab 1 | |
title:'Five Days of Dinner', | |
closable:true, | |
xtype:'tabpanel', | |
tabPosition:'bottom', | |
activeTab:0, | |
items:[viewPort.tabs[0].form,viewPort.tabs[0].preview] | |
},{ // tab 2 | |
title:'Food Network - Easy Recipes', | |
closable:true, | |
xtype:'tabpanel', | |
tabPosition:'bottom', | |
activeTab:0, | |
items:[viewPort.tabs[1].form,viewPort.tabs[1].preview] | |
},{ // tab 3 | |
title:'Hungry Girl', | |
closable:true | |
}] | |
}] | |
}; | |
viewPort.selection = { | |
region:'center', | |
layout:'accordion', | |
border:false, | |
items:[grid, | |
{ | |
title:'Sections', | |
html:'<p>Section List</p>' | |
}, | |
{ | |
title:'Shows', | |
html:'<p>Show List</p>' | |
}] | |
}; | |
viewPort.history = new Ext.grid.PropertyGrid({ | |
title: 'History', | |
source: { | |
"(name)": "Properties Grid", | |
"grouping": false, | |
"autoFitColumns": true, | |
"productionQuality": false, | |
"created": new Date(Date.parse('10/15/2006')), | |
"tested": false, | |
"version": 0.01, | |
"borderWidth": 1 | |
} | |
}); | |
viewPort.versions = { | |
region:'east', | |
width:250, | |
split:true, | |
layout:'fit', //display property list properly. | |
items:{ | |
xtype:'tabpanel', | |
tabPosition:'bottom', | |
activeTab:0, | |
border:false, | |
items:[viewPort.history,{ | |
title:'Schedule' | |
}] | |
} | |
}; | |
viewPort.dashboard = { | |
region:'south', | |
title:'Dashboard', | |
layout:'border', | |
height:300, | |
collapsible:true, | |
collapsed:true, | |
split:true, | |
items:[viewPort.selection,viewPort.versions] | |
}; | |
// Path to blank image point to a valid location on your server | |
Ext.BLANK_IMAGE_URL = '/~903205/ext34/resources/images/default/s.gif'; | |
Ext.onReady(function(){ | |
var starLoad = new Date(); | |
console.info('start main ...'); | |
var main = new Ext.Viewport({ | |
layout:'border', | |
items:[viewPort.content, viewPort.dashboard] | |
}); | |
console.info('end main. loading time: ' + (((new Date())-starLoad)/1000) + ' secs'); | |
}); //end onReady | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment