`
zht1933
  • 浏览: 223065 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

ExtJs 学习笔记

    博客分类:
  • AJAX
阅读更多

 

一、环境构建

拷贝以下文档到项目WebRoot相应文件夹下,并按照下面的顺序进行加载到页面中。

1\rescources\css\ext_all.css                整个文件夹

2\adapter\ext\ext_base.js           整个文件夹

3ext_all.js

4、创建自己的JS文件

 

二、基本类及方法说明

1Ext.onReady(回调函数)             //页面加载后自动执行该方法中的回调函数

2EXT.Panel                               //面板类

3EXT.Panel.render()                       //面板渲染方法

4EXT.ViewPort                                 //框架类(根据相应的布局格式进行调用显示)

 

三、页面中表格显示的主要组成架构

--Grid                           表格显示类

----Store             数据信息存储类

----ColumnModel               列信息类

 

页面中数据列表显示框架:

GridPanle表格显示类,其中包括的属性有         cm|colModel   表头信息

                                               columns            列信息

                                               store                  数据存储器

注:其中cmcolModel含有相同,cmcolModel的简写;cmcolumns作用相同二者选其一使用即可。

 

(重点)

页面表格显示原理:

 

 

Store的作用是把数据data对应到要显示的fields表格列上

Cm的作用是把要显示的表格列fields对应到要显示列的名称cm

Grid的作用是把显示的列名称cm与要显示的数据store封装在一起

 

四、常用功能说明

1、列中数值文转换

colModle中使用renderer(回调函数)进行值转换

2、增加复选框列

GridPanlecolModle中同时增加smnew Ext.grid.checkBoxSelectionModle()可实现全部选中与取消

3、去掉列头下拉列表

GridPanlecolModle中添加enableHdMenutrue/false

4、实现排序功能

GridPanlecolModle中添加sortabletrue/false

5、列头下拉列表中英文转中文

ZaiGridPanle中添加viewConfig:(columnsText显示/隐藏列”,

                                                                   sortAscText正序”,

                                                                   sortDescText倒序

     )

 

 

 

 

分享到:
评论

相关推荐

    ExtJS学习笔记.doc

    ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc

    ExtJs简明教程+Extjs学习笔记

    ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~

    Extjs学习笔记

    ExtJS 学习笔记 ExtJS 是一个功能强大且流行的 JavaScript 库,用于构建富互联网应用程序(RIA)。本文将通过一个简单的示例,介绍如何使用 ExtJS 构建一个 Hello World 网页,并且详细讲解 Ext.MessageBox 的使用...

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    语言程序设计资料:ExtJs学习笔记-2积分.doc

    Extjs学习笔记之九 数据模型(上)

    ### Extjs 学习笔记之九:数据模型(上) #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色,它不仅为开发者提供了强大的数据处理能力,还极大地简化了前端与...

    老师整理的extjs学习笔记

    ### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...

    ExtJs学习笔记 ExtJs Api

    适合ExtJs开发人员extjs技术上手以及深入

    Extjs 5 学习笔记

    ### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...

    界面框架extjs学习笔记

    EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...

    extjs学习笔记

    ### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件,用于向用户展示消息对话框。它包含了多种类型的消息对话框,每种对话框都有其特定用途。 - **Ext....

    ExtJs学习笔记,共30讲

    这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...

    extjs 学习笔记(三) 最基本的grid

    在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...

    Extjs学习笔记之七 布局

    以上介绍的只是Extjs布局管理中的一小部分,Extjs官网提供了丰富的例子和详细的文档,这是学习Extjs布局的最佳资源。通过官网的例子,可以直观地看到不同布局类型的效果和配置方法,极大地便利了开发者的布局实践和...

Global site tag (gtag.js) - Google Analytics