|
|
Posted on 2008-01-16 13:02 Hans Ding 阅读(5482) 评论(2) 编辑 收藏 所属分类: Ext
单击Button弹出和双击Grid弹出,获取动画焦点的方式不同
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 -----------------------------------------------------------------
编程就像是做菜,那是一门艺术,别搞得像是为了活下去
评论
# re: Ext弹出窗口动画的几种调用方式[未登录] 回复 更多评论
2009-11-28 12:25 by
程序有问题！不能运行
# re: Ext弹出窗口动画的几种调用方式 回复 更多评论
2012-05-18 16:45 by
@yy
index.js中 text : 'Hello Button'后面多个逗号去掉就好了。
|