Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: DockedItems for Dataview

  1. #1
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Default DockedItems for Dataview

    Is there any possible method to provide docked items for Dataview, as of for now its not a property.

  2. #2
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    You have to wrap the DataView in a Panel to be able to use DockedItems config. DataView used to extend Panel but that was dumped in one of the beta builds last year in favor of this.

    Also, make sure you use FitLayout on the Panel if you want scrolling to work properly on the DataView.
    Last edited by mitchellsimoens; 14 Feb 2011 at 5:52 AM. Reason: Added FitLayout comment
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

  3. #3
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
      0  

    Default

    I have a same issue. Is their any sample example?

  4. #4
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Thumbs up

    As mitchel said there is no dockedItems for dataview, we have to use Panel and add dataview as its item

    Code:
    new Ext.Panel({
        fullscreen: true,
        dockedItems: {
            xtype: 'toolbar',
            title: 'Dataview Dock'
        },
        items: [{
            xtype: 'dataview',
            store: new Ext.data.Store({
                autoload:true,
                fields:['firstName','lastName'],
                sorters: ['lastName'],
                data: [{
                    firstName: 'Thomas',
                    lastName: 'Alexander'
                },
                ]
            }),
            itemSelector: 'div.users',
            tpl: new Ext.XTemplate('<div class="users"><tpl for="."><div><span>{firstName}</span><span>{lastName}</span></div></tpl></div>')
        }]
    })

  5. #5
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
      0  

    Default

    thanks for your information. Could you look at the following thread? I am in trouble.
    http://www.sencha.com/forum/showthre...-is-not-firing

  6. #6
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
      0  

    Default

    I have tried your coding and it is working.

    However, I am facing another problem regarding on the above issue.

    Suppose I have "ProjectList" and when I will click one item from ProjectList it will show "ProjectListDetails"

    ISSUE: when I click, I am getting Project Name and Project Number.

    Code:
    rojectList.on('itemtap', function (ProjectList, index, item, e) {
                var SelectedProject = ProjectList.store.data.items[index].data;
    
     var templateSelectedProject = new Ext.XTemplate(
                        '<p>{ProjectName} {ProjectNumber}</p>'
                );
    
               var str = templateSelectedProject.apply(SelectedProject);  /* from here I                    am getting Project Name and Project Number*/ 
    });
    How do I send "SelecedProject" information(that is - Project Name, Project Number) to following "Panel"

    Code:
    new Ext.Panel({
        fullscreen: true,
        dockedItems: {
            xtype: 'toolbar',
            title: 'Project Details'
        },
        items: [{
            xtype: 'dataview',
            store: SelectedProject,   // needed to modify
            itemSelector: 'div.users',
            tpl: new Ext.XTemplate('<div class="users"><tpl for="."><div><span>{ProjectName}</span><span>{ProjectNumber}</span></div></tpl></div>')
        }]
    })

  7. #7
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Default

    Its seen that your ProjectDetails Dataview have a store associated.

    So its better to loadata to the dataview store when you select an item from list.

  8. #8
    Sencha User Riaz's Avatar
    Join Date
    Sep 2010
    Location
    Sydney, Australia
    Posts
    183
    Vote Rating
    1
      0  

    Default

    If I want to display select item name (Project A) what should I do? Could you give me any example?

    In Project list, there is already name of Project (ex. Project A). And I want to display "Project A" into the ProjectDetail list. How can I do that?

  9. #9
    Sencha User tomalex0's Avatar
    Join Date
    Apr 2009
    Location
    San Jose, CA
    Posts
    589
    Vote Rating
    20
      0  

    Default

    Code:
    SelectedProject.loadData([{ProjectName:'project name',ProjectNumber:'project number'}])

  10. #10
    Sencha - Sr Software Engineer mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    39,556
    Vote Rating
    1272
      0  

    Default

    You have a DataView and when you click on it are you wanting to load that Model's information into another DataView?

    DataViews should be used if there is more than one Model (record) that you want to view, say you have multiple projects.

    If you want to only view one project then make an Ajax request and populate a Template into a Panel (or Container/Component).

    Code:
    var panel = new Ext.Panel({
        ...
        tpl: new Ext.Template(
            '<div>{ProjectName}</div>'
        ),
        data: Model.data // config option
    });
    
    panel.update(Model.data); //update function
    If you are rendering the Panel for the first time then you use the data config in the Panel and not the update function. If the Panel is already rendered and you want to push data to it, then you do not use the data config option and you use the update function. Both will use an object.

    If you would like more of a full example, let me know and I will write something real quick.
    Mitchell Simoens @LikelyMitch
    Sencha Inc, Senior Software Engineer
    ________________
    Learn BBCode and use it! Checkout the CODE tag!

    Check out my GitHub, lots of nice things for Ext JS and Sencha Touch
    https://github.com/mitchellsimoens

Page 1 of 2 12 LastLast

Similar Threads

  1. Can you dymanically edit the dockedItems?
    By rballman in forum Sencha Touch 1.x: Discussion
    Replies: 6
    Last Post: 8 Apr 2011, 1:47 AM
  2. Can you dymanically edit the dockedItems?
    By rballman in forum Community Discussion
    Replies: 0
    Last Post: 31 Jan 2011, 11:54 PM
  3. dockedItems not in the API documentation
    By DanMcCoy in forum Sencha Touch 1.x: Discussion
    Replies: 1
    Last Post: 26 Sep 2010, 7:37 PM
  4. dockedItems ignoring title in item
    By profunctional in forum Sencha Touch 1.x: Discussion
    Replies: 5
    Last Post: 6 Jul 2010, 6:18 AM

Posting Permissions

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