1. #11
    Sencha User galdaka's Avatar
    Join Date
    Mar 2007
    Location
    Spain
    Posts
    1,166
    Vote Rating
    -1
    galdaka is an unknown quantity at this point

      0  

    Default


    Is posible hightlight the drop-zone backgroung when you are over?

    Thanks in advance,

  2. #12
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default


    Quote Originally Posted by galdaka View Post
    Is posible hightlight the drop-zone backgroung when you are over?

    Thanks in advance,
    Yes.
    And I think it's possible to highlight the drop zones when you start dragging a window too. I'm working on it.

  3. #13
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    monsterjoe,

    this is beautifulllllll!

    Unluckily, it does not work with IE6, but I'd like to help you fixing the problems for IE6 as soon as I find a little bit of time....anyway, it is really a nice idea so congratulation...
    Regards

    Marco

  4. #14
    Ext User
    Join Date
    Aug 2007
    Posts
    22
    Vote Rating
    0
    monsterjoe is on a distinguished road

      0  

    Default


    Quote Originally Posted by mabello View Post
    monsterjoe,

    this is beautifulllllll!

    Unluckily, it does not work with IE6, but I'd like to help you fixing the problems for IE6 as soon as I find a little bit of time....anyway, it is really a nice idea so congratulation...
    Regards

    Marco

    Uploaded new version with a fix for ie6. I hope it's all ok this time.

  5. #15
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    Great job, it works fine now!
    Thanks for sharing and well done!!

  6. #16
    Ext JS Premium Member
    Join Date
    May 2007
    Posts
    698
    Vote Rating
    3
    danh2000 is on a distinguished road

      0  

    Default


    Hi MonsterJoe,

    I've just tested on IE6 again - it works great - well done.

    I've also tested on Opera 9.01 - functionally it works great, but there are a couple of minor visual hiccups..

    1. When dragging a window that is originally docked (not when starting from floating), part of the tab title text is selected - as shown here:



    2. Then very occassionally, as I move the window around, I get flickers of other elements becoming selected - like this (although this is only sometimes and depends on where you move the window):



    As soon as you drop the window on a target, the selected text is unselected and nothing looks wrong.

    These are minor issues considering the functionality that you are providing.

    This is really great - I think with a bit of polish, this will become a very popular user extension.

  7. #17
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    wow, that's sharp

  8. #18
    Ext JS Premium Member watrboy00's Avatar
    Join Date
    Aug 2007
    Location
    Minneapolis, MN
    Posts
    473
    Vote Rating
    0
    watrboy00 is on a distinguished road

      0  

    Default


    Nice work. I think this could possibly be modified for drag and drop tabs in a tab panel.
    Eric Berens
    Intranet Systems Manager @ Best Buy
    You should follow me on twitter here.

  9. #19
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,361
    Vote Rating
    81
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    iotw, dnd reordering?

  10. #20
    Sencha User
    Join Date
    Nov 2007
    Location
    London, UK
    Posts
    583
    Vote Rating
    -1
    mabello is an unknown quantity at this point

      0  

    Default


    I'm sure your extension will be one of the most high rated, it is really really nice.

    Trying to add a grid inside a docking panel, I found some problem when undocking the panel:

    That's the code
    PHP Code:
    <html>
    <
    head>
      <
    title>Complex Layout</title>
        <
    link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
         <
    script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript" src="../ext-all-debug.js"></script>
        <style type="text/css">
        html, body {
            font:normal 12px verdana;
            margin:0;
            padding:0;
            border:0 none;
            overflow:hidden;
            height:100%;
        }
        .blist {
            background-image: url(list-items.gif) !important;
        }
        ul.x-tab-strip {
            height: 21px;
        }
        .x-tab-strip-wrap-highlight {
            border: 1px solid black;
        }
        </style>
        <script type="text/javascript" src="Ext.ux.DockPanel.js"></script>
        <script type="text/javascript">
        
        var createGrid = function(){

        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'],
            ['AT&T Inc.',31.61,-0.48,-1.54,'9/1 12:00am'],
            ['Boeing Co.',75.43,0.53,0.71,'9/1 12:00am'],
            ['Caterpillar Inc.',67.27,0.92,1.39,'9/1 12:00am'],
            ['Citigroup, Inc.',49.37,0.02,0.04,'9/1 12:00am'],
            ['E.I. du Pont de Nemours and Company',40.48,0.51,1.28,'9/1 12:00am'],
            ['Exxon Mobil Corp',68.1,-0.43,-0.64,'9/1 12:00am'],
            ['General Electric Company',34.14,-0.08,-0.23,'9/1 12:00am'],
            ['General Motors Corporation',30.27,1.09,3.74,'9/1 12:00am'],
            ['Hewlett-Packard Co.',36.53,-0.03,-0.08,'9/1 12:00am'],
            ['Honeywell Intl Inc',38.77,0.05,0.13,'9/1 12:00am'],
            ['Intel Corporation',19.88,0.31,1.58,'9/1 12:00am'],
            ['International Business Machines',81.41,0.44,0.54,'9/1 12:00am'],
            ['Johnson & Johnson',64.72,0.06,0.09,'9/1 12:00am'],
            ['JP Morgan & Chase & Co',45.73,0.07,0.15,'9/1 12:00am'],
            ['McDonald\'s Corporation',36.76,0.86,2.40,'9/1 12:00am'],
            ['Merck & Co., Inc.',40.96,0.41,1.01,'9/1 12:00am'],
            ['Microsoft Corporation',25.84,0.14,0.54,'9/1 12:00am'],
            ['Pfizer Inc',27.96,0.4,1.45,'9/1 12:00am'],
            ['The Coca-Cola Company',45.07,0.26,0.58,'9/1 12:00am'],
            ['The Home Depot, Inc.',34.64,0.35,1.02,'9/1 12:00am'],
            ['The Procter & Gamble Company',61.91,0.01,0.02,'9/1 12:00am'],
            ['United Technologies Corporation',63.26,0.55,0.88,'9/1 12:00am'],
            ['Verizon Communications',35.57,0.39,1.11,'9/1 12:00am'],
            ['Wal-Mart Stores, Inc.',45.45,0.73,1.63,'9/1 12:00am']
        ];
        
        function renderTopic(value, p, record){
            return String.format(
                    '<b><a href="#" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
                    value, record.data.forumtitle, record.id, record.data.forumid);
        }
        // example of custom renderer function
        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;
        }

        // example of custom renderer function
        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;
        }

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


        // create the Grid
        var grid = new Ext.grid.GridPanel({
            region: 'center',
            store: store,
            columns: [
                {id:'company',header: "Company", width: 160, sortable: true, dataIndex: 'company', hidden: false},
                {header: "Price", width: 75, sortable: true, renderer: 'usMoney', dataIndex: 'price', hidden: false},
                {header: "Change", width: 75, sortable: true, renderer: change, dataIndex: 'change', hidden: false},
                {header: "% Change", width: 75, sortable: true, renderer: pctChange, dataIndex: 'pctChange', hidden: false},
                {header: "Last Updated", width: 85, sortable: true, renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange', hidden: true}
            ],
            stripeRows: true,
            autoExpandColumn: 'company',
            height:450,
            title:'Array Grid',
            viewConfig: {
                forceFit:true
            }
        });
        return grid;
    }
            Ext.onReady(function(){
                Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
                var south, east;
                var undockedpanel = new Ext.ux.DockPanel({
                    title: 'Dockable Panel',
                    html: 'Dockable Panel',
                    border: false,
                    header: false,
                    wwidth: 300,
                    wheight: 350,
                    ddGroup: 'dock-panels'
                });
                var dockedpanel = new Ext.ux.DockPanel({
                    title: 'Docked Panel',
                    layout: 'fit',
                    border: false,
                    header: false,
                    wwidth: 300,
                    wheight: 350,
                    items: [createGrid()],
                    ddGroup: 'dock-panels'
                });
                
                var viewport = new Ext.Viewport({
                    layout: 'fit',
                    items:[ new Ext.Panel({
                        layout:'border',
                        border: false,
                        items:[
                            new Ext.Panel({
                                layout: 'border',
                                region:'south',
                                title: '&nbsp;',
                                split:true,
                                height: 300,
                                minSize: 100,
                                maxSize: 400,
                                collapsible: true,
                                margins:'0 0 0 0',
                                items: [
                                    new Ext.Panel({
                                        layout: 'fit',
                                        title: '&nbsp;',
                                        split:true,
                                        minSize: 100,
                                        width: 400,
                                        region: 'west',
                                        collapsible: true,
                                        margins:'0 0 0 0',
                                        items: 
                                            south = new Ext.TabPanel({
                                                border:false,
                                                activeTab:0,
                                                frame: false,
                                                style: 'border:1px',
                                                plugins: [
                                                    new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels', highlightOnDrag:false})
                                                ]
                                            })
                                        
                                    }),
                                    new Ext.Panel({
                                        layout: 'fit',
                                        region: 'center',
                                        title: '&nbsp;',
                                        items:
                                            new Ext.TabPanel({
                                                border:false,
                                                activeTab:0,
                                                frame: false,
                                                style: 'border:1px',
                                                ddGroup: 'dock-panels',
                                                plugins: [
                                                    new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
                                                ]
                                            })
                                    })
                                ]
                            }),
                            {
                                region:'west',
                                title: '&nbsp;',
                                collapsible: true,
                                split:true,
                                width: 225,
                                minSize: 175,
                                maxSize: 400,
                                layout:'fit',
                                margins:'0 0 0 0',
                                items:
                                    new Ext.TabPanel({
                                        border:false,
                                        activeTab:0,
                                        enableTabScroll: true,
                                        plugins: [
                                            new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
                                        ]
                                    })
                            },
                            {
                                region:'east',
                                title: '&nbsp;',
                                collapsible: true,
                                split:true,
                                width: 225,
                                minSize: 175,
                                maxSize: 400,
                                layout:'fit',
                                margins:'0 0 0 0',
                                items:
                                    east = new Ext.TabPanel({
                                        border: false,
                                        activeTab:0,
                                        monitorResize: true,
                                        enableTabScroll: true,
                                        plugins: [
                                            new Ext.ux.DockTabPanelPlugin({ddGroup: 'dock-panels'})
                                        ]
                                    })
                            },
                            new Ext.TabPanel({
                                region:'center',
                                deferredRender:false,
                                activeTab:0,
                                items:[
                                    new Ext.Panel({
                                        title: 'center',
                                        html: 'center'
                                    }),
                                    new Ext.Panel({
                                        title: 'center2',
                                        html: 'center2'
                                    })
                                ]
                            })
                         ]
                    })]
                });
                dockedpanel.dock(south);
                undockedpanel.undock();
            });
        </script>
    </head>
    <body>
     </body>
    </html> 
    Anyway, as I said, great extension