Results 1 to 4 of 4

Thread: add buttons in a view.view

  1. #1
    Sencha User
    Join Date
    Sep 2010
    Posts
    8
    Vote Rating
    0
      0  

    Default add buttons in a view.view

    Hey i am trying to build an application that gets data from a datastore and i display that data in a view.view .
    Depending on the data of the store i need to create clickable icons in the view.

    For example: I have a user represented in my store. I (as his supervisor) can see that he just made a call out. Now there need to be icons next to the call that let me perform actions like monitoring the call. When he hangs up the icons disapear.

    I dont have problems sending data and updating it. I also manged to use the "itemTpl" to make the icon appear or disapear depending on the data, but i dont understand yet how to access the icons click event in my MVC structure.

    I was able to access the icons click event over listeners when the view was rendered but everytime the datastore receives new information the button click event doesnt work anymore.

    How can i accomplish that. Here is the code i have so far:
    Code:
    Ext.define('MyApp.view.Users', {
        extend: 'Ext.window.Window',
        alias: 'widget.users',
        title: 'Users',
        id:'win-users',
        closable: false,
        collapsible: true,
        constrainHeader: true,
        expandOnShow: false,
        layout: 'fit',
        
        initComponent: function() {
            this.items = [Ext.create('Ext.view.View', {
                store: 'Users',
                id: 'grid-users',
                itemTpl: '<table class="pb_entry" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="pb_first" rowspan="3"></td>
                    <td class="pb_entry_mouseover">
                    <table>
                            <tr>
                                <td class="pb_status" rowspan="2"><img id="pb_{id}_status" class="status_icon" src="graphic/icons/status_{sblog}{extenlog}.png" data-qtitle="{first} {last}" data-qtip="{msg_status}" /></td>
                                <td class="pb_name">{first} {last}</td>
                               <td class="pb_options" rowspan="2"><img class="pb_voicemail" src="graphic/icons/phonebook_voicemail.gif" title="Voicemail" /></td>
                            </tr>
                            <tr>
                                <td class="pb_exten">({exten})</td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td id="pb_{exten}_l1" class="pb_line pb_line_empty">{line1}</td>
                </tr>
                <tr>
                    <td id="pb_{exten}_l2" class="pb_line pb_line_empty">{line2}</td>
                </tr>
            </table>'            
            })];
            this.callParent();
        }
    });

  2. #2
    Sencha - Support Team scottmartin's Avatar
    Join Date
    Jul 2010
    Location
    Houston, Tx
    Posts
    9,409
    Answers
    716
    Vote Rating
    505
      0  

    Default

    Please see the following example and make any changes needed to simulate your problem.

    Code:
    var mydata = [
        { src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
        { src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
        { src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
        { src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
    ];
    
    Ext.define('Image', {
        extend: 'Ext.data.Model',
        fields: [
            { name:'src', type:'string' },
            { name:'caption', type:'string' }
        ]
    });
    
    Ext.create('Ext.data.Store', {
        id:'imagesStore',
        model: 'Image',
        data: mydata
    });
    
    var imageTpl = new Ext.XTemplate(
        '<tpl for=".">',
            '<div style="margin-bottom: 10px;" class="thumb-wrap">',
              '<img src="{src}" />',
              '<br/><span>{caption}</span>',
            '</div>',
        '</tpl>'
    );
    
    Ext.create('Ext.view.View', {
        store: Ext.data.StoreManager.lookup('imagesStore'),
        tpl: imageTpl,
        itemSelector: 'div.thumb-wrap',
        emptyText: 'No images available',
        renderTo: Ext.getBody(),
        
        listeners: {
            itemclick: function(view,record,item,index) { 
                alert(index);
            },
    
            selectionchange: function(view,selections) { 
            //    alert(selections);
            },
            buffer: 10 // set buffer for event handler
        }
        
    });
    
    var button = new Ext.button.Button({
    	renderTo: Ext.getBody(),
    	text: "button1",
    	handler: function(){
    		var store = Ext.data.StoreManager.lookup('imagesStore');
    		store.removeAll();
    		store.loadRecords(mydata);
    		console.log('records loaded');
    	}
    });
    Regards,
    Scott.

  3. #3
    Sencha User
    Join Date
    Sep 2010
    Posts
    8
    Vote Rating
    0
      0  

    Default

    Thank you for the response. The suggested way lets me choose a specific part of my template to act as the item but i dont want to just put one button there. I my example i said that when a call is being made next to the call i want to have buttons (icons) that let me do diffrent things like monitor or record. So i need to be able to put more than one button with handlers in the view.

    or if that is not the view then maybe something else.

    Here is an image that shows how it should look. Like i said i have already managed all the logic of how data is updated and how the diffrent functions in the graphic are implemented. I just need to be able to call those functions from my view.

    this graphic shows same window before and during a call of a user.

    phonebook.jpg
    Last edited by jask; 16 Apr 2012 at 8:10 AM. Reason: grammatical error

  4. #4
    Sencha User
    Join Date
    Sep 2010
    Posts
    8
    Vote Rating
    0
      0  

    Default nobody???

    Im thankful for the ideas already given but it doesnt really solve my problem. Is there anybody that can help me or point me in the right direction?

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •