`
liss
  • 浏览: 842657 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

Ext.widgets-grid(2)

阅读更多

 Ext.grid.EditorGridPanel
可编辑数据表格
Config {
clicksToEdit : Number    //点几次开始编辑,默认为2
}

方法
EditorGridPanel()
构造,应为 EditorGridPanel(Object config)
startEditing( Number rowIndex, Number colIndex ) : void
stopEditing() : void
开始停止编辑

事件
afteredit : ( Object e )
beforeedit : ( Object e )
validateedit : ( Object e )

下面我们扩展一下刚才的示例应用一下EditorGridPanel


           //定义数组
var arr=[
    ['Bill', 'Gardener','2007-01-02',-10,true],
    [ 'Ben', 'Horticulturalist','2007-01-03',-20.1,false],
    ['你', 'Gardener','2007-02-02',0,true],
    ['他', 'Gardener','2007-01-04',13,false],
    [ '我', 'Horticulturalist','2007-01-05',15.2,false]
    ];
var reader = new Ext.data.ArrayReader(

   ...{},
//定义数组到record的映射关系
   [
    ...{name: 'name'},        
    ...{name: 'occupation', mapping: 1},
    ...{name:'date',type: 'date',dateFormat: 'Y-m-d'}, //用指定的格式转换日期
    ...{name:'float',type:'float'},
    ...{name:'bool',type:'bool'}
   ]
);
//生成元数据
 var store=new Ext.data.Store(...{
    reader:reader
    });
store.loadData(arr);


//自定义可编辑列,从ext的示例抄的,但是却要init郁闷
 Ext.grid.CheckColumn = function(config)...{
    Ext.apply(this, config);
    if(!this.id)...{
    this.id = Ext.id();
    }
    this.renderer = this.renderer.createDelegate(this);
};
//重写了三个方法,捕捉mousedown修改数据
Ext.grid.CheckColumn.prototype =...{
init : function(grid)...{
    this.grid = grid;
    this.grid.on('render', function()...{
    var view = this.grid.getView();
    view.mainBody.on('mousedown', this.onMouseDown, this);
    }, this);
},

onMouseDown : function(e, t)...{
   
    if(t.className && t.className.indexOf('x-grid3-cc-'+this.id) != -1)...{
    e.stopEvent();
    var index = this.grid.getView().findRowIndex(t);
    var record = this.grid.store.getAt(index);
    record.set(this.dataIndex, !record.data[this.dataIndex]);
    }
},

renderer : function(v, p, record)...{
    p.css += ' x-grid3-check-col-td';
    return '<div class="x-grid3-check-col'+(v?'-on':'')+' x-grid3-cc-'+this.id+'">&#160;</div>';
}
}

//绑定到bool字段
var checkColumn=new Ext.grid.CheckColumn(...{
   header: "布尔值",
   dataIndex: 'bool'
});


/**//*
    现在配置列信息,为了本地化日期选择器,请包含ext-lang-zh_CN.js,并修改Date.dayNames = ["日","一","二","三","四","五","六"];
    在Ext.apply(Ext.DatePicker.prototype, {...})中加入okText:"确定",cancelText:"取消";
*/
var col=new Ext.grid.ColumnModel([
    new Ext.grid.RowNumberer(...{header:'序号',width:30}),
    ...{header:'姓名',sortable: true,dataIndex:'name'},
    ...{header:'职业',sortable: true,dataIndex:'occupation'},
    ...{  
    id:'datacol',
    header:'日期',
    sortable:true,
    dataIndex:'date',renderer: Ext.util.Format.dateRenderer('Y年m月d日'),//格式化显示
    editor:new Ext.form.DateField()
     },
    ...{header:'数值',sortable:true,dataIndex:'float',renderer:formatFloat,align: 'right',editor:new Ext.form.NumberField()},  //自定义显示方式,右对齐
    checkColumn //这个"选择框列"看起来的确漂亮些,其实是通过修改背景图片实现的
]);



//配置视图信息
var view=new Ext.grid.GridView(...{forceFit:true,sortAscText :'正序', sortDescText :'倒序'});
view.columnsText='列显示/隐藏';

//现在我们看看可编辑的数据表格能用了吗       
var grid=new Ext.grid.EditorGridPanel(...{
    el:Ext.getBody(),
    height:200,
    width:400,
    store:store,
    cm:col,
    view:view
    });   
//为什么原例不需要init?
checkColumn.init(grid);
grid.render();

function formatFloat(val)...{
    var bgcolor;
    if(val>0)...{
    bgcolor='#FF0000';
    }else if(val<0)...{
    bgcolor='#00FF00';
    }
    else...{
    bgcolor='#000000';
    }
    return( ['<span style="color:',bgcolor,'">',val,'</span>'].join(''));
}

Ext.grid.PropertyGrid
属性表格.继承自EditorGridPanel,用习惯ide的用户都会喜欢这个简单的属性表格,

config{
     customEditors : Object    //自定义属性编辑器
      source : Object    //数据源
}

方法
PropertyGrid( Object config )
构造

getSource() : Object
setSource( Object source ) : void
得到和设置数据源

事件
beforepropertychange : ( Object source, String recordId, Mixed value,
propertychange : ( Object source, String recordId, Mixed value, Mixed

同样用一个简单的示例来完成PropertyGrid的学习
       
var grid=new Ext.grid.PropertyGrid(...{
    el:Ext.getBody()
    ,height:200
    ,width:400
    ,viewConfig : ...{forceFit:true}
    ,customEditors:...{
        '年龄':new Ext.grid.GridEditor(new Ext.form.NumberField())
    }
    ,source:...{
        '姓名':'blackant'
        ,'年龄':100
    }
});
      

grid.source['性别']='男';
grid.customEditors['性别']=new Ext.grid.GridEditor(new Ext.form.ComboBox(...{
        editable:false
        ,triggerAction: 'all'
        ,store: new Ext.data.SimpleStore(...{
            fields: ['gender'],
            data : [['男'],['女']]
        })
        ,displayField:'gender'
        ,forceSelection:true
        ,mode:'local'
}));
grid.render();

选择模式都很容易使用,略过,至于其它的扩展,有时间再慢慢研究了,第一步先以学会使用为主

本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/blackant2/archive/2007/12/19/1953956.aspx

分享到:
评论

相关推荐

    EXT-js-中文手册

    - **新特性**:重点介绍了Ext2中新增的特性,如新的布局方式、Grid组件的增强等。 - **下载指南**:提供了Ext2的下载链接及安装指南。 #### 22. 组件模型ComponentModel - **模型概念**:ComponentModel是Ext中用于...

    extjs学习资源

    - **组件库**: `Ext.widgets`包含了大量预定义的UI组件,如按钮、表单元素、菜单和工具栏等。 - **按钮**: `Button`、`SplitButton`和`CycleButton`等提供了丰富的按钮样式和功能。 - **表单**: `form`组件提供了...

    Extjs的学习资料

    2. **使用Ext的Grid, Form, Dialog来实现分页列表、创建、修改、删除功能**: - Grid:展示数据,支持分页、排序、选择行等操作。 - Form:用于数据输入和编辑,可以包含各种表单字段,如文本框、复选框、下拉框等...

    ext教程1.pdf

    - **表单及元素组件**:`Ext.Editor`(编辑器)、`Ext.grid.EditorGridPanel`(可编辑的表格)等。 EXTJS 的强大之处在于它提供了丰富的组件库和灵活的布局机制,使得开发者可以轻松构建复杂的应用程序界面,同时...

    extjs核心api详解

    这部分内容将详细讲解如何使用Ext.grid来创建表格,如何配置列、排序、过滤和分页功能,以及如何实现行编辑、拖拽列等功能。 十、Ext类的常用方法 文章最后提到了Ext类的一些常用方法,如addBehaviors、apply、...

    Ext学习文档(介绍 Core Util DD Widgets并有例子)

    2. **Ext Util**:工具集模块包含一系列实用函数,用于解决开发中遇到的各种问题。比如,`Ext.util.Format`提供了字符串格式化方法,如`date`可以用于日期的格式化,`number`则能帮助处理数字格式。`Ext.util....

    doc格式 ext EXT 中文手册

    - **Widgets**: Ext提供了一系列预构建的UI控件,如按钮、网格等,大大提高了开发效率。 - **示例组件**: - **MessageBox**: 显示对话框或警告信息。 - **Grid**: 创建数据表格。 - **更多组件**: 还有更多的UI...

    Ext JS in Action, 2nd Edition

    Ext JS is a mature JavaScript web application framework that provides modern UI widgets and an advanced MVC architecture. It helps you manage tedious boilerplate and minimize hand-coded ...

    ext 编程开发指南

    renderTo: 'grid-example' }); ``` ##### 还有更多的.. 除了以上提到的MessageBox和Grid之外,EXT还提供了大量的其他组件,如Form、TabPanel、Tree等,满足多样化的用户界面需求。 #### 使用Ajax Ajax是现代Web...

    Ext2.2 中文手册

    - **使用 Widgets**:Ext 提供了多种预定义的 UI 组件(Widgets),如 MessageBox、Grid 等。 - **使用 Ajax**:通过 `Ext.Ajax.request` 方法发起 Ajax 请求,并处理服务器端返回的数据。 #### 3. EXT 源码概述 ...

    Ext框架简介.ppt

    控件,或称作小部件(widgets),是EXT中的可视化组件,如窗口、面板、表格等,它们构成了EXT应用的主体。实用工具 Utils 包含各种辅助函数,帮助开发者更高效地编写代码。 EXT的核心组件包括但不限于以下几种: 1. ...

    ExtJS 3.2的中文参考手册

    - **分页栏 (Toolbar)**: 可以通过配置Grid的底部工具栏来实现分页功能,例如:`grid.bbar = new Ext.PagingToolbar({ store: store, displayInfo: true, displayMsg: '显示 {0} - {1} 条记录,共 {2} 条记录', ...

    ext学习文档

    - **使用Widgets**: 介绍了EXT提供的各种小部件,如MessageBox、Grid等。 - **使用Ajax**: 指导如何使用EXT进行Ajax调用,包括与不同服务器端技术的集成。 - **EXT源码概述**: 对EXT的源代码进行了初步解析。 - **...

    ext-word文档

    extend: 'Ext.grid.Panel', ... }); ``` #### EXT的布局(Layout) 布局是ExtJS中用于管理UI组件排列的关键特性。ExtJS提供了多种布局策略,如`fit`、`vbox`、`hbox`等,可以根据需要选择合适的布局策略。 #### ...

    EXT中文手册 Grid Form

    ### EXT中文手册 Grid Form #### EXT简介 EXT是一款强大的JavaScript框架,主要用于开发Web应用程序的前端界面。它提供了丰富的用户界面组件、数据管理功能以及与服务器端进行交互的能力。本手册旨在帮助开发者...

Global site tag (gtag.js) - Google Analytics