Skip to content

Instantly share code, notes, and snippets.

@ernestlv

ernestlv/gist:1478602

Created December 14, 2011 21:23
Show Gist options
  • Save ernestlv/1478602 to your computer and use it in GitHub Desktop.
Save ernestlv/1478602 to your computer and use it in GitHub Desktop.
Download ZIP
EXTJS 3.4 Screen with Grid
Raw
gistfile1.txt
<!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