1. #11
    Sencha User
    Join Date
    Sep 2011
    Posts
    13
    Vote Rating
    0
    zzerk is on a distinguished road

      0  

    Default


    I could display a dashboard thanks to your code however, I am a bit confused about how to handle user actions.

    I assume that clicking on one of the icon of your dashboard will trigger the display of new panels, but cannot find how to do this (typically by having the method OnTapEvent of my main panel being called)

    Below is my code:
    Code:
    //
    // Create the main application screen (dashboard)
    //
    // The class provides three public functions:
    // - initComponent: actual screen initialisation
    // - buildTopDockToolbar: create the title bar on top of screen
    // - buildDashboard: create the dashboard itself
    // - onItemTap: respond to tap event (at least trying to!)
    //
    bat.AppDashboard = Ext.extend(Ext.Panel,
    {
        layout: 'fit',
        style: "background-color: #ffe",
    
        //
        // initComponent: Initialisation of the new panel
        //
        initComponent: function()
         {
            console.log('BAT::AppDashBoard.InitComponent()');
    
            // Create the toolbar and the dashboard
            // and store them in the current panel
            this.dockedItems = [this.buildTopDockToolbar()];
            this.items       = [this.buildDashboard()];
    
            // superclass initialisation
            bat.AppDashboard.superclass.initComponent.call(this);
        },
    
        //
        // Creation of the top toolbar
        //
        buildTopDockToolbar: function()
         {
            console.log('BAT::AppDashBoard.buildTopDockToolbar()');
            return {
                xtype: 'toolbar',
                dock:  'top',
                title: 'BAT v1'
            };
        },
    
        //
        // Respond to tap item
        //
        onItemTap: function(btn)
        {
            console.log('BAT::AppDashBoard.onItemTap()');  
            // would like to have this called from the dashboard
        },
    
    
        //
        // Creation of the dashboard
        //
        buildDashboard: function() 
        {
            console.log('BAT::AppDashBoard.buildDashboard()');
    
            var dashboardCfg =
             {
                defaultCls: 'dashboardButton',
                cols: 3,
                rows: 3,
                title: 'Dashboard',
                cells: [
                    { id: 'calendar', label: 'Calendrier',  icon: 'assets/icons/dashboard/calendar.png' },
                    { id: 'artists',  label: 'Artistes',    icon: 'assets/icons/dashboard/artists.png' },
                    { id: 'pubs',     label: 'Bars',        icon: 'assets/icons/dashboard/pubs.png' },
                    { id: 'buzz',     label: 'Buzz',        icon: 'assets/icons/dashboard/buzz.png' },
                    { id: 'radar',    label: 'Radar',       icon: 'assets/icons/dashboard/radar.png' },
                    { id: 'tips',     label: 'Pratique',    icon: 'assets/icons/dashboard/tips.png' },
                    { id: 'partners', label: 'Partenaires', icon: 'assets/icons/dashboard/partners.png' },
                    { id: 'about',    label: 'A propos',    icon: 'assets/icons/dashboard/about.png' },
                ],
                tpl: '<center><img src="{icon}" title="{label}" width="54" height="54" /><br/><span>{label}</span></center>',
                selectionCallback: this.onItemTap
            };
            return new GridView(dashboardCfg);
        }
    });

  2. #12
    Sencha User Eraser's Avatar
    Join Date
    Apr 2011
    Location
    Germany
    Posts
    11
    Vote Rating
    0
    Eraser is on a distinguished road

      0  

    Default


    Hi Ben,

    do you have a custom CSS definition for the class "dashboardButton"? How does it look like? Could you also share this please?

    Regards,

  3. #13
    Sencha User
    Join Date
    Aug 2011
    Location
    London
    Posts
    407
    Vote Rating
    18
    digeridoopoo will become famous soon enough

      0  

    Default Any luck?

    Any luck?


    I think I managed to get the click listeners working properly for the unique items.

    If you replace the code with this bit:

    Code:
    var thisCell = new Ext.Panel({
    title: args.cells[cellIndex].label,
    cls: 'dashboardButton',
    layout: { type: 'vbox', align: 'center', pack: 'center' },
    id: args.cells[cellIndex].id,
    items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
    listeners: {
    click: {
    element: 'el', //bind to the underlying el property on the panel
    fn: function(){ console.log(this.getAttribute('id') + ' was clicked'); }
            },
             } 
                        });
                    }
                    else
    ..etc.

    ...then when you check the console log it mentions 'You clicked on'...then the name.

    Hope this helps somebody so the next step is to add the unique popups for the individual thumbnails

    :-)

    Digeridoopoo

  4. #14
    Sencha User
    Join Date
    Jun 2010
    Posts
    15
    Vote Rating
    0
    amrishodiq is on a distinguished road

      0  

    Default


    Hi Ben Major,
    Thanks for sharing the code. I tried it my self. It works like as a grid like you said. I'm able to reproduce the look like yours minus the icons and the css for the label.

    By the way, I'm not sure that this code is finished for creating a behaviour like facebook's dashboard. I still cannot produce on click (or any event that occurs when user press one of the icon). Would you share any other code for that? Or maybe it's just me that mistaken?

    Do I have to customize this fn function?
    Thanks in advance.

    Code:
    listeners: {                            
       tap: {
           element: 'el',
            fn: function() {
                rootPanel.setActiveItem(screens[this.id], {
                    type: 'slide'
                 });
             }
         }
    }

  5. #15
    Sencha User
    Join Date
    Nov 2011
    Location
    India
    Posts
    25
    Vote Rating
    0
    m4manas is on a distinguished road

      0  

    Default


    First and foremost Many thanks for BenMajor for perfecting this dashboard component. It works great.

    I got my 2 cents on this. The event listener should not be bound in the grid in each cell. That will clog up the memory and cause the app to crash on iPad and iPhones.

    The better way would be to user event delegation.
    http://www.sencha.com/blog/event-del...n-sencha-touch

    This will ensure we define only one listner and that will capture all the events. Regarding firing custom call on each event it can be filtered using the parameters returned by the listeners and appropriate method can be dispatched.

    Code:
    this.addListener({
          body: {
              tap: this.onDashboardTap,
              delegate: 'img'
          }
        });
          
    
    onDashboardTap: function(a, b, c, d){
            console.log('Tapped');
            console.log(a);
            console.log(b);
            console.log(c);
                                    
        },

  6. #16
    Sencha User
    Join Date
    Mar 2012
    Posts
    14
    Vote Rating
    0
    bhavin is on a distinguished road

      0  

    Default


    i m not that much experienced developer of sencha touch, i still successfully implement this "GridView" but i am not able to understand the "
    /\{(\w+)\}/g
    " code at line "
    items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
    " .....

    thanx in advance.....

  7. #17
    Sencha User
    Join Date
    Feb 2012
    Location
    Delhi, India
    Posts
    94
    Vote Rating
    0
    Abhishek Srivastava is on a distinguished road

      0  

    Default


    very helpful thread........

  8. #18
    Sencha User
    Join Date
    May 2012
    Posts
    7
    Vote Rating
    0
    dnkupfer is on a distinguished road

      0  

    Default Perfect example

    Perfect example


    Hi everyone,

    this thread discuss exactly what I'm trying to achieve (a menu grid of icons that can be clicked and navigate to different sections). I've tried to implement the code provided by BenMajor but my icons are superimposing each other in one line (like Sakoz mentioned). That's probably because I've also replaced Ext.Carousel with Ext.Panel because Carousel was giving me the following error:

    TypeError: 'undefined' is not a constructor (evaluating 'new Ext.Carousel')

    Any help will be much appreciated. Please find below my code.

    Thanks,
    Daniel

    Code:
    
    Ext.application({
        name: 'MyApp',
    
    
        launch: function() {
    
    
            var dashboardCfg = {
                defaultCls: 'dashboardButton',
                cols: 3,
                rows: 3,
                title: 'Dashboard',
                cells: [
                    { id: 'profile', label: 'Profile', icon: 'resources/images/test_img.png' },
                    { id: 'friends', label: 'Friends', icon: 'resources/images/test_img.png' },
                    { id: 'networks', label: 'Networks', icon: 'resources/images/test_img.png' },
                    { id: 'search', label: 'Search', icon: 'resources/images/test_img.png' },
                    { id: 'messages', label: 'Messages', icon: 'resources/images/test_img.png' },
                    { id: 'requests', label: 'Requests', icon: 'resources/images/test_img.png' },
                    { id: 'map', label: 'Map', icon: 'resources/images/test_img.png' },
                    { id: 'lock', label: 'Lock', icon: 'resources/images/test_img.png' },
                    { id: 'settings', label: 'Settings', icon: 'resources/images/test_img.png' },
                ],
                tpl: '<img src="{icon}" title="{label}" width="48" height="48" /><span>{label}</span>'
            };
    
    
            // This is a custom method for making a dashboard:
            var GridView = function(args)
            {   
                var totalItems = args.cells.length;
                var maxBtnsPerPane = args.cols * args.rows;
                var noPanes = Math.ceil(totalItems / maxBtnsPerPane);
                var panes = [];
                var cellIndex = 0;
                var showIndicator;
    
    
                // Create the panes:
                for(var i = 0; i < noPanes; i++)
                {
                    panes[i] = new Ext.Panel({
                        title: 'Dashboard' + (i + 1),
                        layout: { type: 'vbox', align: 'stretch' },
                        pack: 'center',
                        defaults: { flex: 1 }
                    });
                    
                    var thisCount = i + maxBtnsPerPane;
                    
                    // Loop through how many rows we need:
                    for(var rowCount = 0; rowCount < args.rows; rowCount++)
                    {
                        var thisRow = new Ext.Panel({ layout: { type: 'hbox', align: 'stretch', pack: 'center' }, id: 'row' + (rowCount + 1), defaults: { flex: 1 } });
                        
                        // Now we need to add the cells:
                        for(var colCount = 0; colCount < args.cols; colCount++)
                        {
                            var cellLabel, handlerFunc;
                            
                            (cellIndex > (totalItems - 1)) ? cellLabel = '' : cellLabel = args.cells[cellIndex].label;
    
    
                            if(cellIndex < totalItems)
                            {
                                var thisCell = new Ext.Panel({
                                    title: cellLabel,
                                    cls: 'dashboardButton',
                                    layout: { type: 'vbox', align: 'center', pack: 'center' },
                                    id: args.cells[cellIndex].id,
                                    items: [{ html: args.tpl.replace(/\{(\w+)\}/g, function(match, key) { return args.cells[cellIndex][key]; }) }],
                                    listeners: { tap: { element: 'element', fn: function() { rootPanel.setActiveItem(screens[this.id], { type: 'slide' } ); } } }
                                });
                            }
                            else
                                var thisCell = new Ext.Panel({ title: '' })
                            
                            thisRow.add(thisCell);
                            cellIndex++;
                        }
                        panes[i].add(thisRow);
                    }
                }
                
                (noPanes == 1) ? showIndicator = false : showIndicator = true;
                    
    
    
                var gridview = new Ext.Container({
                    title: args.title,
                    items: panes,
                    indicator: showIndicator,
                });
                
                return gridview;
            };
    
    
            var dashboard = new GridView(dashboardCfg);
    
    
            var list = new Ext.Panel ({
                fullscreen: true,
                layout: { type: 'vbox', align: 'stretch' },
                scrollable: true,
                items: [dashboard],
            })
        },
    });

  9. #19
    Sencha User
    Join Date
    Jul 2012
    Location
    Bangalore
    Posts
    113
    Vote Rating
    0
    kramprabhu is on a distinguished road

      0  

    Default


    Thats work great. thanks.
    But how to make it work for landscape and portrait together.
    I have defined 3 column.. but if we look at landscape.. then I think 4 column could be better.
    -Ram

  10. #20
    Sencha User
    Join Date
    Oct 2012
    Posts
    2
    Vote Rating
    0
    ahmedeloufir is on a distinguished road

      0  

    Default request cls dashboardButton

    request cls dashboardButton


    Great work ! Can you please provide us with the dashboardButton cls please ?

Similar Threads

  1. Creating new icon cls
    By miroperez in forum Sencha Touch 1.x: Discussion
    Replies: 14
    Last Post: 6 Jul 2012, 12:48 PM
  2. Replies: 1
    Last Post: 23 Sep 2010, 3:44 AM
  3. Creating grid as generic...
    By bhaskar1605 in forum Ext 2.x: Help & Discussion
    Replies: 4
    Last Post: 20 Dec 2008, 7:28 AM
  4. Creating a Grid 'on the fly'
    By TheLlama in forum Ext 2.x: Help & Discussion
    Replies: 3
    Last Post: 4 Jun 2008, 4:25 PM
  5. Creating a Menu When a Titlebar Icon is Pressed
    By mconnors1234 in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 10 Jan 2008, 6:15 AM

Thread Participants: 16

Tags for this Thread