转自http://www.blogjava.net/hansdyj/articles/175660.html
单击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>
分享到:
相关推荐
ext2.0MessageBox,JS弹出窗口
而其它弹出 窗口(比如:JQuery,ExtJs,Mootools,还有其它弹出窗口等)CUP的占有率都在50%左右,最高60%以上。 窗口样式更改简便:组件采用的是QQ2009窗口的界面,虽说不上很漂亮,但也不算难看(本个界面设计...
我博文Ext下解决无弹出窗口的设计办法里的原文。
一个非常炫的js弹出窗口,可以到处拖动,和ext的效果一样。
EXT弹出框改装实现
关键字:故事图,时间轴控件,CSS弹出窗口,真棒字体,统计图图表(饼图/栏),图层切换器,控制栏,维基百科图层,图例控件,搜索,动画,撤消/重做机制 入门 NPM软件包 ol-ext作为ES6模块( )和纯js( )存在。 ...
从右下角动态弹出window,显示1分钟后自动隐藏,然后再弹出,类似MSN登录提醒。
ext.net gridpanel 弹出窗
EXT提交服务器的三种方式
七步实现directjngine、Ext Direct调用Java服务器端方法 directjngine官方demo精简版 与大家分享,有问题可到我博客留言。
Ext的环境搭建和最基本的一个操作——弹出对话框
一个 Firefox 扩展,不仅显示通知数量,还显示通知弹出窗口,并有一个弹出窗口,可以直接访问通知。 安装 这里有一个稳定的发布版本: 要从此存储库运行开发中版本,您需要使用 about:debugging 或web-ext工具。 ...
用ext开发的一款类似于flex树的插件,可拖曳,效果绚丽
紧接着对ExtJS的事件、核心组件、表格和表单等各种控件、树形结构、拖放、弹出窗口、布局、数据存储和传输、实用工具和扩展等进行了详细讲解,最后一个完整的EXT应用结束全书。每个知识点都配有相应的示例,可操作性...
NULL 博文链接:https://docs.iteye.com/blog/324687
修改过的Ext.MessageBox.prompt方法,可直接调用,对输入的文字加密,适合做密码验证框
VC调用LabView动态库所需要的.H头文件,extcode.h,fundtypes.h,platdefines.h
使用EXT.NET此第三方空间,开发网页程序,来调用本地摄像头进行拍照(使用Flash进行拍照),并把照片保存于服务器上。
WindowLite 基于EXT的可拖动改变大小的提示窗口 v2.0