`

ext学习笔记1

    博客分类:
  • ext
阅读更多

一。extjs例子。

1。新建一个helloworld目录,helloworld目录下新建一个helloworld.html文件,将下列内容复制进index.html文件中

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

      <script type="text/javascript" src="ext/ext-base.js"></script>

          <script type="text/javascript" src="ext/ext-all.js"></script>

       <script type="text/javascript" src="ext/examples.js"></script>

<link rel="stylesheet" type="text/css" href="ext/css/examples.css" />

<script>

Ext.onReady(function(){

   Ext.MessageBox.alert('helloworld', 'Hello World.');

});

</script>

2双击helloworld.html打开页面,效果如下:

 

2Grid例子:

◆导入文件如上略。

<script>

Ext.onReady(function(){

    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

 

//建立一个三列的表格

var cm = new Ext.grid.ColumnModel([

{header:'编号',dataIndex:'id' sortable:true},//sortable属性是排序

{header:'性别',dataIndex:'sex',renderer: renderSex },

    {header:'名称',dataIndex:'name'},

    {header:'描述',dataIndex:'descn'}

]);

//定义数据

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

//转化

var ds = new Ext.data.Store({
    proxy: new Ext.data.MemoryProxy(data),
    reader: new Ext.data.ArrayReader({}, [
        {name: 'id'},
{name: 'sex'},
        {name: 'name'},
        {name: 'descn'}
    ])
});
ds.load();
或使用Ext.data.SimpleStore

/** proxy告诉我们从哪里获得数据,reader告诉我们如何解析这个数据。

Ext.data.MemoryProxy,它是专门用来解析js变量的,Ext.data.ArrayReader专门用来解析数组。ds.load(),对数据进行初始化

mapping来改变列序。如:

var ds = new Ext.data.Store({

    proxy: new Ext.data.MemoryProxy(data),

    reader: new Ext.data.ArrayReader({}, [

        {name: 'id', mapping: 1},

{name: 'sex' mapping:0 },

        {name: 'name', mapping: 2},

        {name: 'descn', mapping: 3}

    ])

});

*/

//装配

var grid = new Ext.grid.GridPanel({

    el: 'grid',

    ds: ds,

    cm: cm

});

   grid.render();

/**

Ext.grid.Grid的第一个参数是渲染的id,对应在html里应该有一个 <div id="grid"></div>的东西,这样grid才知道要把自己画到哪里。

*/

//判断是男是女,然后配上颜色

function renderSex(value) {
    if (value == 'male') {
        return "<span style='color:red;font-weight:bold;'>红男</span>";
    } else {
        return "<span style='color:green;font-weight:bold;'>绿女</span>";
    }
}

 

</script>

◆效果图如下:

 

使用renderer函数:

1.自动行号

var cm = new Ext.grid.ColumnModel([
    {header:'NO.',renderer:function(value, cellmeta, record, rowIndex){
        return rowIndex + 1;
}}//此为EXT1.X
new Ext.grid.RowNumberer(),//此为EXT2.X
]);
2. 显示颜色,链接,图片,按钮等
   {header:'描述',renderer: renderDescn }
function renderDescn(value, cellmeta, record, rowIndex, columnIndex, store) {
    var str = "<input type='button' value='查看详细信息' onclick='alert(\"" +
        "这个单元格的值是:" + value + "\\n" +
        "这个单元格的配置是:{cellId:" + cellmeta.cellId + ",id:" + cellmeta.id + ",css:" + cellmeta.css + "}\\n" +
        "这个单元格对应行的record是:" + record + ",一行的数据都在里边\\n" +
        "这是第" + rowIndex + "\\n" +
        "这是第" + columnIndex + "\\n" +
        "这个表格对应的Ext.data.Store在这里:" + store + ",随便用吧。" +
        "\")'>";
    return str;
}                 //效果图:

■全选checkbox: checkboxSelectionModel
var sm = new Ext.grid.CheckboxSelectionModel();//ext2.0

l       sm身兼两职,使用的时候既要放到cm里,也要放到grid中。代码如下。

var cm = new Ext.grid.ColumnModel([

    new Ext.grid.RowNumberer(),

    sm,

    {header:'编号',dataIndex:'id'},

    {header:'性别',dataIndex:'sex'},

    {header:'名称',dataIndex:'name'},

    {header:'描述',dataIndex:'descn'}

]);

var grid = new Ext.grid.GridPanel({

    el: 'grid',

    ds: ds,

    cm: cm,

    sm: sm

});

/**   ext 1.x

{header:'<input type="checkbox" onclick="selectAll(this)">',renderer:function(value, cellmeta, record, rowIndex){
        return '<input type="checkbox" name="cb">';
    }},

*/

l        效果图:   

 

分页工具条:

EXT1.X

       //获取grid下边放工具条工具的面板容器,

    var gridFoot = grid.getView().getFooterPanel(true);
//得工具条
var paging = new Ext.PagingToolbar(gridFoot, ds, {
    pageSize: 10,
    displayInfo: true,
    displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} ',
    emptyMsg: '没有记录'
});
/**

gridFoot上显示,ds也进行操作, displayInfo如果是false就不会显示提示信息。 displayMsg,只有在displayInfo:true的时候才有效,用来显示有数据的时候的提示信息.emptyMsg,要是没数据就显示这个

*/

EXT2.0

var grid = new Ext.grid.GridPanel({

    el: 'grid',
    ds: ds,
    cm: cm,
    bbar: new Ext.PagingToolbar({
        pageSize: 10,
        store: ds,
        displayInfo: true,
        displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} ',
        emptyMsg: "没有记录"
    })
});
ds.load();        
 
 
分享到:
评论

相关推荐

    EXT学习笔记1 EXT项目创建

    NULL 博文链接:https://lionelxx777.iteye.com/blog/359860

    ext学习笔记代码

    ext学习笔记代码 ext学习笔记代码 ext学习笔记代码

    Gwt-ext学习笔记

    在阅读《Gwt-ext学习笔记.pdf》这份资料时,应重点学习上述知识点,并通过实践项目来加深理解。同时,关注Gwt-ext的更新和社区资源,以便获取最新的API信息和最佳实践。不断练习和探索,你将能够熟练运用Gwt-ext构建...

    ext学习资料 20篇详细学习笔记 初学者ext学习的文档

    这份"ext学习资料 20篇详细学习笔记 初学者ext学习的文档"是针对EXT初学者的一份宝贵资源,旨在帮助初学者快速入门EXT开发。 EXT的学习通常包括以下几个核心部分: 1. **EXT基础**:首先,你需要了解EXT的基本概念...

    Yui_ext 学习笔记

    【Yui_ext 学习笔记】 Yui_ext 是基于 Yahoo! UI Library (YUI) 的扩展,主要用于构建富客户端的 Web 应用程序。这篇学习笔记主要介绍了 Yui_ext 的基础知识,适合对 JavaScript 和 HTML DOM 有一定了解的初学者。 ...

    Ext学习笔记

    Ext JS4学习教程+笔记(一) Ext JS4学习教程+笔记(二)事件处理 Ext JS4学习教程+笔记(六)DataView面板 Ext JS4学习教程+笔记(七)树面板Tree Panel Ext JS4学习教程+笔记(三)Ajax请求 ...Ext学习网址

    EXT学习笔记-项目应用实践

    这篇EXT学习笔记主要涵盖了EXTJS中面向对象编程的一些关键概念和实践,包括命名空间、类定义、构造函数、属性与方法的访问控制(私有和公有)、静态属性与方法以及继承机制。 1. **命名空间**:在EXTJS中,命名空间...

    Ext学习和学习笔记

    里面包括Ext学习.doc和Ext学习笔记.doc两份资料。来自网上。

    Gwt-ext学习笔记之基础篇

    ### Gwt-ext学习笔记之基础篇 #### 一、安装CypalStudio工具 为了能够开始Gwt-ext的学习之旅,首先需要确保开发环境已经搭建好。CypalStudio是一款非常实用的工具,它能帮助开发者更高效地进行GWT项目的开发。 1....

    十分有用有帮助的EXT学习笔记

    以下是对EXT学习笔记中涉及的关键知识点的详细说明: 1. **EXT Form**: EXT中的表单组件是构建用户交互界面的重要部分。它们允许用户输入数据并将其提交到服务器。EXT Form支持多种字段类型,如文本框、选择框、...

    ext api,ext 学习笔记,SWFUpload_多文件上传及部分工具

    在EXT学习笔记中,"What_is_that_Scope_all_about2.htm"可能涉及的是JavaScript作用域和EXT中的scope概念,这对于理解和调试EXT应用中的事件处理和回调函数至关重要。"JsonTool.htm"可能介绍了EXT如何与JSON数据进行...

    EXT学习笔记

    EXT学习笔记,是本人在一个月的学习期间整理的

    Gwt-Ext学习笔记之进级篇

    在GWT-Ext的学习过程中,首先你需要了解如何定义和实现远程服务。这是GWT的一个核心特性,它允许客户端和服务器之间的安全通信。在GWT中,远程服务调用通常涉及以下几部分: 1. **远程服务接口(Remote Service ...

Global site tag (gtag.js) - Google Analytics