1. #1
    Ext JS Premium Member KimSchneider's Avatar
    Join Date
    Jul 2008
    Location
    Germany
    Posts
    68
    Vote Rating
    0
    KimSchneider is on a distinguished road

      0  

    Default Portal + Custom Grids by XType

    Portal + Custom Grids by XType


    Hi all,
    I got the following problem:

    I've customized the portal example, now I can store the state of each portlet into the database and create the portlet from the saved data.

    Every component within the portlet has got a getConfig function which returns the state and the xtype of the component, so I don't need to call any constructors.

    Example:
    Code:
    {xtype:'column', items : [{xtype:'portlet', items:[{xtype: 'grid.agenterrors'}] }] }
    It works so far and fits my needs, BUT I've got a couple of rendering issues. After I drop a portlet, the basebars of its items disapear, blue bars appear and so on. Another thing is, grid can't be ordered by column click.

    This is some example code of an portlet item that's instantiated by xtype:
    Code:
    Ext.namespace('SE3.grid');
    
    SE3.grid.AgentErrors = Ext.extend(Ext.grid.GridPanel, {
        oStore : null,
        sTitle : L10N.get('title_errors'),
        sIcon : 'title_ERROR',
        sEmptyMsg : L10N.get('no_errors', 'grid'),
        
        height : 172,
    
        initComponent : function() {
            this.init();
    
            var gridView = getGridEmptyMsg(this.sEmptyMsg);
    
            Ext.apply(this,{
                autoExpandColumn : 'colMessage',
                stripeRows: true,
                trackMouseOver: true,
                view : gridView,
                sm: new Ext.grid.RowSelectionModel({
                    singleSelect:true
                }),
                columns : [{
                    dataIndex : 'icon',
                    width: 25,
                    renderer : function(value, metadata, record) {
                        return '<div class="columnImg"><img src="'+ value +'" width="16" height="16"/></div>';
                    },
                    sortable : true
                },{
                    header: L10N.get('name'),
                    dataIndex: 'name',
                    sortable : true
                },{
                    id : 'colMessage',
                    header: L10N.get('message'),
                    dataIndex: 'message',
                    sortable : true
                },{
                    header: L10N.get('work_by'),
                    dataIndex: 'worker',
                    sortable : true
                }]
            });
    
            this.on('rowdblclick', function(grid, rowIndex){
                var r = grid.getStore().getAt(rowIndex);
                Navigation.centerAndFocus(r.get('id'));
            });
    
            SE3.grid.AgentErrors.superclass.initComponent.call(this);
        },
    
        init : function() {
            this.oStore = new SE3.data.DashboardStore({
                parentStore : NodeStore.store,
                filter : function(record, id) {
                    if(record.get('type') != Constants.TYPE_AGENT) {
                        return false;
                    }
    
                    if(record.get('status') != Constants.STATUS_ERROR) {
                        return false;
                    }
    
                    return true;
                },
                grouped : true
            });
    
            this.store = this.oStore.store;
        }
    });
    
    Ext.reg('se3.grid.agenterrors', SE3.grid.AgentErrors);
    Attached, some screenshots before and after dnd.

    Right now I'm calling doLayout on the portal after a portlet is dropped but that doesn't seem to do anything. If I resize the page, basebars appear again.

    Anyone's got an idea? Thanks!

    EDIT: Grouping doesn't work, too. Added a grouping store and groupview to my grid, nothing happens and no data visible
    Attached Images
    Kim Schneider
    Lead Developer

    Server-Eye
    Alte Koßmannschule
    Koßmannstraße 7
    66571 Eppelborn
    Germany

    Email: kim.schneider@server-eye.de
    Homepage: www.server-eye.de

    Do you know our revolution in network- and servermonitoring?
    www.server-eye.de