Ext学习笔记8-数据模型及工具栏菜单栏

19-Ext中的数据模型

ExtJS的数据模型主要包括如下几个部分:

• • 数据记录: Record
    • 数据集合中的一个记录,它存放了数据的定义信息和他们的值
  • 数据代理: Proxy
    • 获取解析器,是ExtJS数据模型获取数据的主要途径
  • 数据解析器: DataReader
    • 数据解析器,负责将代理Proxy读取的数据转换为Record对象并存入Store中
  • 数据集: Store
    • 一个保存数据记录(Record)的集合, 它相当于在客户端存放数据的一张数据表,
      对其中数据的更改会触发特定的事
      
• Record 数据记录
  • Ext.data.Record主要配置项及公共属性表

配置项	参数类型	说 明
data	Object	Record记录对应的一个hash对象
dirty	Boolean	表示记录中的数据是否被修改过
id	Object	在创建记录时产生的唯一表示记录的id
modified	Object	这个对象用于保存记录字段修改前的名称和值, 如果字段没有被修改过,则为null

• • Ext.data.Record 主要方法表
    

    方法名	说 明
    Record(Array data, [Object id])	记录对象的构造函数,一般不直接用于创建对象,而使用create方法进行创建, 他们的参数是相同的 参数说明:  data,  包含字段冥河数据值的数组.                    id, 这个id应该是唯一的, 如果没有提供则会自动产生一个整型
    beginEdit() : void	开始编辑, 当处于编辑模式时将没有事件被转播到它的数据Store对象中
    cancelEdit() : void	取消当前编辑操作对记录的所有修改
    commit([Boolean silent]) :void	这个方法通常被拥有记录的Ext.dataStore进行调用, 提交从记录被创建以来或 最近一个提交以来的所有更改 参数说明: silent, true则不通过Ext.data.Store进行记录更新,默认为false
    copy([String id]) : Record	复制记录 参数说明: id, 新记录的id
    create([Array o]) : function	静态方法, 用于产生一个特定记录布局的记录构造函数(具体说明看表格下面)
    endEdit() : void	结束编辑, 如果数据被改变则拥有记录的Ext.data.Store将得到通知
    get(String name) : Object	得到制定名字的字段 参数说明: name, 字段名
    getChanges() : Object	得到自从记录被创建或最近一次提交更新之后发生更改字段的hash集合
    reject([Boolean silent]) : void	这个方法通常被拥有记录的Store进行调用,拒绝从记录被创建或最近一次提交 更新之后发生的所有更改,字段将被还原到他们的初始值 参数说明: silent ,true则不通过Ext.data.Store进行更新撤销,默认为false
    set(String name, Object value) : void	这只记录中特定名字的字段值 参数说明: name, 字段名                   value, 字段值

    
    

20-Ext中的工具栏

• Ext.Toolbar工具栏常用元素表
  

  工具栏元素名称	说 明
  Ext.Toolbar.Button	可以加入到工具栏中的按钮组件
  Ext.Toolbar.Fill	用于充满工具条的空白元素
  Ext.Toolbar.Item	基类,为其子类提供工具栏的基本功能支持
  Ext.Toolbar.Separator	工具栏分割符
  Ext.Toolbar.SplitButton	菜单按钮
  Ext.Toolbar.TextItem	文本元素

  
  
• Ext.Toolbar支持的各种工具栏常用方法表
  

  方法名	参数类型	说 明
  addButton()	Object/Array config	添加一个或多个Ext.Toolbar.Button/SplitButton对象
  addElement()	Mixed el	添加Element元素
  addField()	Ext.form.Field	添加表单组件
  addFill()		添加一个用于充满工具条的空白元素
  addSeparator()		添加一个工具栏分割符
  addText()	String Text	添加一个字符串
  add()	Mixed arg1,Mixed arg2,Mixed aetc	该方法用于项工具栏中添加元素,它支持一个变长的参数列表, 可以一次性加入多个工具栏元素

  
  
• Ext.Toolbar.Button主要配置项目表
  

  配置项	类 型	说 明
  handler	Function	一个函数,在按钮被单击之后调用
  iconCls	String	一个样式类,提供在按钮上显示的图标
  menu	Mixed	参数可以是一个菜单对象或者菜单对象的id, 也可以是一个邮箱的菜单配置对象
  text	String	按钮上显示的文字

  可能的按钮参数形式如下:
        * 单配置对象: {text : '新建', handler : onButtonClick, iconCls : 'newIcon'}
        * 配置对象数组:[{text : '新建'}, {text : '保存'}]
  示例1:(简单工具栏)
         

Ext.onReady(function(){
  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:300
  });

  Toolbar.addButton([//向工具栏中添加按钮
   {
    text:'新建',//按钮上显示的文字
    handler:onButtonClick,//点击按钮的处理函数
    iconCls:'newIcon'//在按钮上显示的图标
   },
   {text:'打开',handler:onButtonClick,iconCls:'openIcon'},
   {text:'保存',handler:onButtonClick,iconCls:'saveIcon'}
  ]);

  function onButtonClick(btn){//点击按钮时调用的处理函数
   alert(btn.text);//取得按钮上的文字
  }
 });

示例2:

Ext.onReady(function(){
  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:400
  });
  Toolbar.addButton([{text:'新建'},{text:'打开'},
         {text:'保存'}]);//加入按钮
  Toolbar.addSeparator() //加入工具栏分隔符
  Toolbar.addField(new Ext.form.TextField({//加入表单元素
   width:50
  }));
  Toolbar.addFill()//加入一个充满工具栏的空白元素
  Toolbar.addElement(Ext.get('a'));//加入一个Element元素
  Toolbar.addSeparator()//加入工具栏分隔符
  Toolbar.addText('静态文本')//加入一个简单字符串
 });

示例3:(调用一次方法加入多个不同的元素)

• • 调用格式
    • add(Mixed arg1, Mixed arg2, Mixed etc)
  • 参数说明:
    • Ext.Toolbar.Button     一个工具栏支持的按钮
    • HtmlElement               任何HTML元素
    • Field                              表单字段
    • String                           字符串
    • '->'                               一个用于重码工具条的空白元素
    • 'separator' or '-'       工具栏分隔符

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:400
  });
  Toolbar.add(
   {text:'新建'},{text:'打开'},
   {text:'编辑'},{text:'保存'}, //加入按钮
   '-',                         //加入工具栏分隔符
   new Ext.form.TextField({     //加入表单元素
    width:50
   }),
   '->',                        //加入一个充满工具栏的空白元素
   document.getElementById('a'),//加入一个Element元素
   '-',                         //加入工具栏分隔符
   '静态文本'                   //加入一个简单字符串
  );
 });

21-Ext中的菜单栏

• Ext.menu.Menu主要配置项目表
  

  配置项	参数类型	说 明
  items	Mixed	一个有效菜单项的数组(见下表)
  shadow	Boolean/String	阴影显示方式, 默认为true即sides方式 sides方式阴影位置:左右下 frame方式阴影位置:全 sdrop方式阴影位置:下右

  
  
• 菜单项主要类型表
  

  菜单元素名称	说 明
  Ext.menu.TextItem	文本元素
  Ext.menu.Separator	菜单分割符
  Ext.menu.CheckItem	包含选择框的菜单项,也可以是一个单选组

  
  
• 菜单组件常用方法
  

  方法名	参数类型	说 明
  addElement()	Mixed el	添加Element元素
  addItem()	Ext.menu.Item.item	添加一个已存在的菜单项
  addMenuItem()	Object.config	根据一个菜单项配置对象,添加菜单项
  addSeparator()		添加菜单分隔符
  addText()	String text	添加一个字符串

示例1:

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:300
  });
  var fileMenu = new Ext.menu.Menu({//文件创建菜单
   shadow : 'frame',//设置菜单四条边都有阴影
   items : [
    {text: '新建',handler:onMenuItem},//添加菜单项
    {text: '打开',handler:onMenuItem},
    {text: '关闭',handler:onMenuItem}
   ]
  });
  var editMenu = new Ext.menu.Menu({//编辑创建菜单
   shadow : 'drop',//设置菜单在右下两条边有阴影
   items : [
    {text: '复制',handler:onMenuItem},//添加菜单项
    {text: '粘贴',handler:onMenuItem},
    {text: '剪切',handler:onMenuItem}
   ]
  });
  Toolbar.add(
   {text : '文件', menu : fileMenu},//将菜单加入工具栏
   {text : '编辑', menu : editMenu}
  );
  function onMenuItem(item){//菜单项的回调方法
   alert(item.text);//取得菜单项的text属性
  }
 });

示例2:(创建二级或多级菜单)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';
  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:300
  });
  var infoMenu = new Ext.menu.Menu({//一级菜单
   items : [
    {
     text: '个人信息',
     menu: new Ext.menu.Menu({//二级菜单
      items:[
       {text: '身高',handler:onMenuItem},
       {text: '体重',handler:onMenuItem},
       {
        text: '生日',
        menu:new Ext.menu.DateMenu({//三级菜单
         handler:onClickDate
        })
       }
      ]
     })
    },//添加菜单项
    {text: '公司信息'}
   ]
  });
  Toolbar.add(
   {text : '设置', menu : infoMenu}//将菜单加入工具栏
  );
  function onClickDate(dm,date){//日期选择的处理函数
   alert(date.format('Y-m-j'));
  }
  function onMenuItem(item){//选择菜单项的处理函数
   alert(item.text);//取得菜单项的text属性
  }
 });

示例3: (使用适配器Ext.menu.Adapter)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';

  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:300
  });
  var fileMenu = new Ext.menu.Menu({//文件创建菜单
   items : [
    //使用适配器将按钮加入菜单
    new Ext.menu.Adapter(new Ext.Button({
     text:'新建',
     handler:onButtonClick
    })),
    new Ext.menu.Adapter(new Ext.Button({
     text:'打开',
     handler:onButtonClick
    })),
    new Ext.menu.Adapter(new Ext.Button({
     text:'关闭',
     handler:onButtonClick
    }))
   ]
  });

  Toolbar.add(
   {text : '文件', menu : fileMenu}//将菜单加入工具栏
  );
  function onButtonClick(btn){//菜单项的回调方法
   alert(btn.text);//取得菜单项的text属性
  }
 });

示例4:(具有选择框的菜单)

Ext.onReady(function(){
  Ext.BLANK_IMAGE_URL = '../../extjs2.0/resources/images/default/s.gif';

  var Toolbar = new Ext.Toolbar({//创建工具栏
   applyTo:'toolbar',
   width:300
  });
  var themeMenu = new Ext.menu.Menu({//文件创建菜单
   items : [
   {
    text:'主题颜色',
    menu:new Ext.menu.Menu({
     items:[
      {
       text: '红色主题',
       checked: true,//初始为选中状态
       group: 'theme',//为单选项进行分组
       checkHandler: onItemCheck
      },
      {
       text: '蓝色主题',
       checked: false,//初始为未选中状态
       group: 'theme',
       checkHandler: onItemCheck
      },
      {
       text: '黑色主题',
       checked: false,
       group: 'theme',
       checkHandler: onItemCheck
      }
     ]
    })
   },
   {
    text:'是否启用',
    checked : false
   } 
   ]
  });

  Toolbar.add(
   {text : '风格选择', menu : themeMenu}//将菜单加入工具栏
  );
  function onItemCheck(item){//菜单项的回调方法
   alert(item.text);//取得菜单项的text属性
  }
 });