深入浅出 Ext js 笔记

第一章  Ext概述

一、Ext 目录结构:

  adapter:核心代码和底层库

  examples:官网的演示

  docs:API文档

  pkgs:是EXT压缩后的代码

  resources:ext要用到的图片和样式文件

  scr:未压缩过的ext文件

  ext-all.js:ext核对心库,必须引入    ext-all-debug.js:是ext-all.js的调试版,调用这个文件夹才能正确的定位出现错误的位置

  INCLUDE_ORDER.txt:引用库层库javascript文件的顺序

二、配置文件加载

<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />

<script src="../adapter/ext/ext-base.js" type="text/javascript"></script>  // 基础文件

<script src="../ext-all.js" type="text/javascript"></script>          // ext框架文件

第二章  框架基础

一、EXT中的事件分为两种类型:自定义事件和浏览器事件,

第三章  表格控件

  功能包括排序、缓存、拖动、隐藏某一列、自动显示行号、列汇总、单元格编辑等实用功能

  表格由类Ext.grid.GridPanel定义,

  一、列的定义叫ColumnModel,负责创建表的列信息

  包括:

  1、header:首部显示文本  2、dataIndex:列对应的记录集  3、sortable:列是否可排序  

  4、renderer:列的渲染     5、width:宽度   6、format:格式化

<div id="grid"></div>

// 定义表列信息

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

// 定义表格中数据

var data = [    
  ["1", 'name1', 'descn1'],
  ["2", 'name2', 'descn2'],
  ["3", 'name3', 'descn3'],
  ["4", 'name4', 'descn4'],
  ["5", 'name5', 'descn5']
]

var store = new Ext.data.Store({
  proxy: new Ext.data.MemoryProxy(data),
  reader: new Ext.data.ArrayReader({}, [
    {name: 'id'},
    {name: 'name'},
    {name: 'descn'}
  ])
});
store.load();

var grid = new Ext.grid.GridPanel({
  autoHeight: true,
  renderTo: 'grid',
  store: store,
  cm: cm
});

  

原文地址:https://www.cnblogs.com/couxiaozi1983/p/3131744.html