1. #1
    Sencha User
    Join Date
    Mar 2012
    Posts
    1
    Vote Rating
    0
    ryansd92 is on a distinguished road

      0  

    Default NestedList with detailCard or detailContainer side by side (MVC)

    NestedList with detailCard or detailContainer side by side (MVC)


    Hi folks. This is my first post.<br>
    <br>
    I have NestedList that displays a detail card when I get to a leaf node. This works properly. I would modify this behavior by configuring the detailContainer to be to the right of the list, instead of the detailCard that replaces the list view with a back button.<br>
    <br>
    I get an error when the config block for the NestedList runs: <font color="#FF0000"><span style="font-family: Menlo">Uncaught TypeError: Object WellDetail has no method 'onBefore'</span></font><br>
    <br>
    It doesn't seem to be able to set the detailContainer properly. <br>
    <br>
    I know this is possible. I'm just doing something wrong. Any idea? I used the example from sencha as a guide. <br>
    <br>
    <a href="http://docs.sencha.com/touch/2-0/#!/guide/nested_list" target="_blank">http://docs.sencha.com/touch/2-0/#!/guide/nested_list</a><br>
    <br>
    <strong>The List:</strong><br>
    <br>
    Code:
    Ext.define('GWPC.view.well.WellsList', {<br>
    &nbsp;&nbsp; &nbsp;extend: 'Ext.dataview.NestedList',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;require: [<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;'GWPC.view.well.WellDetail'<br>
    &nbsp;&nbsp; &nbsp;],<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;xtype: 'wellslist',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;config: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<strong>detailContainer : 'WellDetail',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;detailCard: true, </strong><br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;store: 'RemoteWells',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;flex: 1,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;title: 'Downloaded Wells',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;displayField: 'name',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;listeners: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;leafitemtap: function(nestedList, list, index, target, record) {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;detailContainer = nestedList.getDetailContainer();<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;detailContainer.setHtml('You selected: ' + record.get('name'));<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;console.log(detailContainer.getHtml());<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;}<br>
    });<br>
    <br>
    <br>
    <br>
    <strong>The Container for the Detail Container<br>
    </strong><br>
    Code:
    Ext.define('GWPC.view.well.WellDetail', {<br>
    &nbsp;&nbsp; &nbsp;extend: 'Ext.Container',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;xtype: 'welldetail',<br>
    <br>
    <br>
    &nbsp;&nbsp; &nbsp;config: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;//layout: 'card',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;html: [<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'Placeholder for Well Detail'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;].join(""),<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;styleHtmlContent: true,<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;flex: 3<br>
    &nbsp;&nbsp; &nbsp;},<br>
    &nbsp;&nbsp; <br>
    });<br>
    <br>
    <br>
    <br>
    <br>
    <br>
    The Store<br>
    <br>
    <br>
    Code:
    <br>
    Ext.define('GWPC.store.RemoteWells', {<br>
    &nbsp;&nbsp; &nbsp;extend: 'Ext.data.TreeStore',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;reqiure: [<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;'GWPC.model.Well'<br>
    &nbsp;&nbsp; &nbsp;],<br>
    <br>
    <br>
    &nbsp;&nbsp; &nbsp;config: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;model: 'GWPC.model.Well',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;root: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;leaf: false<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;data: [<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 1',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': '34p573298754'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 2',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DFGRGDFG546455'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 3',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DGDSGER6745'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 4',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'FGDFGDFGDS346437'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 5',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DSFGFDGFD67865'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 6',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DFDSGFSDG456453'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 7',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'FGHFDH3453425'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 8',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DFGDSFG456453'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 9',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'SDFSAF324213'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 10',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'FGHJGYGUJYT8908'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 11',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'DSFDSFT4564356'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'name': 'Well 12',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;'wellid': 'VCBVCNVCB345435'<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]<br>
    &nbsp;&nbsp; &nbsp;}<br>
    <br>
    <br>
    });<br>
    <br>
    <br>
    <strong>Container for the List and the Detail Container<br>
    </strong><br>
    Code:
    <br>
    Ext.define('GWPC.view.well.WellsScreen',{<br>
    &nbsp;&nbsp; &nbsp;extend: 'Ext.Panel',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;layout: 'fit',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;xtype: 'wellsscreen',<br>
    &nbsp;&nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;config: {<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;layout: 'hbox',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;items: [<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xtype: 'wellslist',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;},<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;xtype: 'welldetail',<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;]<br>
    &nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<br>
    &nbsp;&nbsp; &nbsp;}<br>
    &nbsp;&nbsp; &nbsp;<br>
    });<br>
    Attached Images

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    35,704
    Vote Rating
    751
    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


    I have no clue what you code is to help you with your code.
    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 Premium Member
    Join Date
    Dec 2011
    Posts
    28
    Vote Rating
    1
    Designbase is on a distinguished road

      0  

    Default Clearer now? I have exactly the same question

    Clearer now? I have exactly the same question


    Ext.define('ListItem', {
    extend: 'Ext.data.Model',
    config: {
    fields: ['text']
    }
    });


    var treeStore = Ext.create('Ext.data.TreeStore', {
    model: 'ListItem',
    defaultRootProperty: 'items',
    root: {
    items: [
    {
    text: 'Drinks',
    items: [
    {
    text: 'Water',
    items: [
    { text: 'Still', leaf: true },
    { text: 'Sparkling', leaf: true }
    ]
    },
    { text: 'Soda', leaf: true }
    ]
    },
    {
    text: 'Snacks',
    items: [
    { text: 'Nuts', leaf: true },
    { text: 'Pretzels', leaf: true },
    { text: 'Wasabi Peas', leaf: true }
    ]
    }
    ]
    }
    });


    var detailContainer = Ext.create('Ext.Container', {
    layout: 'card',
    flex: 1
    });


    var nestedList = Ext.create('Ext.NestedList', {
    store: treeStore,
    detailContainer: detailContainer,
    detailCard: true,
    listeners: {
    leafitemtap: function(nestedList, list, index, target, record) {
    var detailCard = nestedList.getDetailCard();
    detailCard.setHtml('You selected: ' + record.get('text'));
    }
    },
    flex: 1
    });


    Ext.Viewport.add({
    layout: 'hbox',
    items: [
    nestedList,
    detailContainer
    ]
    });

Thread Participants: 2

film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar