Extjs4 表格式例子（1）

最新推荐文章于 2017-05-21 21:17:00 发布
最新推荐文章于 2017-05-21 21:17:00 发布
阅读量3.2k 收藏 3
点赞数
分类专栏： extjs

ExtJs 4.1: Read complex json with hasOne association

Ext.define('User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name'],
    associations: [{ type: 'hasOne', model: 'Status', associationKey: 'status'}]
});

Ext.define('Status', {
    extend: 'Ext.data.Model',
    fields: [
        { name: 'id', type: 'int' },
        { name: 'title', type: 'string', mapping: 'st_title' }
    ]
});

Ext.onReady(function () {
    var store = Ext.create('Ext.data.ArrayStore', {
        model: 'User',
        data: [
            { id: '1', name: 'user-1', status: { id: 2, st_title: 'disabled'} },
            { id: '2', name: 'user-2', status: { id: 1, st_title: 'active'} },
            { id: '3', name: 'user-3', status: { id: 3, st_title: 'deleted'} },
            { id: '4', name: 'user-4', status: { id: 1, st_title: 'active'} },
            { id: '5', name: 'user-5', status: { id: 3, st_title: 'deleted'} }
        ],
        proxy: {
            type: 'memory',
            reader: {
                type: 'json'
            }
        }
    });

    Ext.widget({
        xtype: 'grid',
        title: 'Users',
        width: 400,
        height: 180,
        store: store,
        renderTo: 'output',
        columns: [
                { text: 'id', dataIndex: 'id' },
                { text: 'name', dataIndex: 'name' },
                {
                    text: 'status',
                    renderer: function (v, m, r) {
                        return r.getStatus().get('title');
                    }
                }
            ]
    });
});

ExtJs 4.1 TreeGrid Treecolumn Custom Icon

To set treecolumn icon you can use "iconCls" property. 
Ext.define('MenuItem', {
    extend: 'Ext.data.Model',
    idProperty: 'Id',
    fields: [
        { name: 'Id', type: 'string' },
        { name: 'Name', type: 'string' },
        { name: 'Disabled', type: 'bool' },
        {
            name: 'iconCls',
            type: 'string',
            convert: function (v, r) {
                return r.get('Disabled') ? 'icon-disabled' : 'icon-enabled'
            }
        }
    ]
});
 
Ext.define('MenuItemsTree', {
    extend: 'Ext.data.TreeStore',
    model: 'MenuItem',
    root: {
        expanded: true,
        Name: "My Root",
        children: [
            { Name: "Child 1", Disabled: false, leaf: true },
            {
                Name: "Child 2",
                Disabled: true,
                expanded: true,
                children: [
                    { Name: "GrandChild", Disabled: true, leaf: true }
                ]
            }
        ]
    }
});
 
Ext.onReady(function () {
    Ext.create('Ext.tree.Panel', {
        title: 'Simple Tree With Custom Icons',
        width: 400,
        height: 150,
        store: Ext.create('MenuItemsTree'),
        rootVisible: true,
        renderTo: 'output',
        columns: [
            { header: 'Name', dataIndex: 'Name', xtype: 'treecolumn', width: 150 },
            { header: 'Disabled', dataIndex: 'Disabled', width: 150 }
        ]
    });
});
.x-tree-icon.icon-enabled {
    margin: 7px 4px 0 4px;
    background: url("/content/images/li.gif") no-repeat scroll 0 -6px transparent;
    height: 6px;
    width: 6px;
}
.x-tree-icon.icon-disabled {
    margin: 7px 4px 0 4px;
    background: url("/content/images/li.gif") no-repeat scroll 0 0 transparent;
    height: 6px;
    width: 6px;
}

ExtJs 4: How To Add Grid Cell Tooltip


Ext.onReady(function () {
    // Init the singleton.  Any tag-based quick tips will start working.
    Ext.tip.QuickTipManager.init();
 
    Ext.widget('grid', {
        title: 'Users',
        store: {
            fields: ['name', 'email', 'comment'],
            data: [
                { 'name': 'Lisa', 'email': 'lisa@simpsons.com', 'comment': 'some comment' },
                { 'name': 'Bart', 'email': 'bart@simpsons.com', 'comment': 'comment' },
                { 'name': 'Homer', 'email': 'home@simpsons.com', 'comment': 'some very long comment' },
                { 'name': 'Marge', 'email': 'marge@simpsons.com', 'comment': 'some very very very very long comment' }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name', width: 100 },
            { header: 'Email', dataIndex: 'email', width: 150 },
            {
                header: 'comment',
                dataIndex: 'comment',
                flex: 1,
                renderer: function (value, meta, record) {
                    var max = 15;
                    meta.tdAttr = 'data-qtip="' + value + '"';
                    return value.length < max ? value : value.substring(0, max - 3) + '...';
                }
            }
        ],
        width: 400,
        renderTo: 'output'
    });
});

How To Change Grid Cell Background Color


Ext.onReady(function () {
    Ext.widget('grid', {
        title: 'Users',
        store: {
            fields: ['name', 'email', 'online'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "online": true },
                { 'name': 'Bart', "email": "bart@simpsons.com", "online": false },
                { 'name': 'Homer', "email": "home@simpsons.com", "online": true },
                { 'name': 'Marge', "email": "marge@simpsons.com", "online": true }
            ]
        },
        columns: [
            {
                header: 'Name',
                dataIndex: 'name',
                renderer: function (value, meta, record) {
                    meta.tdCls = record.get('online') ? 'user-online' : 'user-offline';
                    return value;
                }
            },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Online', dataIndex: 'online' }
        ],
        width: 400,
        renderTo: 'output'
    });
});

.x-grid-cell.user-online
{
    background-color: #9fc;
}
.x-grid-cell.user-offline
{
    background-color: #ffc;
}

How to render gridpanel in html element?

Ext.onReady(function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        width: 500,
        store: {
            fields: ['name', 'email', 'phone'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "phone": "555-111-1224" },
                { 'name': 'Bart', "email": "bart@simpsons.com", "phone": "555-222-1234" },
                { 'name': 'Homer', "email": "home@simpsons.com", "phone": "555-222-1244" }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Phone', dataIndex: 'phone' }
        ],
        renderTo: 'container'
    });
});
<div id="container"></div>

How To Render Image To Grid Field

Ext.onReady(function () {
    Ext.create('Ext.grid.Panel', {
        title: 'Simpsons',
        store: {
            fields: ['name', 'email', 'online'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "online": true },
                { 'name': 'Bart', "email": "bart@simpsons.com", "online": false },
                { 'name': 'Homer', "email": "home@simpsons.com", "online": true },
                { 'name': 'Marge', "email": "marge@simpsons.com", "online": true }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            {
                header: 'Online',
                dataIndex: 'online',
                align: 'center',
                width: 50,
                renderer: function (value, meta, record) {
                    var url = value == true ?
                        '/Content/images/icons/user-online.png' :
                        '/Content/images/icons/user-offline.png';
                    meta.tdCls = 'td-img';
 
                    return Ext.String.format('<img src="{0}" />', url);
                }
            }
        ],
        width: 400,
        renderTo: 'output'
    });
});
.td-img .x-grid-cell-inner{
    padding: 0;
}

How To Change Grid Row Background Color


Ext.onReady(function () {
    Ext.widget('grid', {
        title: 'Users',
        viewConfig: {
            stripeRows: false,
            trackOver: false,
            getRowClass: function (record, rowIndex, rowParams, store) {
                return record.get('online') ? 'user-online' : 'user-offline';
            }
        },
        store: {
            fields: ['name', 'email', 'online'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "online": true },
                { 'name': 'Bart', "email": "bart@simpsons.com", "online": false },
                { 'name': 'Homer', "email": "home@simpsons.com", "online": true },
                { 'name': 'Marge', "email": "marge@simpsons.com", "online": true }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Online', dataIndex: 'online' }
        ],
        width: 400,
        renderTo: 'output'
    });
});
.x-grid-row.user-online .x-grid-cell
{
    background-color: #9fc;
}
.x-grid-row.user-offline .x-grid-cell
{
    background-color: #ffc;
}

How To Change Grid Column Background Color

Ext.onReady(function () {
    Ext.widget('grid', {
        title: 'Users',
        store: {
            fields: ['name', 'email', 'online'],
            data: [
                { 'name': 'Lisa', "email": "lisa@simpsons.com", "online": true },
                { 'name': 'Bart', "email": "bart@simpsons.com", "online": false },
                { 'name': 'Homer', "email": "home@simpsons.com", "online": true },
                { 'name': 'Marge', "email": "marge@simpsons.com", "online": true }
            ]
        },
        columns: [
            { header: 'Name', dataIndex: 'name', tdCls: 'custom-column' },
            { header: 'Email', dataIndex: 'email', flex: 1 },
            { header: 'Online', dataIndex: 'online' }
        ],
        width: 400,
        renderTo: 'output'
    });
});
.x-grid-row .custom-column
{
    background-color: #ffc; 
}

ExtJS 4.1 Grid Infinite Scroll In MVC


// /scripts/app/model/User.js
Ext.define('AM.model.User', {
    extend: 'Ext.data.Model',
    fields: ['id', 'name', 'email']
});
 
// /scripts/app/store/Users.js
Ext.define('AM.store.Users', {
    extend: 'Ext.data.Store',
    model: 'AM.model.User',
    autoLoad: true,
    remoteSort: true,
    buffered: true,
    pageSize: 100,
    proxy: {
        type: 'ajax',
        url: '/postdata/list',
        limitParam: 'size',
        reader: {
            type: 'json',
            root: 'data',
            successProperty: 'success'
        }
    }
});
 
// /scripts/app/view/user/List.js
Ext.define('AM.view.user.List', {
    extend: 'Ext.grid.Panel',
    alias: 'widget.userlist',
    title: 'All Users',
    store: 'Users',
    initComponent: function () {
        this.columns = [
            { header: 'Id', dataIndex: 'id', width: 50 },
            { header: 'Name', dataIndex: 'name', flex: 1 },
            { header: 'Email', dataIndex: 'email', flex: 1 }
        ];
        this.callParent(arguments);
    }
});
 
// /scripts/app/controller/Users.js
Ext.define('AM.controller.Users', {
    extend: 'Ext.app.Controller',
    stores: [
        'Users'
    ],
    models: [
        'User'
    ],
    views: [
        'user.List'
    ],
    init: function () {
         
    }
});
 
// /scripts/app/app.js
Ext.Loader.setConfig({ enabled: true });
Ext.application({
    name: 'AM',
    appFolder: 'scripts/app',
    controllers: [
        'Users'
    ],
    launch: function () {
        Ext.widget('userlist', {
            title: 'User List',
            width: 600,
            height: 400,
            renderTo: 'output'
        });
    }
});









kill522
关注
专栏目录
extjs4 项目例子
02-07
这个项目里面包含了本人从开始初学EXTJS4的全部事例：grid、tree、chart图表、文件上传、mvc、还有用户信息注册。里面的一些难点、要点都加了注释，还有一个file.txt文件是本人的小小总结，还没完整。我也是一个第一次接触EXT的初学者，只希望能与大家共享、学习，许多不到的地方希望大家能体谅，用myeclipse8.6运行项目，数据库用mysql，大家给力，免费下载。
Extjs4的TreeGrid例子
11-11
在"Extjs4的TreeGrid例子"这个主题中，我们将深入探讨TreeGrid的各种特性，以及如何在实际项目中应用这些示例。 1. **多语言支持**：描述中提到的"多语言"功能在ExtJS 4中通常通过i18n（国际化）实现。开发人员可以...
最简单的ExtJS4的MVC实例
web开发
08-11 204
最简单的ExtJS4的MVC实例 从ExtJS4.0开始，ExtJS支持MVC架构，让前端开发者更好的实现数据与逻辑分离，使用 View, Controller, Model组件定义来完成浏览器前端业务。提高代码可以维护性。ExtJS中 的View是被动模式，被Controller持有。 一个最简单的基于ExtJS4的MVC的App实例，有Contoller， V...
extjs4最简单的例子
01-27 84
extjs4最简单的例子 Ext.application({ name: 'AM', appFolder: 'app', launch: function() { Ext.create('Ext.container.Vie...
ExtJS 4 数据包的演示例子
zhangxin09的专栏
02-15 5052
在这份演示中，我们向大家透露了数据包崭新的功能有哪些。假设例子是个简单的博客程序，博客的模型有用户User ，帖子Post 及评论Comment 。例子依赖服务器的远程调用须要部署在一个服务器上，静态服务器即可。 1.创建一个模型的实例首先要创建一个User模型的实例。需要指出的是，这里的User变量是一个全局变量。虽然全局变量应该慎重使用，但如果这里只是一个例子的话所以直接用上了。User是一个模型类。var frank = new User({ name: 'Frank Cheung'
EXTJS 4 树形表格组件使用演示样例
weixin_33817333的博客
05-21 265
EXTJS 4 树形表格组件使用演示样例 一、总体效果图 二、使用说明及效果图 2.1、程序代码及说明： 2.1.1、表格存储部分的代码说明 //开启tooltip工具 Ext.QuickTips.init(); //定义model Ext.define('partModel', { ...
ExtJS 表格面板GridPanel完整例子
03-23
ExtJS表格面板（GridPanel）是Sencha Ext JS框架中的一个核心组件，它用于展示大量结构化数据。在本文中，我们将深入探讨如何创建并使用一个完整的ExtJS GridPanel实例，以及与其相关的源码和工具。 首先，让我们...
extjs动态表格例子
06-14
extjs动态表格例子
extjs4-ssi例子
08-21
1. ExtJS 4组件模型：了解如何使用Grid、Form、Tree、Menu等组件构建用户界面。 2. 数据绑定：学习如何将后台数据与前端组件绑定，实现动态数据展示。 3. SSI集成：理解如何在服务器端利用SSI技术提高页面的效率，...
Extjs 表格
06-17
下面将详细探讨ExtJS表格的这些功能。 1. **创建表格** 创建一个ExtJS表格首先需要定义一个`Ext.grid.Panel`实例，设置其配置项，包括数据源、列定义、存储配置等。例如： ```javascript var grid = Ext.create...
extjs4实例
03-26
NULL 博文链接：https://wcf0987.iteye.com/blog/1166232
一个extjs表格的实例
06-17
extjsDemo2 form panel 一个extjs的demo。1、描绘了表格的属性；2、一个简单的页面布局。供参考。
extjs4登陆小例子
07-17
extjs4是权限 网络分享资料中修改而来。 extjs4+ spring3 + hibernate3.3+ struts2.1.8 + mysql5.04+ xp + myEclipse 8.5 测试通过 。 extjsdemo.rar
ExtJs4 详细、讲解例子
12-29
ExtJs4 详细、讲解例子，网上搜索的一些例子，拉下来的
extjs四个例子，一个中文API
02-23
新手学习，初学extjs时用刚刚好，里边有三个例子，还有一个我自己写的例子（简单粗暴动态菜单），还有一个中文API
EXTJS4 MODEL例子
千里之行，始于足下
03-08 910
Data Model Conversion Function Ext.onReady(function () { Ext.define('User', { extend: 'Ext.data.Model', fields: [ { name: 'id', type: 'int' }, { name: 'nam
Extjs 4 MVC 例子
jimchenchen的博客
04-17 102
Sencha Docs ExtJs 4.0 MVC例子   目录结构如下：     代码:index.html &lt;html&gt; &lt;head&gt; &lt;title&gt;Account Manager&lt;/title&gt; &lt;link rel="stylesheet" type="text/css" href=&quot
ExtJS 4 实例之数据包
nuoyan666的专栏
08-02 1582
本章介绍Extjs 4中数据包崭新的功能有哪些。假设例子是个简单的博客程序，博客的模型有用户User ，帖子Post 及评论Comment 。例子依赖服务器的远程调用须要部署在一个服务器上，静态的文件服务器即可。    一、创建一个模型的实例： 首先要创建一个User模型的
extjs grid表格导出excel的完整例子
最新发布
03-27
以下是一个使用ExtJS 4.2.1的完整例子，可以将Grid表格导出为Excel文件： ``` Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.util.*', 'Ext.toolbar.Paging', 'Ext.ux.exporter.Exporter' ]); Ext.onReady...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值