index.js
HelloWindow
=
function
()
{
var win = this ;
var grid = new HelloGrid();
HelloWindow.superclass.constructor.call( this ,
{
title : 'Hello Window',
layout : 'fit',
width : 500 ,
height : 300 ,
closeAction : 'hide',
plain : true ,
items : [
{
xtype : 'tabpanel',
region : 'center',
activeTab : 0 ,
border : false ,
items : [ new Ext.Panel(
{
title : 'The first panel',
autoTabs : true ,
activeTab : 0 ,
deferredRender : false ,
border : false ,
html : 'the first panel'
} ), grid]
} ],
buttons : [
{
text : 'Submit',
disabled : true
} ,
{
text : 'Close',
handler : function ()
{
win.hide();
}
} ]
} );
}
Ext.extend(HelloWindow, Ext.Window,
{}
);
HelloBtn
=
function
()
{
HelloBtn.superclass.constructor.call( this ,
{
text : 'Hello Button'
,
} );
}
Ext.extend(HelloBtn, Ext.Button,
{}
);
HelloGrid
=
function
()
{
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']];
// example of custom renderer function
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;
}
// example of custom renderer function
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
this .store = new Ext.data.SimpleStore(
{
fields : [
{
name : 'company'
} ,
{
name : 'price',
type : ' float '
} ,
{
name : 'change',
type : ' float '
} ,
{
name : 'pctChange',
type : ' float '
} ,
{
name : 'lastChange',
type : 'date',
dateFormat : 'n / j h:ia'
} ]
} );
this .store.loadData(myData);
HelloGrid.superclass.constructor.call( this ,
{
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 : 350 ,
width : 600 ,
title : 'Hello Grid'
} );
}
Ext.extend(HelloGrid, Ext.grid.GridPanel,
{}
);
Ext.onReady(
function
()
{
var helloBtn = new HelloBtn();
helloBtn.render('helloBtn');
helloBtn.on('click', function (e)
{
win.show( this .getEl().dom);
} );
var helloGrid = new HelloGrid();
helloGrid.render('helloGrid');
helloGrid.on('rowdblclick', function (obj,rowIndex,e)
{
win.show(Ext.get(e.target).dom);
} );
var win = new HelloWindow();
}
);
index.html
<
html
>
<
head
>
<
title
>
index.html
</
title
>
<!--
ext
-->
<
script
type
="text/javascript"
src
="./ext2/js/ext-base.js"
></
script
>
<
script
type
="text/javascript"
src
="./ext2/js/ext-all-debug.js"
></
script
>
<
link
rel
="stylesheet"
type
="text/css"
href
="./ext2/css/ext-all.css"
/>
<
script
type
="text/javascript"
src
="javascript/index.js"
></
script
>
</
head
>
<
body
style
="padding:20px;"
>
<
div
id
="helloBtn"
></
div
><
br
>
<
div
id
="helloGrid"
></
div
>
</
body
>
</
html
>
代码下载:
/Files/hansdyj/example.rar