Extjs4 表格式例子（2）

Ext.onReady(function () {    Ext.define('Ext.ux.DeleteButton', {        extend: 'Ext.button.Button',        alias: 'widget.delbutton',        text: 'Remove Selected Record',        handler: function () {            var grid = this.up('grid');            if (grid) {                var sm = grid.getSelectionModel();                var rs = sm.getSelection();                if (!rs.length) {                    Ext.Msg.alert('Info', 'No Records Selected');                    return;                }                Ext.Msg.confirm('Remove Record', 'Are you sure?', function (button) {                    if (button == 'yes') {                        grid.store.remove(rs[0]);                    }                });            }        }    });     Ext.create('Ext.grid.Panel', {        title: 'Simpsons',        width: 500,        tbar: [{ xtype: 'delbutton'}],        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: 'output'    });});

How To Make Every Grid Able To Create It's Own Store Instance? - Part 2

Ext.onReady(function () {    Ext.define('App.MyStore', {        extend: 'Ext.data.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" }        ]    });    Ext.define('App.MyForm', {        extend: 'Ext.window.Window',        alias: 'widget.myform',        title: 'Simpsons',        width: 500,        layout: 'fit',        initComponent: function () {            var store = Ext.create('App.MyStore');            this.items = [{                xtype: 'grid',                store: store,                columns: [                    { header: 'Name', dataIndex: 'name' },                    { header: 'Email', dataIndex: 'email', flex: 1 },                    { header: 'Phone', dataIndex: 'phone' }                ]            }];            this.callParent(arguments);        }    });    Ext.widget('button', {        text: 'First Test Grid',        renderTo: 'output',        handler: function () {            Ext.widget('myform', {                title: 'First Test Grid',                border: false,                autoShow: true            });        }    });    Ext.widget('button', {        text: 'Second Test Grid',        renderTo: 'output',        handler: function () {            Ext.widget('myform', {                title: 'Second Test Grid',                border: false,                autoShow: true            });        }    });});

How To Make Every Grid Able To Create It's Own Store Instance??

Ext.onReady(function () {    Ext.define('App.MyStore', {        extend: 'Ext.data.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" }        ]    });    Ext.define('App.MyGrid', {        extend: 'Ext.grid.Panel',        alias: 'widget.mygrid',        title: 'Simpsons',        width: 500,        initComponent: function () {            this.store = Ext.create('App.MyStore');            this.callParent(arguments);        },        columns: [            { header: 'Name', dataIndex: 'name' },            { header: 'Email', dataIndex: 'email', flex: 1 },            { header: 'Phone', dataIndex: 'phone' }        ]    });    Ext.widget('mygrid', {        title: 'First Test Grid',        renderTo: 'output'    });    Ext.widget('mygrid', {        title: 'Second Test Grid',        margin: '5 0 0 0',        renderTo: 'output'    });});

Hide/Show Grid Column LinesExt.onReady(function() { Ext.create('Ext.grid.Panel', { title:'Simpsons', width: 500, tbar: [ { text:'Show Column Lines', handler:function() { this.up('grid').setColumnLines(true); } }, { text:'Hide Column Lines', handler:function() { this.up('grid').setColumnLines(false); } } ], 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:'output' });});

Hide/Show Grid's Body

Ext.onReady(function () {Ext.create('Ext.grid.Panel', {title: 'Simpsons',width: 500,bodyStyle: 'visibility: hidden;',tbar: [{text: 'Show Body',handler: function () {this.up('grid').body.show();}},{text: 'Hide Body',handler: function () {this.up('grid').body.hide();}}],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: 'output'});});

ExtJS 4 Readonly Checkbox Column

.x-grid-checkheader{    background:url('/Content/images/icons/unchecked.gif')no-repeatcenter center;}.x-grid-checkheader-checked{    background:url('/Content/images/icons/checked.gif')no-repeat center center;}

Ext.Loader.setConfig({    enabled:true,    paths: {        'Ext.ux':'/Scripts/ext/ext-4.0.7-gpl/ux'    }}); Ext.require(['Ext.ux.CheckColumn']); Ext.onReady(function() {    Ext.define('User', {        extend:'Ext.data.Model',        fields: [            { name: 'id', type: 'int'},            { name: 'name', type: 'string'},            { name: 'active', type: 'boolean'}        ]    });     Ext.create('Ext.grid.Panel', {        title:'Users',        width: 400,        store: Ext.create('Ext.data.Store', {            model:'User',            data: [                { id: 1, name: 'name 1', active: false},                { id: 2, name: 'name 2', active: true},                { id: 3, name: 'name 3', active: true}            ]        }),        columns: [            { header: 'id', dataIndex: 'id'},            { header: 'name', dataIndex: 'name', flex: 1 },            { header: 'active', dataIndex: 'active', xtype: 'checkcolumn', processEvent: function() { returnfalse; } }        ],        renderTo:'output'    });});

Filter Window For Grid

Ext.onReady(function() {    Ext.define('App.store.Books', {        extend:'Ext.data.Store',        fields: ['id','title','author'],        data: [            { id: 1, title: 'Learning Ext JS', author: 'Shea Frederick' },            { id: 2, title: 'Ext JS Projects with Gears', author: 'Frank Zammetti' },            { id: 3, title: 'Ext JS in Action', author: 'Jesus D. Garcia' },            { id: 4, title: 'Java Precisely', author: 'Peter Sestoft' },            { id: 5, title: 'Mastering C++', author: 'K. R. Venugopal' }        ]    });     Ext.define('App.view.BooksList', {        extend:'Ext.grid.Panel',        alias:'widget.bookslist',        title:'Books List',        store:'Books',        initComponent:function() {            this.tbar = [                {                    text:'Filter',                    action:'filter',                    iconCls:'filter-add'                }            ];            this.columns = [                { header: 'Id', dataIndex: 'id', width: 50 },                { header: 'Title', dataIndex: 'title', flex: 1 },                { header: 'Author', dataIndex: 'author'}            ];            this.callParent(arguments);        }    });     Ext.define('App.view.BooksFilter', {        extend:'Ext.window.Window',        alias:'widget.booksfilter',        title:'Books Filter',        width: 350,        layout:'fit',        resizable:false,        closeAction:'hide',        modal:true,        items: [            {                xtype:'form',                layout:'anchor',                bodyStyle: {                    background:'none',                    padding:'10px',                    border:'0'                },                defaults: {                    xtype:'textfield',                    anchor:'100%'                },                items: [                    {                        name:'title',                        fieldLabel:'Title'                    },                    {                        name:'author',                        fieldLabel:'Author'                    }                ]            }        ],        buttons: [            {                text:'OK',                action:'filter'            },            {                text:'Reset',                handler:function() { this.up('window').down('form').getForm().reset(); }            },            {                text:'Cancel',                handler:function() { this.up('window').close(); }            }        ]    });     Ext.define('App.controller.Books', {        extend:'Ext.app.Controller',        stores: ['Books'],        views: ['BooksList','BooksFilter'],        refs: [            {                ref:'filterWindow',                xtype:'booksfilter',                selector:'booksfilter',                autoCreate:true            }        ],        init:function() {            this.control({                'bookslist > toolbar > button[action=filter]': {                    click:this.onFilter                },                'booksfilter button[action=filter]': {                    click:this.doFilter                }            });        },        onFilter:function() {            varwin = this.getFilterWindow();            win.show();        },        doFilter:function() {            varwin = this.getFilterWindow();            varstore = this.getBooksStore();            varvalues = win.down('form').getValues();            varfilters = [];             for(varp invalues) {                varvalue = values[p];                if(value) {                    filters.push({ property: p, value: value });                }            }             win.close();             if(filters.length) {                store.clearFilter(true);                store.filter(filters);            }else{                store.clearFilter();            }        }    });     Ext.application({        name:'App',        controllers: ['Books'],        launch:function() {            Ext.widget('bookslist', {                width: 400,                renderTo:'output'            });        }    });});

.filter-add{    background-image:url('/content/images/icons/filter-add.png');}

?

Progress Bar Inside A Grid Cell

Ext.onReady(function() {    Ext.create('Ext.grid.Panel', {        title:'Simpsons',        width: 500,        height: 200,        store: Ext.create('Ext.data.Store', {            fields: ['name','email','phone','progress'],            data: [                {'name':'Lisa',"email":"lisa@simpsons.com","phone":"555-111-1224",'progress': 25 },                {'name':'Bart',"email":"bart@simpsons.com","phone":"555-222-1234",'progress': 50 },                {'name':'Homer',"email":"home@simpsons.com","phone":"555-222-1244",'progress': 75 },                {'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254",'progress': 100 }            ]        }),        columns: [            { header: 'Name', dataIndex: 'name'},            { header: 'Email', dataIndex: 'email', flex: 1 },            { header: 'Phone', dataIndex: 'phone'},            {                header:'Progress',                dataIndex:'progress',                width: 110,                renderer:function(v, m, r) {                    varid = Ext.id();                    Ext.defer(function() {                        Ext.widget('progressbar', {                            renderTo: id,                            value: v / 100,                            width: 100                        });                    }, 50);                    returnExt.String.format('<div id="{0}"></div>', id);                }            }        ],        renderTo:'output'    });});

How To Change A Column Template On The Rendered Grid Column?

Js Code

Ext.onReady(function() {    Ext.define('Ext.grid.column.UpdatableTemplate', {        extend:'Ext.grid.column.Column',        alias:'widget.updatabletemplatecolumn',        requires: ['Ext.XTemplate'],        constructor:function(cfg) {            varme = this;            me.callParent(arguments);            me.tpl = (!Ext.isPrimitive(me.tpl) && me.tpl.compile) ? me.tpl : Ext.create('Ext.XTemplate', me.tpl);            me.renderer = function(value, p, record) {                vardata = Ext.apply({}, record.data, record.getAssociatedData());                returnme.tpl.apply(data);            };        },        setTemplate:function(tpl) {            this.tpl = Ext.create('Ext.XTemplate', tpl);        }    });     Ext.create('Ext.grid.Panel', {        title:'Simpsons',        width: 500,        height: 200,        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"},                {'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254"}            ]        },        tbar: [            {                text:'First Template',                handler:function() {                    this.up('grid').changeTemplate('name','<b>{name}</b> ({email})');                }            },            {                text:'Second Template',                handler:function() {                    this.up('grid').changeTemplate('name','<b>{name}</b> ({phone})');                }            }        ],        columns: [            { header: 'Name', dataIndex: 'name', xtype: 'updatabletemplatecolumn', tpl: '{name}', flex: 1 }        ],        changeTemplate:function(column, tpl) {            Ext.Array.each(this.columns,function(item) {                if(item.dataIndex == column) {                    item.setTemplate(tpl);                    returnfalse;                }            });            this.getView().refresh();        },        renderTo:'output'    });});

How Add Dynamic Button In Grid Panel Column Using Renderer?

?

Js Code

Ext.onReady(function() {    Ext.create('Ext.grid.Panel', {        title:'Simpsons',        width: 500,        height: 200,        store: Ext.create('Ext.data.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"},                {'name':'Marge',"email":"marge@simpsons.com","phone":"555-222-1254"}            ]        }),        columns: [            { header: 'Name', dataIndex: 'name'},            { header: 'Email', dataIndex: 'email', flex: 1 },            { header: 'Phone', dataIndex: 'phone'},            {                header:'Buttons',                renderer:function(v, m, r) {                    varid = Ext.id();                    Ext.defer(function() {                        Ext.widget('button', {                            renderTo: id,                            text:'Edit: ' + r.get('name'),                            width: 75,                            handler:function() { Ext.Msg.alert('Info', r.get('name')) }                        });                    }, 50);                    returnExt.String.format('<div id="{0}"></div>', id);                }            }        ],        renderTo:'output'    });});

?