html代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<script type="text/javascript" src="js/ext-base.js"></script>
<script type="text/javascript" src="js/ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var myDiv = Ext.get("myDiv");
//高亮显示,然后渐退
//myDiv.highlight();
myDiv.addClass("red");
//使层居中(上下左右都居中)
//myDiv.center();
myDiv.setOpacity(.25);
//Ext.select('p').highlight();
Ext.get("myButton").on("click",function(){
alert("You click the button!");
});
/*
//使用匿名函数
Ext.select("p").on("click",function(){
alert("You click the p");
});
//使用有名字的函数,有利于代码重用。
var paragraphclicked = function(){
alert("You click the paragraph");
}
Ext.select("p").on("click",paragraphclicked);*/
//得到事件响应所在的DOM节点
var paraClicked = function(e){
//Ext.get(e.target).highlight();
var paragraph = Ext.get(e.target);
paragraph.highlight();
Ext.Msg.show({
title:'paragraph clicked',
msg:paragraph.dom.innerHTML,
width:400,
//buttons设置:Ext.Msg.OK,Ext.Msg.OKCANCEL,Ext.Msg.CAMCEL,Ext.Msg.YESNO,Ext.Msg.YESNOCANCEL
buttons:Ext.Msg.OK,
//对话框弹出和关闭时的动画效果。
animEl:paragraph,
//关闭对话框后执行的函数
fn:okalert,
//icon:弹出框内容前面的图标,取值为Ext.MessageBox.INFO,Ext.MessageBox.ERROR,Ext.MessageBox.WARNING,Ext.MessageBox.QUESTION
icon:Ext.MessageBox.INFO,
multiline:true
});
}
Ext.select("p").on("click",paraClicked);
});
function okalert(){
alert("关闭对话框后显示!");
}
Ext.onReady(function(){
var myData = [
['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
var ds = new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(myData),
reader:new Ext.data.ArrayReader({id:0},[
{name:'company'},
{name:'price',type:'float'},
{name:'change',type:'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
])
});
ds.load();
var colModel= new Ext.grid.ColumnModel([
{header:"company",width:120,sortable:true,dataIndex:"company"},
{header: "Price", width: 90, sortable: true, dataIndex: 'price'},
{header: "Change", width: 90, sortable: true, dataIndex: 'change'},
{header: "% Change", width: 90, sortable: true, dataIndex: 'pctChange'},
{header: "Last Updated", width: 120, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
/*
//grid没有这个构造方法
var grid1 = new Ext.grid.Grid('grid-example', {ds: ds, cm: colModel});
grid1.render();
grid1.getSelectionModel().selectFirstRow();*/
var grid = new Ext.grid.GridPanel({
//当grid初始显示在el:Ext.getBody()时,renderTo无效;当el设为某个控件时,renderTo正常;当el不设置时,renderTo显示出来的内容应用了myDiv的样式。
//el:Ext.getBody(),
el:'gridDiv',
//renderTo:指出grid构造出来之后要在哪里呈现,
//renderTo: "myDiv",
width:514,
height:160,
ds: ds,
//间隔行
stripeRows: true,
title: 'Array Grid',
cm: colModel
});
grid.render();
});
</script>
<style type="text/css">
<!--
.red{
color:#FF0000;
}
#myDiv{
width:500px;
}
#gridDiv{
position:relative;
left:100px;
}
-->
</style>
</head>
<body>
<div id="myDiv">sdfsdf
</div>
<p>aaaaaaaaaaaaaaaaa</p>
<p>bbbbbbbbbbbbbbbbbb</p>
<input type="button" id="myButton" value="Click Me" />
<div id="gridDiv"> </div>
</body>
</html>
效果:
见附件。![效果图](http://dl.iteye.com/upload/attachment/251200/ad4c8db2-c8f8-343b-a52d-8a8ab2963853.bmp)
![点击查看原始大小图片](http://dl2.iteye.com/upload/attachment/0025/1200/ad4c8db2-c8f8-343b-a52d-8a8ab2963853-thumb.bmp)
- 大小: 9.6 KB
分享到:
相关推荐
ext中的各种消息框,提示框,输入框,确认框,自定义消息框,进度条,以及滑动提示。
博文链接:https://vincent-yy.iteye.com/blog/233744
MessageBox MessageBox MessageBox MessageBox
Ext.MessageBox.confirm()详解 显示一个确认对话框,用来代替JavaScript标准的confirm()方法,具有两个按钮“是”和“否”如果为其提供一个回调函数,则该函数将在单击按钮后被调用(包括右上角的...
NULL 博文链接:https://ch-dj.iteye.com/blog/1946952
注意:1 ,Ext.MessageBox是一个工具类,继承自object对象 2 ,实质上它只是当前页面的一个层。 案例如下: 代码如下: Ext.onReady(function(){ Ext.MessageBox.alert(“提示”,”请单击我,确定”,callBack);...
代码如下: Ext.onReady(function() { Ext.Msg.alert(‘提示’, ‘逗号分隔参数列表’); //这种方式非常常见的 ...接下来认识一下Ext.MessageBox Ext.MessageBox是一个工具类,他继承自Obiect对象,用来生成各种
把表单和输入控件都改成ext的样式。 4.1. 不用ext的form啊,不怕错过有趣的东西吗? 4.2. 慢慢来,先建一个form再说 4.3. 胡乱扫一下输入控件 4.4. 起点高撒,从comboBox往上蹦 4.4.1. 凭空变出个comboBox来。 4.4.2...
改变Messagebox按钮的文字[改变Messagebox按钮的文字]-精品源代码
今天在项目中要用到简单的MessageBox的使用。在Ext.net中没有Winform那么简单,直接写MessageBox.show()的方法。于是就去examples.ext.net的例子网站找,想找到个实际能用的
EXT组件一些属性与方法(MessageBox)[文].pdf
《C# wpf 实现自定义界面操作分离的MessageBox》中我们得到了一个功能完整的MessageBox的功能逻辑,将功能逻辑进行拓展,程序启动的时候,hook系统的MessageBox,变成调用自己的MessageBox。那我们只需要定义一个...
C#重写MessageBox对话框C#重写MessageBox对话框C#重写MessageBox对话框C#重写MessageBox对话框C#重写MessageBox对话框C#重写MessageBox对话框C#重写MessageBox对话框
C# messagebox样式觉得不好看的,可以参考,如何实现自制messagebox
Winform MessageBox 自定义设计样式,根据自己需要更改样式
messagebox界面不美观,仿照messagebox做的,功能和messagebox基本相同,不过这个消息框可以显示图片,界面要美观
使系统的MessageBox显示位置可以改变
ExtJS中窗口是由Ext.Window类定义,该类继承自Panel,因此窗口其实是一种特殊的面板Panel。窗口包含了浮动、可拖动、可关闭、最大化、最小化等特性。
Delphi中MessageBox用法 消息框是个很常用的控件,属性比较多,本文列出了它的一些常用方法,及指出了它的一些应用场合。 1.最简单用法,不带图形 MessageBox(0,'不同意','提示',MB_OK); MessageBox(0,'不同意','...