Ext小结3

Ext小结三

一、滚动条效果

Ext.onReady(function(){

     Ext.Msg.show({

              title:'wait',

              msg:'loading......',

              progress:true,

              closable:false,

              width:400

     });    

})

解析：

title代表显示的标题

              Msg代表显示的内容

              Progress 代表显示的是滚动条

              closalble代表显示的内容如滚动条不可关闭

              Width代表显示宽度

function fun(i,total){

     return function(){

              if (i==total) {

                       Ext.Msg.hide();

              } else {

                       Ext.Msg.updateProgress(i/total,i*100/total + "%");

              }

     }

}

解析：

              编写方法，逐渐改变滚动条的百分比，直至加载完毕后隐藏滚动条

              Ext.Msg.updateProgress(i/total,i*100/total + "%");

              第一个参数是滚动条位置的百分比

              第二个参数是滚动条上显示的文字

var total = 100;

for (var i = 1; i <= total; i++) {

     setTimeout(fun(i,total),i*100);

}

解析：每隔i*100 毫秒执行一次方法，改变一次滚动条状态

二、静态table实例

Ext.onReady(function(){

     var cm = new Ext.grid.ColumnModel([

              {header:'编号',dataIndex:'id',sortable:true},

              {header:'姓名',dataIndex:'name'},

              {header:'年龄',dataIndex:'age'}

     ]);

     //解析定义表格的列的信息，header为列名，dataIndex为列的标识，sortable代表能否排序

     var data = [

              ['1','aa','23'],

              ['2','bb','24'],

              ['3','cc','21'],

              ['4','dd','18'],

              ['5','ee','22']

     ];

     //解析定义数据，是一个数组中包含n多个数组

     var store = new Ext.data.Store({

              proxy:new Ext.data.MemoryProxy(data),

              reader:new Ext.data.ArrayReader({},[

                       {name:'id'},

                       {name:'name'},

                       {name:'age'}

              ])

     });

     //解析 定义store，用于规定数据的格式

     //proxy:new Ext.data.MemoryProxy(data)数据存储的代理

     /*reader:new Ext.data.ArrayReader({},[

                       {name:'id'},

                       {name:'name'},

                       {name:'age'}

              ]

              读取data数据并规定显示格式

              */

     var grid = new Ext.grid.GridPanel({

              renderTo:'grid',

              title:'student info',

              cm:cm,

              store:store,

              autoHeight:true

     });

     //定义表格

     //renderTo:'grid' grid是显示位置，可以是层名

     //cm：cm 是表格的列的定义 cm是列定义的名称

     //store：store 表示store的名称

     //autoHeight表示自动匹配大小

     store.load();

     //表示加载数据

})

三、动态table实例（带分页）

Js：

Ext.onReady(function(){

     var cm = new Ext.grid.ColumnModel([

              {header:'编号',dataIndex:'id',sortable:true},

              {header:'姓名',dataIndex:'name'},

              {header:'年龄',dataIndex:'age'}

     ]);

     //定义列的信息

     var store = new Ext.data.Store({

              proxy:new Ext.data.HttpProxy({url:'table.jsp'}),

              reader:new Ext.data.JsonReader(

                       {totalProperty:'count',root:'data'},

                       [

                                 {name:'id'},

                                 {name:'name'},

                                 {name:'age'}

                       ]

              )       

     });

     /*定义store信息

      * proxy:new Ext.data.HttpProxy({url:'table.jsp'})

      * 此代理可以调用jsp文件

      * reader:new Ext.data.JsonReader(

                       {totalProperty:'count',root:'data'},

                       [

                                 {name:'id'},

                                 {name:'name'},

                                 {name:'age'}

                       ]

              )       

              读取json数据totalProperty：后接的是总数据数对应在返回的json数据中的属性名

              root 后接的是实际数据对应返回的json数据的属性名

              第二个参数是数据显示对应的位置

      */

     var bbar = new Ext.PagingToolbar({

              pageSize:3,

              store:store,

              displayInfo:true,

              displayMsg:'当前显示 第{0}条 - 第{1}条 共{2}条',

              emptyMsg:'none'   

     });    

     /*

      * 定义分页对象

      *pageSize:3 每页显示的条数

      *store 代表store对象名

      *displayInfo:true 是否显示内容

      *displayMsg:'当前显示 第{0}条 - 第{1}条 共{2}条'

      *定义显示的相关信息

      *{0} 代表显示条数的起始条数

      *{1}代表显示条数的结束条数

      *{2}代表一共显示多少条

      *emptyMsg:'none'        

      *没有数据时显示的内容

      */

     var grid = new Ext.grid.GridPanel({

              renderTo:'grid',

              title:'student info',

              cm:cm,

              store:store,

              bbar:bbar,

              autoHeight:true

     });

     //定义表格

     //bbar:bbar 表示此表格对应的分页控件

     store.load({params:{start:0,limit:3}});

     //加载数据时添加参数,起始位和显示条数

})

 

后台jsp页面

         <%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>

 

<%

         int start =1;

         int limit = 3;

        

         String startstr = request.getParameter("start");

         String limitstr = request.getParameter("limit");

        

         if(startstr!=null && !"".equals(startstr) && !"0".equals(startstr)){

                   start = Integer.parseInt(startstr);

         }

        

         if(limitstr!=null && !"".equals(limitstr) && !"0".equals(limitstr)){

                   limit = Integer.parseInt(limitstr);

         }

        

         //jsp 中ext 会自动传来两个参数即显示的开始为和显示的条数

         //我们应根据传来的参数动态编辑传出的json数据

         StringBuffer json = new StringBuffer("{count:10,data:[");

         for(int i=start;i<start+limit && i<=10;i++){

                   json.append("{id:'"+i+"',name:'aa"+i+"',age:'"+(20+i)+"'},");

         }

         json.delete(json.length()-1,json.length());      

         json.append("]}");

         //json数据中count代表一共有多少条（count 名可以自定义）

         //data代表实际数据,是一个json数组

         out.print(json);

%>