1. #1
    Sencha User
    Join Date
    Jun 2009
    Posts
    44
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default ListView / ListItem: Ideal way to customize content

    ListView / ListItem: Ideal way to customize content


    Hello,

    I had a question about customizing the ListView items. Initially, my items were simply formatted with itemTpl definitions using {field_name}. This worked fine, but of course was limited in functionality.

    So I looked at the ST2 documentation guide for DataView (http://docs.sencha.com/touch/2-1/#!/guide/dataview) using dataMap and tried to replicate that. However, for whatever reason, I cannot seem to get the content to actually render - I just get empty list items, though the disclosure function works well!

    Without spending too much time to resolve this, I realized that I could just add a listener to the listitem config so that when "updatedata" event happened, I just used the newData record to get the data and then format and render into the listitem. This approach seems to work just fine and gives me the flexibility I need.

    The question, finally: Is there a pitfall with the way I have done it? That is, without using dataMap and defined dataMap functions? I have noticed that none of the ST2 samples or guides do it the way I have and all seem to strictly use the dataMap approach. Am I likely to have performance issues? I am trying to be disciplined in following Sencha recommended ways of doing things (my prior history of "hacking" or "fighting" the extjs framework did not go well).

    Thanks in advance,

    Mohammad

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    37,525
    Vote Rating
    871
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    The way you are doing it is just working around the actual problem. Can I see your dataitem?
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Jun 2009
    Posts
    44
    Vote Rating
    0
    minamu1 is on a distinguished road

      0  

    Default List and ListItem

    List and ListItem


    Hello,

    Thanks for pointing that out. I should fix this. Here is my code for the List and the ListItem. Note that I am getting the expected number of results and the disclosure action does open up the correct/corresponding record. It's just that the items are all blank with no text.

    The store loads JSON data through a proxy. The data has many fields, including one called "caption". For now, that's what I want to style and display in the list item. Based on the "caption" content, I may style things differently.

    As usual, any help is greatly appreciated. Thanks!

    Mohammad
    San Jose, CA

    List object:
    Code:
    Ext.define('qxtapp.view.ResultsList', {
        extend: 'Ext.dataview.List',
        alias: 'widget.resultsList',
        xtype: 'resultsList',
        requires: [
            'qxtapp.view.ResultsListItem',
            'Ext.plugin.ListPaging'
        ],
        
        config: {
            defaultType: 'resultslistitem',
            loadingText: 'Performing search...<br>This may take up to 1 minute.',
            emptyText: 'No results found.',
            useComponents: true,
            store: 'SearchResults',
            onItemDisclosure: true,
            plugins: [
                {
                    xclass: 'Ext.plugin.ListPaging',
                    autoPaging: true
                }
            ]
        }
    });
    ListItem object:
    Code:
    Ext.define('qxtapp.view.ResultsListItem', {
        extend: 'Ext.dataview.component.ListItem',
        xtype : 'resultslistitem',
    
        config: {
            captionPanel: true,
            dataMap: {
                getCaptionPanel: {
                    setText: 'caption'
                }
            }
        },
        applyCaptionPanel: function(config) {
            return Ext.factory(config, Ext.Panel, this.getCaptionPanel());
        },
        updateCaptionPanel: function(newCaptionPanel, oldCaptionPanel) {
            if(oldCaptionPanel) {
                this.remove(oldCaptionPanel);
            }
            if(newCaptionPanel) {
                this.add(newCaptionPanel);
            }
        }
    });

Thread Participants: 1

Tags for this Thread