`
lvxb
  • 浏览: 9604 次
  • 性别: Icon_minigender_1
  • 来自: 西安
文章分类
社区版块
存档分类
最新评论

ExtJS

 
阅读更多
grid双击事件，并得到单元格的值，以上我试了下好像不行，最终我这样写了

grid.addListener('rowdblclick', function (sm, rowIndex, e) {
var selectionModel = grid.getSelectionModel();
var record = selectionModel.getSelected();
alert(record.data['UserName']);
});

menuDisabled:true表示单列不可排序
enableHenu:true所有列不可排序
renderer:function(v)
{
    return v.link(v);
}


ExtJs表格
2009年11月09日 星期一 00:48
行选择模式：

Js代码
var rowcount = grid.getSelectionNode().getSelections();

var rowcount = grid.getSelectionNode().getSelections();
可以获取全部选中的记录，得到的rowcount将是一个Array，比如想获取sex列的数据，语句如下

Js代码
var strsex = rowcount[i].get(‘sex’);

var strsex = rowcount[i].get(‘sex’);
单元格选择模式


如果在GridPanel的配置属性增加sm属性如下

Js代码
sm:new Ext.grid.CellSelectionModel();

sm:new Ext.grid.CellSelectionModel();
则表格的选择模式为单元格选择模式。当单击时将选中对应的某一个单元格，而不是默认的选择某一行。选择方式如下

Js代码
var cell = grid.getSelectionNode().getSelectedCell();

var cell = grid.getSelectionNode().getSelectedCell();
得到的cell记录了当前选择的行(cell[0])以及列(cell[1]).可以通过一下语句得到该单元格数据

Js代码
var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据

var colname = grid.getColumnModel().getDataIndex(cell[1]); //获取列名
var celldata = grid.getStore().getAt(cell[0]).get(colname); //获取数据
getStore():获取表格的数据集
getAt():获取该数据集cell[0]行
get():获取该行colname的数据


2） 为表格增加链接



有时我们需要为表格中的某一列添加一个链接。可以利用renderer配置属性为该列添加html
如下：{id:'3',header:'名称',dataIndex:'name',renderer:DomUrl},
定义DomUrl方法



Js代码
function DomUrl(value){
return "<a href=>"+value+"</a>";
}

function DomUrl(value){
return "<a href=>"+value+"</a>";
}
如果表格内的数据是一个链接如：www.sina.com这样写法自然没有问题，但是大多数时候我们在表格中不会直接写一个链接，如果又需要根据单元格内容动态为链接添加几个参数。那这种写法就几乎没有什么用了。因为这个属性是在表格初始化的时候定义好的，而且表格初始化之后这个属性无法改变，也就是只读属性。


处理方法如下：
定义一个全局变量，初始值为0；DomUrl函数如下

Js代码
function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串
return "<a href='"+strurl+"'>"+value+"</a>";
}

function DomUrl(value){
var row = grid.getSelectionModel().selectRow(startrow);//选中当前行
var rownum = grid.getSelectionModel().getSelected();//获取当前行
startrow ++;
var strurl = "abc.jsp?id=" + rownum.get('id');//获取当前选中行的值，并组织链接字符串
return "<a href='"+strurl+"'>"+value+"</a>";
}
不过不要忘记在下次提交的时候将startrow赋值为0。


3） 表格的属性


表格的属性分为配置属性（在操作表格时无法修改），以及其他可读写属性，方法，以及事件。如下：


配置属性



a) activeItem：渲染布局时激活的子元素。
b) applyTo：指定渲染对象。
c) autoDestroy：当容器的子元素从容器中移除时是否自动销毁。
d) autoExpandColumn：指定自动填充表格剩余区域的列id
e) autoExpandMax：可自动扩张的最大宽度。
f) autoExpandMin：可自动扩张的最小宽度
g) autoHeight:自动扩充高度
h) autoShow：是否自动显示
i) autoWidth：自动扩充宽度
j) bbar/tbar：底部/顶部状态栏
k) bufferResize：容器再布局的缓冲频率
l) colModel/cm:列模式
m) cls：组件的额外css格式。
n) collapsible:是否显示快捷隐藏按钮
o) defaults：指定默认配置。
p) disableSelection：是否禁止选择表格行或列
q) enableDragDrop：是否允许表格列的拖放操作。
r) enableHdMenu：是否显示表格列的菜单。
s) frame：边框是否显示
t) loadMask: 是否显示加载动画
u) selModel/sm：表格选择模式
v) store:表格数据集
w) stripeRows：是否显示分隔线。
x) title：表格标题


方法


a) getColumnModel()：得到表格列模型
b) getGridEl():得到表格下的元素
c) getPosition():得到组件的当前位置，返回一个数组
d) getSelectionModel():得到选中模型
e) getSize():得到组件大小
f) getStore():得到组件的数据集
g) getView():得到表格的GridView对象。
h) hide():隐藏当前组件
i) isVisible():判断当前组件是否显示
j) setDisabled( Boolean):设置组件的可用性
k) un():解除组件的监听
l) on()：为组件添加监听
on ( String eventName, Function handler, [Object scope] )
eventName:添加监听的名称
handler:事件处理函数
scope:事件响应的作用域,包括scope,delay,single,buffer。

----------------------------
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    <title>My JSP 'MyJsp.jsp' starting page</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">   
    <script type="text/javascript" src="<%=path%>/js/ext-base.js"></script>
    <script type="text/javascript" src="<%=path%>/js/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/resources/css/ext-all.css">
    <script type="text/javascript">
Ext.onReady(function(){
    Ext.QuickTips.init();
    Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
    var myData = [
        ['3m Co',                               71.72, 0.02,  0.03,  '9/1 12:00am'],
        ['Alcoa Inc',                           29.01, 0.42,  1.47,  '9/1 12:00am'],
        ['Altria Group Inc',                    83.81, 0.28,  0.34,  '9/1 12:00am'],
        ['American Express Company',            52.55, 0.01,  0.02,  '9/1 12:00am'],
        ['American International Group, Inc.',  64.13, 0.31,  0.49,  '9/1 12:00am']
    ];

    function change(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '</span>';
        }
        return val;
    }

    function pctChange(val) {
        if (val > 0) {
            return '<span style="color:green;">' + val + '%</span>';
        } else if (val < 0) {
            return '<span style="color:red;">' + val + '%</span>';
        }
        return val;
    }

    var store = new Ext.data.ArrayStore({
        fields: [
           {name: 'company',    renderer:getHideValue},
           {name: 'price',      type: 'float'},
           {name: 'change',     type: 'float'},
           {name: 'pctChange',  type: 'float'},
           {name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
        ]
    });

    store.loadData(myData);
   
    function getHideValue(value)
    {
        return "<a href=javascript:show></a>"
    }
   
    var grid = new Ext.grid.GridPanel({
        store: store,
        columns: [
            {
                id       :'company',
                header   : 'Company',
                width    : 160,
                sortable : true,
                dataIndex: 'company'
            },
            {
                id       :'p',
                header   : 'Price',
                width    : 75,
                sortable : true,
                renderer : 'usMoney',
                dataIndex: 'price'
            },
            {
                header   : 'Change',
                width    : 75,
                sortable : true,
                renderer : change,
                dataIndex: 'change'
            },
            {
                header   : '% Change',
                width    : 75,
                sortable : true,
                renderer : pctChange,
                dataIndex: 'pctChange'
            },
            {
                header   : 'Last Updated',
                width    : 85,
                sortable : true,
                renderer : Ext.util.Format.dateRenderer('m/d/Y'),
                dataIndex: 'lastChange'
            },
            {
                xtype: 'actioncolumn',
                width: 50,
                items: [{
                    icon   : 'resources/delete.gif',  // Use a URL in the icon config
                    tooltip: 'Sell stock',
                    handler: function(grid, rowIndex, colIndex) {
                    var rowcount = grid.getSelectionNode().getSelections();
                        var rec = store.getAt(rowIndex);
                        alert("Sell " + rec.get('company'));
                    }
                }]
            }
        ],
        stripeRows: true,
        autoExpandColumn: 'company',
        height: 350,
        width: 600,
        title: 'Array Grid',
        stateful: true,
        stateId: 'grid'
    });

    grid.render('grid-example');
});
    function show(value)
    {
        alert("jj");
    }
    </script>
  </head>
 
  <body>
   <div id='grid-example' align="center"></div>
  </body>
</html>

http://damoqiongqiu.iteye.com/blog/422202
http://www.iteye.com/problems/48197
  • sss.rar (262.3 KB)
  • 下载次数: 2
  • js.rar (32.7 KB)
  • 下载次数: 3
分享到：
| Sftp上传下载
评论
1 楼 mycrazystone 2017-02-23  
http://mailer.sencha.com/dc/0qpDKEI_VKmkEQujXIB4egZpDvNPj__RAQV_ItElkXPWP-VoNB0EEqvpJ29e3joJIFPsJzVUR7W55hST9rwmlsTj4M_90n0iyWZiEbh0ydyWHDrVit3XHp2ve0W-h0EHuM1nwSU-k-Z3h7SKkOo-q7LFgCQGWHdSkCpBgY3Xb4mHxOV11kVDb2_wZCkMnWZdgXru4fRPBUMahFJ-jp70_aD1lk9CZl_ZxNv6Rl1XTIziZ8kSMJK2HQFH_VT3qmBa/m100kZ10i0Ez7dNFE5P0WS0
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    extjs流程界面设计器参考_ExtJS工作流设计器_extjs工作流_extjs_

    ExtJS是一种广泛使用的JavaScript库，专门用于构建富客户端的Web应用程序。它提供了丰富的组件和工具，使得开发者可以创建出功能强大、用户界面友好的Web应用。在“extjs流程界面设计器参考”中，我们主要关注的是...

    extJs3升级extjs4方案

    ExtJS3 升级到 ExtJS4 方案 ExtJS3 升级到 ExtJS4 需要修改大量代码，主要是因为 ExtJS4 配备了一类新的系统，不向后兼容。在 ExtJS 3 里生成表的几个框架组件，ExtJS4 大多生成 div，这使得 CSS classes 将会失败...

    轻松搞定Extjs 带目录

    本书作为Extjs的中文教程，旨在帮助读者快速上手Extjs，其内容涉及Extjs的基础知识和实际应用。 #### 2. JavaScript基础知识 - **类的定义**: Extjs中的类继承于JavaScript原生类，通过Ext.extend来定义。这是...

    包含各种类型的extjs小图标，Extjs4小图标

    ExtJS 是一个流行的JavaScript框架，主要用于构建富客户端的Web应用程序。它提供了丰富的组件库、数据管理功能以及强大的用户界面（UI）元素。在标题和描述中提到的“Extjs4小图标”指的是ExtJS 4版本中使用的一系列...

    ExtJS 7.6 SDK trial

    ExtJS 是一个流行的JavaScript框架，用于构建富客户端的Web应用程序。它提供了丰富的用户界面组件、数据绑定机制和强大的API，使开发者能够创建功能强大的、响应式的桌面和移动应用。7.6版本是ExtJS的一个重要更新，...

    ExtJs3.3中文API.CHM_extjs3.3中文文档_

    ExtJS是一个广泛使用的JavaScript库，专门用于构建富客户端应用程序。版本3.3是该库的一个稳定版本，提供了许多功能和组件，使得Web开发者能够创建功能丰富的、交互性强的用户界面。这个“ExtJS3.3中文API.CHM”文档...

    ExtJS 7.7 SDK trial

    ExtJS 是一个强大的JavaScript框架，主要用于构建富客户端的Web应用程序，提供丰富的用户界面组件和强大的数据绑定机制。在"ExtJS 7.7 SDK trial"中，我们可以探索以下几个关键知识点： 1. **版本升级**：从7.7版本...

    EXTJS讲解个人项目经历

    EXTJS 是一个强大的JavaScript前端框架，它主要用于构建富客户端应用，提供丰富的用户界面组件和灵活的可定制性。EXTJS 的核心在于其组件化的架构，允许开发者构建复杂的UI布局和功能丰富的应用程序。以下是对EXTJS...

    ExtJS 界面设计器

    ExtJS是一款强大的JavaScript库，主要用于构建富客户端的Web应用程序。其界面设计器，正如标题所示，是一种可视化的开发工具，能够极大地提升开发效率和用户体验。这个工具允许开发者通过拖放组件和直观地调整属性来...

    extjs 3.4 开发前准备

    【EXTJS 3.4 开发前准备】 EXTJS 是一款强大的JavaScript库，主要用于构建桌面级的Web应用程序，提供丰富的用户界面组件和交互效果。3.4版本是EXTJS的一个重要里程碑，它提供了稳定的基础和丰富的组件库。本文将...

    EXTJS 多文件上传

    EXTJS 是一个强大的JavaScript 框架，专用于构建富客户端Web应用程序。在EXTJS中，`MultiFileUploadField` 是一个组件，它允许用户在单个操作中选择并上传多个文件，极大地提升了用户交互体验。这个功能对于处理大量...

    ExtJS官方帮助文档6.5.0

    ExtJS是一种广泛使用的JavaScript框架，专门用于构建富客户端Web应用程序。6.5.0是其一个重要的版本，引入了许多新特性、改进和扩展，特别是针对“morden”组件的增强，使得它更适合现代Web开发的需求。 在ExtJS ...

    extjs4.2 desktop 拓展

    ExtJS 4.2 Desktop 拓展是一个用于构建桌面样式的Web应用程序的框架，它提供了丰富的用户界面组件和交互效果。这个拓展是基于ExtJS 4.2版本，一个非常强大的JavaScript库，用于创建数据驱动、富客户端的Web应用。在...

    Extjs6示例中文版

    ### Extjs6示例中文版知识点详解 #### 1. ExtJS6简介及学习动机 ExtJS6是一款功能强大的客户端JavaScript框架，适用于构建复杂的企业级Web应用程序。由于中文学习资源较少，作者决定翻译一本名为《ExtJS6 By ...

    ExtJS经典皮肤集合

    ExtJS是一款功能强大的JavaScript前端框架，它为开发者提供了构建富客户端Web应用的工具。这款框架以其丰富的组件库、可定制的界面和强大的数据绑定机制而闻名。标题中的"ExtJS经典皮肤集合"指的是该框架中包含的一...

    extjs icon小图标

    ExtJS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件和功能，用于构建富客户端Web应用。在ExtJS中，图标（icon）是用于美化UI并提供视觉指示的重要元素。这些图标可以用于按钮、菜单项、工具栏等...

    extjs中文文档大全

    ExtJS是一种基于JavaScript的开源富客户端框架，用于构建桌面级的Web应用程序。它提供了一整套组件化的用户界面元素和强大的数据绑定机制，使得开发者能够创建功能丰富的、交互性强的Web应用。本文档集合包括了...

    extjs模拟excel表格

    ExtJS 是一个强大的JavaScript 框架，专用于构建富客户端Web应用程序。它提供了一整套组件库，包括用于创建类似Excel的表格的功能。在本文中，我们将深入探讨如何使用ExtJS来模拟Excel表格，以及实现Excel的各种功能...

    extjs 2000个 icon 图标素材

    ExtJS 是一个强大的JavaScript应用程序框架，它提供了丰富的用户界面组件和功能，用于构建富客户端Web应用。在ExtJS中，图标（icon）是用于增强UI视觉效果和用户体验的重要元素。这些图标通常用在按钮、菜单项、工具...

    基于EXTJS 的在线EXCEL编辑器

    EXTJS 是一个强大的JavaScript 框架，专用于构建富客户端Web应用程序。它提供了一整套组件化的用户界面元素和丰富的交互功能。基于EXTJS 的在线EXCEL编辑器，是利用EXTJS的强大功能来实现对Excel文件的在线创建、...

Magicbox
Global site tag (gtag.js) - Google Analytics