`
bdql
  • 浏览: 49902 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

ExtJs总结(一)

阅读更多

问题:使用Grid时,如果出现列标题与复选框错位

使用定义样式

.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
.ext-ie8 .x-menu-item-icon,
.ext-ie7 .x-menu-item-icon,
.ext-ie6 .x-menu-item-icon {left: -24px;}
解决

 

 

使用grid的遮罩提示时,一定要设表格的height和width。


enableColumnMove和enableColumnResize为false表示禁用拖放列和改变列宽度功能。
默认情况下一次可以选一行或多行。


stripeRows:true显示为斑马线。

问题:自主决定每列的宽度
1.手动指定
cm(columnmudule)支持给每列设置宽度,如果不指定则默认的宽度为100px.

var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度},....});

 

2.自动填充
var gird=new Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
viewConfig:{forceFit:true}});

会按照设置的宽度之间的比例进行显示,而不是按照设置的宽度。

 

3.指定自动填充剩余空间的列
也可以指定一列来完成该操作,但该操作要求该列必须定义时指定id值。
var cm=new Ext.grid.columnModel({
{header:'列头',dataIndex:'数据源索',width:宽度,id:'id标识属性'},....});

接下来设定
Ext.grid.GridPanel({
renderTo:'grid',
store:store,
cm:cm,
autoExpandColumn:'id列标识'});


问题:让列支持排序
在建立列模型时指定storable:true

 

问题:中文排序
1.为Ext.data.Store设置一个storeInfo:{field:'列名',direction:'ASC|DESC'}属性。


2.重写Ext.data.Store的applySort函数
Ext.data.Store.prototype.applySort = function() {
    if (this.sortInfo && !this.remoteSort) {
        var s = this.sortInfo, f = s.field;
        var st = this.fields.get(f).sortType;
        var fn = function(r1, r2) {
            var v1 = st(r1.data[f]), v2 = st(r2.data[f]);
            if (typeof(v1) == "string") {
                return v1.localeCompare(v2);
            }
            return v1 > v2 ? 1 : (v1 < v2 ? -1 : 0);
        };
        this.data.sort(s.direction, fn);
        if(this.snapshot && this.snapshot != this.data) {
            this.snapshot.sort(s.direction, fn);
        }
    }
};

该函数可以加在ext-all.js文件的未尾。或者放在html页面的最上面,保证在EXT初始化之后,实际代码调用之前执行。

 

问题:显示日期类型数据列
1.在store的reader属性中增加type和dataFormat两个属性
{name: 'date',type:'date',dateFormat:'Y-j-n H:i:s'}
注意格式化字符串必须要与实际日期的内容相对应。
如日期为2009-5-2 12:30:58 则格式化字符串为'Y-j-n H:i:s'
如日期为2009-05-02 12:30:58 则格式化字符串为'Y-m-d H:i:s'
详细字符串的含义见ext api doc之Date类
以保证能够读取到正确的日期值。

 

2.在ColumnModel中新加配置
{header: '日期',dataIndex: 'date',type:'date',renderer:Ext.util.Format.dateRenderer('Y年j月n日')}
其中renderer的格式字符串表示显示的格式是什么。

 

问题:如何在单元格时显示红色的字或图片,按钮等
在ColumnModule的相应列的属性中添加renderer:渲染函数
如:
var cm=new Ext.grid.ColumnModel([
{head:'列头',dataIndex:'数据源索',renderer:渲染函数}]);
渲染函数:
function 函数名(value){
 if(value==值){
  return html+css代码;
 }
 else
 {
  return 其它的html+css;
 }


}

 

问题:如何设置表格的表头右键提示为汉字内容

Ext.grid.GridPanel可以看作控制器,Ext.data.Store可以看作模型,Ext.grid.GridView可以看作视图.在构建Ext.grid.GridPanel实例时添加viewConfig属性
var gid=new Ext.grid.GridPanel(
 {renderTo:'grid',
  store:store,
  cm:cm,
  viewConfig:{
  columnsText:'显示的列',
  scrollOffset:30,
  sortAscText:'升序',
  sortDescText:'降序'
  //forceFit:true
 }
 });

 

 问题:用grid实现分页显示
1.为Grid添加分页工具条
在GridPanel中进行设置

                                var grid = new Ext.grid.GridPanel({
                                    renderTo: 'grid',
                                    autoHeight: true,
                                    store: store,
                                    cm: cm,
                                    bbar: new Ext.PagingToolbar({
                                        pageSize:3,
                                        store: store,
                                        displayInfo: true,
                                        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条',
                                        emptyMsg: "没有记录"
                                    })
                                });
                                store.load();

在使用分页工具条之后,store.load()必须发生在构造GridPanel之后.而且数据源不能使用Ext.data.SimpleStore.Grid每次都会显示数据源中所有的数据.因此数据一定要先在后台分好.

 

 

如果要在Grid的头部显示分页工具条,可以将bbar改为tbar。

 

2.后台分页

后台jsp的做法:

 

①取得开始页号与页大小

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

 

②访问数据库取得数据

 

③将数据输出为json字符串

格式为:{totalProperty:总记录数,root:[{.....},{.....},....]),其中root数组存放当前页的数据.

 

前台页面的做法:

①修改Store

 var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:jsp的url'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ])
    }); 

②向服务器传参

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

 Grid每次都会显示全部在root中的数据,而不论totalProperty的值是多少,所以分页时root数组中的数据由后台jsp控制。

 

 

3.前台分页
EXT中的Grid是把得到的数据一次性显示在表格里,并没有直接为我们提供内存分页的功能,但是在Ext的examples/locale/PapingMemoryProxy.js,它可以从本地数据读取数据同,并实现内存分页。
步骤如下:
①将PagingMemoryProxy.js导入html
②把以前的MemroryProxy换成PagingMemoryProxy
③调用store.load({params:{start:0,limit:3}});显示最开始的3条记录。

 

 4.后台排序

在默认的情况下,Grid只能对当前页的数据进行排序,如果对所有的数据排序,则需要将排序信息提交到后台,由后台将信息组装到SQL里,然后再由后台将处理好的数据返回给前台。
    var store = new Ext.data.Store({
        proxy: new Ext.data.HttpProxy({url:'09_01.jsp'}),
        reader: new Ext.data.JsonReader({
            totalProperty: 'totalProperty',
            root: 'root'
        }, [
            {name: 'id'},
            {name: 'name'},
            {name: 'descn'}
        ]),
        remoteSort: true
    });
其中remoteSort: true表示允许后台排序,这样在排序时就会有变化,不会立即显示出排序的结果,而是向后台提交两个参数,分别是sort和dir,表示要排序的字段与升序或降序。

jsp则进行相应的处理
String start = request.getParameter("start");
String limit = request.getParameter("limit");

String sort = request.getParameter("sort");
String dir = request.getParameter("dir");
再进行数据库分页,并返回json格式的分页数据。

分享到:
评论

相关推荐

    extjs 总结

    EXTJS 是一种基于 JavaScript 的前端框架,主要用于构建富客户端应用程序。它提供了一套完整的组件库,包括用于创建各种用户界面元素的类,如表格、窗口、菜单、表单等。在EXTJS中,TreePanel是用于展示树形数据结构...

    EXTJS Grid总结例子

    EXTJS Grid是一款强大的数据展示组件,广泛应用于Web应用开发中,尤其在数据密集型界面设计时,EXTJS Grid以其高效的数据加载、灵活的分页、排序、过滤和自定义功能而受到开发者青睐。本总结例子将深入探讨EXTJS ...

    extjs总结.pdf

    EXTJS 是一个强大的 JavaScript 框架,主要用于构建富客户端的 Web 应用程序。它的核心特性包括可扩展的组件模型、丰富的用户界面和数据绑定机制。EXTJS 提供了大量的预定义组件,如表格、表单、面板、菜单等,这些...

    extjs总结.docx

    EXTJS 是一种基于 JavaScript 的富客户端框架,常用于构建企业级的 Web 应用程序。在EXTJS中,我们可以利用其强大的组件模型和数据绑定机制,构建复杂的用户界面。以下是一些EXTJS的关键知识点: 1. **配置对象**:...

    EXTJS开发总结.pdf

    EXTJS是一种专为Rich Internet Applications (RIA)设计的前端JavaScript框架,它的主要定位与Prototype、jQuery等轻量级库截然不同。EXTJS注重客户端的复杂应用开发,提供了丰富的组件和功能,使得开发者能够构建出...

    extjs 总结,可以方便大家开发

    ExtJS 是一个强大的JavaScript库,专门用于构建富客户端的前端应用程序。它提供了一整套组件,包括表格、面板、窗口、树形控件等,帮助开发者构建交互式、响应式的Web应用。以下是对标题和描述中提到的知识点的详细...

    extjs总结资源文件

    EXTJS 是一个流行的JavaScript库,用于构建富客户端的Web应用程序。它提供了丰富的组件库,包括网格、表单、工具栏、菜单等,使得开发者能够创建功能强大的交互式用户界面。以下是对EXTJS资源文件中涉及的菜单和工具...

    经验总结-Extjs(一)数据交互设计

    标题中的“经验总结-Extjs(一)数据交互设计”表明了本文主要关注的是ExtJS框架在实现数据交互方面的设计和实践经验。ExtJS是一个流行的JavaScript库,用于构建富客户端Web应用,尤其以其强大的数据管理、组件化和...

    Extjs学习—总结的extjs的一些常用小知识点

    ### Extjs 学习——总结的一些常用知识点 #### 一、概述 Extjs 是一个用于构建 Web 应用程序的强大框架,它提供了大量的 UI 组件和功能,可以帮助开发者快速搭建出高质量的应用界面。本文将根据一个月的学习经验,...

    ExtJS教程_完整版

    ExtJS是一个基于JavaScript的开源前端框架,它提供了丰富的用户界面组件和数据处理机制,能够创建具有桌面应用程序般体验的Web应用。 ### ExtJS的基本功能和优势 ExtJS支持跨浏览器的控件,这意味着开发者不需要为...

    extJs 2.1学习笔记

    20. extJs 2.0学习笔记(Ext.Panel篇一) 48 21. extJs 2.0学习笔记(Ext.Panel篇二) 50 22. extJs 2.0学习笔记(Ext.Panel篇三) 59 23. extJs 2.0学习笔记(Ext.Panel篇四) 62 24. extJs 2.0学习笔记(组件总论篇) 66 25....

    EXTJS实例 EXTJS树,可以编辑的EXTJS,EXTJS3.0

    总结来说,EXTJS3.0的树形组件提供了一种直观且可编辑的方式来展示层次结构数据,其丰富的API和编辑功能使得开发者能构建出高度交互和定制化的应用程序。通过深入学习和实践EXTJS实例,我们可以更好地掌握这一强大的...

    EXTJS总结.txt

    一、获取元素(Getting Elements) 1.Ext.get var el = Ext.get('myElementId');//获取元素,等同于document.getElementById('myElementId');//会缓存 2. Ext.fly var el = Ext.fly('myElementId')//不需要缓存...

    extjs4.2 desktop 拓展

    总结来说,ExtJS 4.2 Desktop 拓展是一个集成了多种桌面特性并优化了基础框架的解决方案,它提供了图标换行、窗口拖动、多级开始菜单等功能,使得开发复杂的Web应用变得更加简单和直观。通过下载提供的LinBDesk4.2...

    ExtJS3总结内容

    ### ExtJS3总结内容:深入理解xtype与vtype #### 概述 在ExtJS3框架中,`xtype`与`vtype`是两个关键的概念,它们分别用于组件类型的标识和表单验证规则的定义。本文将详细介绍`xtype`的使用,以及其在ExtJS3组件...

    ExtJs-3.2.0.rar

    总结,"ExtJs-3.2.0.rar"压缩包为开发者提供了全面的ExtJS 3.2.0资源,包括核心库、样式表、文档和示例,便于开发者构建高效、功能丰富的Web应用。通过深入理解和实践,开发者可以充分利用其组件化、MVC架构和强大的...

    Extjs6示例中文版

    由于中文学习资源较少,作者决定翻译一本名为《ExtJS6 By Example》的英文书籍,并在此基础上加入自己的理解和见解,以帮助更多开发者更好地理解和掌握ExtJS6。 #### 2. 为什么选择ExtJS - **跨浏览器支持**:使用...

    ExtJS2.0教程.chm +Extjs2.2.1压缩包

    总结来说,这个压缩包提供了一个全面的起点,用于学习和实践ExtJS 2.0。通过教程和API文档,开发者可以掌握创建复杂的Web应用程序所需的技能,而实际的库文件则允许他们在项目中直接使用ExtJS的功能。同时,变更日志...

    ExtJS介绍及应用举例

    总结来说,这个压缩包提供了一个全面的学习资源,涵盖了从理论到实践的所有方面,适合初学者入门和经验丰富的开发者参考。通过阅读和研究这些内容,你可以了解到ExtJS如何帮助你构建高性能、响应式的Web应用,同时...

Global site tag (gtag.js) - Google Analytics