zoukankan      html  css  js  c++  java
  • EXTJS学习方案<一>

    s扩充之后的脚本
    有三个基本js库(从官网下api)ext-base.js,ext-all.js及一个css文件ext-all.css
    常用到得有grid,form,store;

    学习extjs之前首先要了解它所采用的数据格式——json
    它主要格式是 name:namevalue,前者name表示属性名,后面namevalue表示属性值
    一般用大括号为一个包含点
    {name:chengrong,sex:nan}这个例子表明它有两个属性(注意}之前是不能以,结尾,否则报错)
    同时它支持中括号的嵌套包含[{***},{***},{***}]

    接下来就开始讲解extjs了
    读者可参阅api实例程序集api文档来学,这样学的更快;

    extjs重要的属性store:

    store : 数据存储器-保存与管理数据的 (数据以record类型的数据进行存储。)
    reader: 数据读取器-解析数据的
    proxy:  数据代理-代理各种数据源(db2,oracle)

    可以这样写:
    new Ext.data.Store({
     autoLoad:true,
     proxy:new Ext.data.HttpProxy({  //解析远程地址的数据或服务器上的
     http://www.cnblogs.com/dalas/admin/'****'
     }),
    【data:[{name:"zhangna",age:23,sex:"女"}]】//直接获取数据
     reader:new Ext.data.JsonReader({
        root:"result",
     totalProperty:"totalCount",
     fields:[{
     name:'id',mapping:'id',type:'int'
     }]
     })
    })


    store数据得到了就需一个容器去装载它来显示,这里我们用grid
    grid有三个重要的属性store,cm<columnmodel>,sm<selectmodel>
    store我们已经定义好了
    接下来就是cm,我们可以把它想成一个框架就行,它定义了显示哪些数据
    new Ext.grid.ColumnModel({
    defaults:{sortable:true},
    columns:[{
     header:'xuliehao',//前台显示名称
     dataIndex:'id',//store对应的name叫id的属性
     220
     }]
    })

    sm就是一种grid的选择模式方案,通常如下:
    new Ext.grid.CheckboxSelectionModel({name:'tt'})

    这样我们就可以显示出数据出来,我们可以用form进一步完善其功能
    form中的bbar,tbar对应为头工具栏和尾工具栏
    在bbar中我们加一个分页栏
    new Ext.PagingToolbar({
     pageSize:15,//以15来分页
     store:**,
     diplayInfo:true,
     displayMsg:'显示记录 {0} - {1} of {2}',
     emptyMsg: "没有相关主题"
    })

  • 相关阅读:
    Delphi Excel 操作大全
    ThreadLocal类
    MyBatis实战总结
    MyBatis入门
    Mybatis逆向工程
    2020年全国高校计算机能力挑战赛初赛java组
    集合论基础
    命题与逻辑
    Redis技术概述
    UML图中6种箭头的含义
  • 原文地址:https://www.cnblogs.com/dalas/p/1642190.html
Copyright © 2011-2022 走看看