Extjs4 表格式例子（2）

ExtJs Grid: "Remove Selected Record" Toolbar Button

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": "[email protected]", "phone": "555-111-1224" },
                { 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },
                { 'name': 'Homer', "email": "[email protected]", "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": "[email protected]", "phone": "555-111-1224" },
            { 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },
            { 'name': 'Homer', "email": "[email protected]", "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": "[email protected]", "phone": "555-111-1224" },
            { 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },
            { 'name': 'Homer', "email": "[email protected]", "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 Lines

Ext.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":"[email protected]","phone":"555-111-1224"},
                {'name':'Bart',"email":"[email protected]","phone":"555-222-1234"},
                {'name':'Homer',"email":"[email protected]","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": "[email protected]", "phone": "555-111-1224" },
				{ 'name': 'Bart', "email": "[email protected]", "phone": "555-222-1234" },
				{ 'name': 'Homer', "email": "[email protected]", "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":"[email protected]","phone":"555-111-1224",'progress': 25 },
                {'name':'Bart',"email":"[email protected]","phone":"555-222-1234",'progress': 50 },
                {'name':'Homer',"email":"[email protected]","phone":"555-222-1244",'progress': 75 },
                {'name':'Marge',"email":"[email protected]","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('
', 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":"[email protected]","phone":"555-111-1224"},
                {'name':'Bart',"email":"[email protected]","phone":"555-222-1234"},
                {'name':'Homer',"email":"[email protected]","phone":"555-222-1244"},
                {'name':'Marge',"email":"[email protected]","phone":"555-222-1254"}
            ]
        },
        tbar: [
            {
                text:'First Template',
                handler:function() {
                    this.up('grid').changeTemplate('name','{name} ({email})');
                }
            },
            {
                text:'Second Template',
                handler:function() {
                    this.up('grid').changeTemplate('name','{name} ({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":"[email protected]","phone":"555-111-1224"},
                {'name':'Bart',"email":"[email protected]","phone":"555-222-1234"},
                {'name':'Homer',"email":"[email protected]","phone":"555-222-1244"},
                {'name':'Marge',"email":"[email protected]","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('
', id);
                }
            }
        ],
        renderTo:'output'
    });
});