DockedItems for Dataview

[tomalex0]

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

[mitchellsimoens]

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.

[Riaz]

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

[tomalex0]

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

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>')
    }]
})

[Riaz]

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

[Riaz]

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.

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"

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>')
    }]
})

[tomalex0]

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.

[Riaz]

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?

[tomalex0]

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

[mitchellsimoens]

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).

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.