PDA

View Full Version : DockedItems for Dataview



tomalex0
12 Feb 2011, 5:04 AM
Is there any possible method to provide docked items for Dataview, as of for now its not a property.

mitchellsimoens
14 Feb 2011, 5:51 AM
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
14 Feb 2011, 2:54 PM
I have a same issue. Is their any sample example?

tomalex0
14 Feb 2011, 8:13 PM
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
14 Feb 2011, 8:22 PM
thanks for your information. Could you look at the following thread? I am in trouble.
http://www.sencha.com/forum/showthread.php?124000-Ext.List-Issue-Select-item-is-not-firing

Riaz
16 Feb 2011, 8:39 PM
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
16 Feb 2011, 8:52 PM
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
16 Feb 2011, 8:58 PM
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
16 Feb 2011, 9:52 PM
SelectedProject.loadData([{ProjectName:'project name',ProjectNumber:'project number'}])

mitchellsimoens
17 Feb 2011, 5:11 AM
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.

Riaz
17 Feb 2011, 2:53 PM
Thanks for your great help

Riaz
17 Feb 2011, 7:53 PM
I have a confusion on the following coding. Can anybody clarify my coding -



ProjectList.on('itemtap', function (ProjectList, index, item, e) {
var SelectedProject = null;
SelectedProject = ProjectList.store.data.items[index].data;


I have a Project list which is group by status. When I group, it changes index. As a result, it is not showing correct project name when I click Project Name from project List.

How do I correct it?

Or do I need to modify here -



var ProjectStore = new Ext.data.JsonStore({
model: 'Project',
sorters: 'ProjectName',

getGroupString: function (record) {
return record.get('ProjectStatus'); /* How do I make ascending or descending order ?*/
},
proxy: {
type: 'ajax',
url: '/home/index',
reader: {
type: 'json',
root: 'data'
},
actionMethods: {
read: 'POST'
}
},
autoLoad: true

});