ext使用学习2

最新推荐文章于 2021-11-18 11:24:29 发布

chenlaoyang

最新推荐文章于 2021-11-18 11:24:29 发布

阅读量386

点赞数

本文链接：https://blog.csdn.net/chenlaoyang/article/details/8199807

版权

响应事件

如何响应某个动作或事件来执行你希望做的事情，做法是，先分配一个function，再定义一个event handler事件处理器来响应

Ext.onReady(function() {

Ext.get('myButton').on('click', function(){

alert("You clicked the button");

});

这个例子中，事件处理的function是简单几句，没有函数的名称，这种类型函数称为“匿名函数（anonymous function）”，即是没有名的的函数。你也可以分配一个有名字的event handler,这对于代码的重用或多个事件很有用

Ext.onReady(function() {

var paragraphClicked = function() {

alert("You clicked a paragraph");

}

Ext.select('p').on('click', paragraphClicked);

});

Ext.onReady(function() {

var paragraphClicked = function(e) {

Ext.get(e.target).highlight();

}

Ext.select('p').on('click', paragraphClicked);

});

注意得到的e.target是DOM节点，所以我们首先将其转换成为EXT的Elemnet元素，然后执行欲完成的事件，这个例子中，我们看见段落是高亮显示的。

MessageBox

比起略为沉闷的“HelloWolrd”消息窗口，我们做少许变化，前面我们写的代码是，单击某个段落便会高亮显示，现在是单击段落，在消息窗口中显示段落内容出来。

在上面的paragraphClicked的function中，将这行代码：

Ext.get(e.target).highlight();

替换为：

var paragraph = Ext.get(e.target);

paragraph.highlight();

Ext.MessageBox.show({

title: 'Paragraph Clicked',

msg: paragraph.dom.innerHTML,

width:400,

buttons: Ext.MessageBox.OK,

animEl: paragraph

});

Grid

Grid是Ext中人们最想先睹为快的和最为流行Widgets之一。好，让我们看看怎么轻松地创建一个Grid并运行。用下列代码替换ExtStart.js中全部语句：

 
   <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
 <%@ page pageEncoding="UTF-8"%>  
 <html>  
     <body>  
         <script type="text/javascript">  
         //页面加载完前执行  
         Ext.onReady(function()  
                 {  
                     //根据元素id获得页面元素  
                     var page = Ext.get("Page");  
                       
                     //定义json类型对象  
                     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']  
                     ];  
           
                     //创建 data store  
                     var ds = new Ext.data.ArrayStore({  
                         //fields可以与具体列绑定,并且定义类型以及格式  
                         fields: [  
                            {name: 'company'},  
                            {name: 'price', type: 'float'},  
                            {name: 'change', type: 'float'},  
                            {name: 'pctChange', type: 'float'},  
                            {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}  
                         ]  
                     });  
                       
                     //data store开始加载,当然也可以在grid渲染后加载，具体体现在出现loading条  
                     ds.loadData(myData);  
                       
                     //创建列模型,具体显示列头名称,列样式,能否排序(默认是页面排序,后面有讲到后台排序),dataIndex用来绑定data store具体数据  
                     var columnModel = 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, dataIndex: 'lastChange', renderer: Ext.util.Format.dateRenderer('m/d/Y')}  
                     ]);   
                     //创建grid对象并且绑定到Page的div层上(众多属性参看api)  
                     var grid = new Ext.grid.GridPanel({renderTo : "Page",height : 300, store  : ds, cm: columnModel});  
                       
                     //grid.getSelectionModel().selectFirstRow();              
                 });  
                   
   
     </script>  
         <div id="Page"></div>  
     </body>  
 </html>  
 
 