>

加载遮罩,配置和表格控件使用第1

- 编辑:正版管家婆马报彩图 -

加载遮罩,配置和表格控件使用第1

前言

Load Mask(遮罩)效果,就是在页面还未有完全突显出来此前, 加上一个转装转的效用。

类似:

图片 1

丰裕那样的功能有八个低价:

  1. 在页面没完全show出来此前, 把前边的页面给遮罩起来, 防止举行部分地下的操作。

  2. 万一页面show出来的日子相比较长的话, 能够有时吸援引户的集中力(也正是增高 User Experience).

在Extjs 中, Ext js 的施用方法有八种。

您有希望会发觉怎么有些景况下load mask 不出现? 且听下边一一道来。。。

ExtJS是一套完整的传祺IA建设方案,也因为效果与利益一体化产生了ext-all.js有400多k,由于是遵照JS和CSS的成效完成,对客户端机器质量也会有早晚的渴求,即不协助IE6以下的版本。假若你的体系对网页响应时间有严俊的限量,或然顾客端操作系统过于陈旧,一定毫无选择ExtJS。
正文主要是介绍ExtJS的下载和配备以及部分简练的利用办法。近些日子最新版本为3.0,然则本文首要介绍2.2版本。
一、ExtJS下载以及安排
1、下载地址:www.extjs.com/(那是官方网址,大家能够挑选自身爱怜的本子下载)
2、配置进度,纵然下载后的目录为Ext,大家在该目录下创设大家温馨的目录MyExample(该目录用于寄存你和煦写的代码),配置进度如下:
(1) 新建一个页面文件Helloworld.html
(2) 在<head>和</head>之间增加如下代码:

JsonStore 加载时会自动抬高Load Mask

专心, 假使读的不是服务端数据,而是本地数据来讲, 是不会加mask的(本地数据相当的慢,的确是未曾须要加)。

就好像那样来定义store:

Ext.create('Ext.data.Store', {
     storeId:'simpsonsStore',
     fields:['name', 'email', 'phone'],
     data:{'items':[
         { 'name': 'Lisa',  "email":"[email protected]",  "phone":"555-111-1224"  },
         { 'name': 'Bart',  "email":"[email protected]",  "phone":"555-222-1234" },
         { 'name': 'Homer', "email":"[email protected]",  "phone":"555-222-1244"  },
         { 'name': 'Marge', "email":"[email protected]", "phone":"555-222-1254"  }
     ]},
     proxy: {
         type: 'memory',
         reader: {
             type: 'json',
             root: 'items'
         }
     }
 });

接下去,就交由多个服务端读取数据的例证。 这里运用的是jsp.

呈现多个Grid , store 从劳动器端读取,测验的公文有四个:

grid.html -- 定义grid 的文件

grid-data.jsp - 获得数据的文书

grid.html

Insert title here
<script type="text/javascript" src="../ext-all-debug.js"></script>

<script>
Ext.onReady(function(){

 var store = new Ext.data.JsonStore({
     storeId: 'simpsonsStore',
     proxy: {
         type: 'ajax',
         url: 'grid-data.jsp',
         reader: {
             type: 'json',
             root: 'users',
             idProperty: 'name'
         }
     },
     fields:['name', 'email', 'phone'],
 });
 Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: Ext.data.StoreManager.lookup('simpsonsStore'),
     columns: [
         { text: 'Name',  dataIndex: 'name' },
         { text: 'Email', dataIndex: 'email', flex: 1 },
         { text: 'Phone', dataIndex: 'phone' }
     ],
     height: 200,
     width: 400,
     renderTo: 'grid-div'
 });
 store.load();
});
</script>

grid-data.jsp

[email protected]',  'phone':'555-111-1224'}]}"; 
for(int i=0;i<10;i++)
{
 Thread.currentThread().sleep(1000);
}
out.write(data);
out.flush();
%>

此间为了延长期服用务端时间, 使用Thread 的方法停留了10秒。

表现的效应正是前言部分的贴图处境

复制代码 代码如下:

在pop Window 的页面中的Grid 不恐怕呈现mask

场景描述如下:

  1. 主页面是八个有多少个 tab 页的页面

  2. 在里头二个tab 页中有多个button, 点击后弹出多个dialog, 在那个弹出的dialog 中显得二个地点类似的grid.

并发的气象是: 弹出页面包车型大巴grid 不会有mask 的法力。

Main.html -- 定义五个tab 页的页面

popGrid.html -- 弹出的grid 页面

grid-data.jsp - 猎取数据的公文(和地方完全一致)

Main.html

Insert title here
<script type="text/javascript" src="../ext-all-debug.js"></script>


<script>
Ext.onReady(function(){

 Ext.create('Ext.tab.Panel', {
     width: 400,
     height: 400,
     renderTo: document.body,
     items: [{
         title: 'Foo',
         items:[{
          xtype:'button', 
          text: 'Pop Grid',
          handler:function(){
           showPopGridWindow();
          }
         }]
     }, {
         title: 'Bar',
         tabConfig: {
             title: 'Custom Title',
             tooltip: 'A button tooltip'
         }
     }]
 });

});

function showPopGridWindow()
{
 Ext.create('Ext.window.Window',{
  title:'Grid Window',
  height:400,
  width:400,
     constrain:true,
     modal: true,
        loader: {
            url: 'grid.html',
            contentType: 'html',
            autoLoad: true
            ,scripts: true           
        }
 }).show();
}

</script>

popGrid.html

Insert title here

<script>
Ext.onReady(function(){

 var store = new Ext.data.JsonStore({
     storeId: 'simpsonsStore',
     proxy: {
         type: 'ajax',
         url: 'grid-data.jsp',
         reader: {
             type: 'json',
             root: 'users',
             idProperty: 'name'
         }
     },
     fields:['name', 'email', 'phone'],
 });
 Ext.create('Ext.grid.Panel', {
     title: 'Simpsons',
     store: Ext.data.StoreManager.lookup('simpsonsStore'),
     columns: [
         { text: 'Name',  dataIndex: 'name' },
         { text: 'Email', dataIndex: 'email', flex: 1 },
         { text: 'Phone', dataIndex: 'phone' }
     ],
     height: 200,
     width: 400,
     renderTo: 'grid-div'
 });
 store.load();
});
</script>

表明几点:

  1. pop window 设置modal=true, 就能够油但是生遮罩效果。 后边的页面被遮罩了。

图片 2

  1. 上述的代码会意识pop window 中的grid 未有load mask 的意义。

并发这种地方包车型客车缘由是怎样?

把弹出的窗口拖动一下岗位,细心一点就能够发觉:

loadMask 已经出去了, 只是show 的档案的次序不对。看图

图片 3

load Mask show在pop window 的上边了。轻便想到 zindex 那几个事物了。

图片 4

图片 5

Debug 看一下 mask 的z-index 的值, 小于pop window的z-index 的值, 怪不得展现不出来。

自然有种主张是是或不是能够安装load mask 的zindex 的值吗? 的确 Ext.LoadMask 有 setZindex 这种艺术。

只是 1. setZindex 的措施是private 的 2. z-index 是动态算出来了, 设置有个别糟糕调节。

Ext js 提供了定制load Mask 的方法, 不要紧给grid 加多一个投机的load mask,.

修改上边的pop_grid.html 页面如下:

Insert title here

<script>
Ext.onReady(function(){

 var store = new Ext.data.JsonStore({
     storeId: 'simpsonsStore',
     proxy: {
         type: 'ajax',
         url: 'grid-data.jsp',
         reader: {
             type: 'json',
             root: 'users',
             idProperty: 'name'
         }
     },
     fields:['name', 'email', 'phone'],
 });
 Ext.create('Ext.container.Container',{
   height: 200,
   width: 400,
   renderTo: 'grid-div',
   items:[
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: Ext.data.StoreManager.lookup('simpsonsStore'),
        columns: [
            { text: 'Name',  dataIndex: 'name' },
            { text: 'Email', dataIndex: 'email', flex: 1 },
            { text: 'Phone', dataIndex: 'phone' }
        ],
        height: 200,
        width: 400,        
        listeners:{
         afterRender:function(){
          //Ext.getCmp("myGridMask").show();
         }
        }
     })
     ,{
        xtype: 'loadmask',
        id: 'myGridMask',
        indicator: true,
        target: this,
        autoShow:true     
     }
   ]
 });  
 store.load(function(){
  Ext.getCmp("myGridMask").hide();
 });
});
</script>

解法思路正是: 提前建设构造八个loadMask , 在store load 完结后逃匿起来。

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
Ext.MessageBox.alert('HelloWorld','Hello World');
})
</script>

其他

  1. Extjs 的 LoadMask 能够定制本人索要的load mask 样式

可以透过布置 cls, maskCls 的 Class 来设置load 的文字以及图等样式。

var myMask = new Ext.LoadMask(myPanel, {msg:"Please wait..."});
myMask.show();
  1. 在 Ext.ComponentLoader 这种组件中(比方tab 页中安顿loader 的不二秘诀), 能够通过布署loadMask 的安插来设置是不是出示load mask 以及显示怎么的loadMask(能够配备成boolean 型和Object 类型的值)

Load Mask(遮罩)效果,正是在页面还向来不完全展现出来从前, 加上三个转装转的效果。 类似: 增加那样的效果有多个实惠: 1. 在页面没...

(3) 这里注意<script></script>无法用</script>替代
(4) js的导入顺序并非转移
(3) 假诺弹出三个HelloWorld的对话框,则代表布置成功。
二、表格控件Grid的选用
EXT中的表格功用十三分庞大,包蕴排序、缓存、拖动、遮盖某一列、自动呈现行号、列汇总、单元格编辑等应用成效。大家第一介绍怎么样成立一个简短的Grid。
1、创制表格的列新闻:

复制代码 代码如下:

var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);

2、加多数码音讯:

复制代码 代码如下:

var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];

3、创制数量存款和储蓄对象:

复制代码 代码如下:

var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();//这些一定的非常重要

.
4、表格的列模型定义好了,原始数据和数码的调换也早已成功,剩下的只供给把它们装配在一同,我们的Grid就创办成功了。

复制代码 代码如下:

var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});

5、注意:Ext.grid.Grid的renderTo属性提醒EXT将表格渲染到怎么地点,所以,在HTML里应该有一个<div id='grid'></div>与之相应。
6、全部代码清单如下(已由此测量试验):

复制代码 代码如下:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Grid.aspx.cs" Inherits="Ext_example_Grid" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns="" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id'},
{header:'名称',dataIndex:'name'},
{header:'描述',dataIndex:'desn'}
]);
var data=[
['1','name1','desn1'],
['2','name1','desn1'],
['3','name1','desn1'],
['4','name1','desn1'],
['5','name1','desn1']
];
var ds=new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'}
])
});
ds.load();
var grid=new Ext.grid.GridPanel({
renderTo:"grid",
store: ds,
height:600,
cm:cm
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid">
</div>
</form>
</body>
</html>

实践效果图如图1所示
图片 6
图1 二个简约的Grid
三、表格控件Grid的功力详解 第二某个回顾介绍了怎么着创立轻便的Grid,本章将对Grid的效应进行详细的深入分析。
3.1 部分属性功用
1、暗中同意景况下,Grid是能够拖放列,也得以退换列的增长幅度,借使要禁止使用那三个效果与利益,在概念Grid对象时分别设置enableColumnMove和enableColumnResize为false就能够。
2、假若愿意展现斑马线效果,能够加上stripeRows:true
3、Grid还支持一种读取数据时的遮罩和提醒成效,设置属性loadMask:true,在store.load()完成在此以前一贯会来得"Loading…"
3.2 自己作主决定每列的大幅
1、假使要定义宽度,只要设置该列的width属性就能够,如上边包车型地铁代码所示。效果图如图2所示。

复制代码 代码如下:

var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{header:'描述',dataIndex:'desn',width:200}
]);

图片 7
图2 自定义每列的增加率
2、那样需求本身去总计每列的幅度,如若想让每列自动填满Grid,只必要viewConfig中的forceFit就可以。使用forceFit后,Grid会依据你在cm里安装的width按百分比分配,特别智能。实现代码如下:

复制代码 代码如下:

var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
viewConfig:{
forceFit:true
}
});

3、我们也得以思量autoExpandColumn,它能够让钦赐列的大幅度自动伸展,进而填充整个表格。代码如下

复制代码 代码如下:

var grid=new Ext.grid.GridPanel({
renderTo:"grid",
stripeRows:true,//斑马线效果
loadMask:true,
store: ds,
height:600,
cm:cm,
autoExpandColumn:'desn'
// viewConfig:{
// forceFit:true
// }
});

小心:autoExpandColum只可以钦命一列的id,注意,必得是id,原本大家设置的cm里面都未有id,今后为了选择autoExpandColumn,要给cm的desn设置id.于是在渲染时desn就足以自动延长,不然会出错。

复制代码 代码如下:

var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);

3.3 让Grid帮忙按列排序
在EXT中得以很有益于地促成排序作用,只需求在定义列模型时增添sortable属性,如上面代码所示:

复制代码 代码如下:

var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200}
]);

功效图如图3所示
图片 8
图3 按列排序效果
3.4 展现时间档期的顺序数据
尽管再次回到的JSON里都以数字和字符串,可是在EXT中大家同样能够从后台获得日期类型的数额,然后交到Grid进行格式化。
1、首先定义一组数据,在这之中最终一列是日期格式的数目。

复制代码 代码如下:

var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];

2、接着大家在reader里面扩展一行配置,除了设置name以外,还安装了type和dateFormat三个天性。代码如下:

复制代码 代码如下:

var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});

3、一样的,我们还亟需在cm里面扩张一行配置:

复制代码 代码如下:

var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

4、代码详细新闻如下所示,效果图如图4所示。

复制代码 代码如下:

<html xmlns="" >
<head id="Head1" runat="server">
<title>Grid </title>
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" href="resources/css/ext-all.css" />
<script type="text/javascript" src="../adapter/ext/ext-base.js" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all.js" src="ext-all.js"></script>
<script type="text/javascript"><!--
Ext.onReady(function(){
var cm=new Ext.grid.ColumnModel([
{header:'编号',dataIndex:'id',width:60,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);
var data=[
['1','name1','desn1','2009-09-17T02:58:04'],
['2','name2','desn1','2009-09-17T02:58:04'],
['3','name3','desn1','2009-09-17T02:58:04'],
['4','name4','desn1','2009-09-17T02:58:04'],
['5','name5','desn1','2009-09-17T02:58:04']
];
var store1= new Ext.data.Store({
proxy:new Ext.data.MemoryProxy(data),
reader:new Ext.data.ArrayReader({},[
{name:'id'},
{name:'name'},
{name:'desn'},
{name:'date',type:'date',dateFormat:'Y-m-dTH:i:s'}
])
});
store1.load();
var grid1=new Ext.grid.GridPanel({
renderTo:"grid1",
stripeRows:true,//斑马线效果
loadMask:true,
store: store1,
height:200,
cm:cm,
viewConfig:{
forceFit:true
}
});
});
// --></script>
</head>
<body>
<form id="form1" runat="server">
<div id="grid1">
</div>
</form>
</body>
</html>

图片 9
图4 具不常间数额的Grid
3.5 自动显示行号和复选框
其实,行号和复选框都以renderer的延伸。当然,复选框的作用要复杂得多。
1、自动展现行号:修改列模型cm,参与RowNumberer对象;
2、复选框:大家创造八个CheckboxSelectionModel()
3、详细代码如下,效果图如图5所示

复制代码 代码如下:

var sm=new Ext.grid.CheckboxSelectionModel();
var cm=new Ext.grid.ColumnModel([
new Ext.grid.RowNumberer(),
sm,
{header:'编号',dataIndex:'id',width:40,sortable:true},
{header:'名称',dataIndex:'name',width:180},
{id:'desn',header:'描述',dataIndex:'desn',width:200},
{header:'时间',dataIndex:'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年m月d日')}
]);

图片 10
图5 自动行号以及复选框效果图

12下一页读书全文

你大概感兴趣的篇章:

  • Android自定义DataGridView数据表格控件
  • 在web中js达成类似excel的报表控件
  • 最佳的Angular2表格控件
  • ASP.NET Table 表格控件的施用办法
  • 左侧是表头的JS表格控件(自写,网络没有的)
  • Android自定义表格控件满意大家对视觉的须要
  • jquery miniui 教程 表格控件 合併单元格应用
  • JQuery FlexiGrid的asp.net完美应用方案dotNetFlexGrid-.Net原生的异步表格控件
  • javascript表格控件:Chgrid,简化型
  • 详解能在三种前端框架下使用的表格控件

本文由web前端发布,转载请注明来源:加载遮罩,配置和表格控件使用第1