一、环境构建
拷贝以下文档到项目WebRoot相应文件夹下,并按照下面的顺序进行加载到页面中。
1、\rescources\css\ext_all.css 整个文件夹
2、\adapter\ext\ext_base.js 整个文件夹
3、ext_all.js
4、创建自己的JS文件
二、基本类及方法说明
1、Ext.onReady(回调函数) //页面加载后自动执行该方法中的回调函数
2、EXT.Panel //面板类
3、EXT.Panel.render() //面板渲染方法
4、EXT.ViewPort //框架类(根据相应的布局格式进行调用显示)
三、页面中表格显示的主要组成架构
--Grid 表格显示类
----Store 数据信息存储类
----ColumnModel 列信息类
页面中数据列表显示框架:
GridPanle表格显示类,其中包括的属性有 cm|colModel 表头信息
columns 列信息
store 数据存储器
注:其中cm或colModel含有相同,cm是colModel的简写;cm与columns作用相同二者选其一使用即可。
(重点)
页面表格显示原理:
Store的作用是把数据data对应到要显示的fields表格列上
Cm的作用是把要显示的表格列fields对应到要显示列的名称cm上
Grid的作用是把显示的列名称cm与要显示的数据store封装在一起
四、常用功能说明
1、列中数值文转换
在colModle中使用renderer(回调函数)进行值转换
2、增加复选框列
在GridPanle和colModle中同时增加sm:new Ext.grid.checkBoxSelectionModle()可实现全部选中与取消
3、去掉列头下拉列表
在GridPanle或colModle中添加enableHdMenu:true/false
4、实现排序功能
在GridPanle或colModle中添加sortable:true/false
5、列头下拉列表中英文转中文
ZaiGridPanle中添加viewConfig:(columnsText:”显示/隐藏列”,
sortAscText:”正序”,
sortDescText:”倒序”
)
分享到:
相关推荐
ExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.docExtJS学习笔记.doc
ExtJs简明教程+Extjs学习笔记,来源网络,免费奉送,我讨厌需要资源分~
ExtJS 学习笔记 ExtJS 是一个功能强大且流行的 JavaScript 库,用于构建富互联网应用程序(RIA)。本文将通过一个简单的示例,介绍如何使用 ExtJS 构建一个 Hello World 网页,并且详细讲解 Ext.MessageBox 的使用...
语言程序设计资料:ExtJs学习笔记-2积分.doc
### Extjs 学习笔记之九:数据模型(上) #### 概述 本文将深入探讨Extjs框架中至关重要的组成部分——数据模型。数据模型在Extjs中扮演着核心角色,它不仅为开发者提供了强大的数据处理能力,还极大地简化了前端与...
### ExtJS 学习笔记概览 #### 一、ExtJS 入门 **1.1 ExtJS 构成及如何引用** ExtJS 是一款基于 JavaScript 的开源框架,专为 Web 应用程序的前端界面设计。其核心优势在于提供了一套丰富的 UI 组件和强大的数据...
适合ExtJs开发人员extjs技术上手以及深入
### Extjs 5 学习笔记之 SenchaCmd 深入解析 #### 一、SenchaCmd 的简介 SenchaCmd 是一个跨平台的命令行工具,它为基于 ExtJS 和 Sencha Touch 应用程序的开发周期提供了全面的支持。从创建应用程序的基础结构到...
EXTJS in Action 是一本专为学习EXTJS编写的书籍,但这里我们主要关注学习笔记中的关键知识点。 首先,EXTJS的目录结构非常重要,因为它包含了所有必要的资源和源码: 1. `adapter`:这部分包含了适配器,用于将...
### extjs学习笔记知识点梳理 #### 一、Ext.MessageBox 方法详解 Ext.MessageBox 是 ExtJS 库中的一个重要组件,用于向用户展示消息对话框。它包含了多种类型的消息对话框,每种对话框都有其特定用途。 - **Ext....
这个学习笔记涵盖了从基础到高级的多个主题,帮助读者深入理解ExtJs的核心概念和技术。以下是一些关键知识点的详细说明: 1. **ExtJs 结构树**:这部分内容可能涉及ExtJs如何构建可自定义的用户界面组件树,包括...
在本篇学习笔记中,我们将深入探讨EXTJS中最基本的Grid的构建和配置。 首先,EXTJS的Grid由多个组件构成,其中最重要的是`ColumnModel`,它负责定义Grid中的列属性。在示例代码中,我们创建了一个`ColumnModel`对象...
以上介绍的只是Extjs布局管理中的一小部分,Extjs官网提供了丰富的例子和详细的文档,这是学习Extjs布局的最佳资源。通过官网的例子,可以直观地看到不同布局类型的效果和配置方法,极大地便利了开发者的布局实践和...