PDA

View Full Version : Forum event



Gordon25
23 Feb 2009, 4:49 AM
Hello, i build a forum and i would like to add an event on the grid, right click on a menu is displayed as in the example of feed viewer

this is my code :


var Forum = {};
// The data store for topics
Forum.TopicStore = function(){
Forum.TopicStore.superclass.constructor.call(this, {
remoteSort: true,

proxy: new Ext.data.HttpProxy({
url: 'xpath.php',
method: 'POST'
}),

reader: new Ext.data.JsonReader({
totalProperty: 'total',
root: 'results',
}, [
'id',{name: 'date', mapping: 'mcesid:beginning_date'},'id','auteur','father','lModified',{name: 'subject', mapping: 'mcesid:subject'},
{name: 'content', mapping: 'mcesid:content'}
])
});



};
Ext.extend(Forum.TopicStore, Ext.data.Store, {
loadForum : function(forumId){
this.baseParams = {
forumId: forumId
};
this.load({
params: {
start:0,
limit:25
}
});
}
});

//////////////////////////////////////////////////////////////////////////////////////////////

// some renderers
Forum.Renderers = {
topic : function(value, p, record){
var xf = Ext.util.Format;
return String.format(
'<p>' + xf.ellipsis(xf.stripTags(record.data.content), 100) + '</p>');

},

lastPost : function(value, p, r){
return String.format('<span class="post-date">{0}</span><br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
}
};

//////////////////////////////////////////////////////////////////////////////////////////////

Ext.onReady(function(){

Ext.QuickTips.init();

var ds = new Forum.TopicStore();

var cm = new Ext.grid.ColumnModel([{
header: "Auteur",
dataIndex: 'auteur',
width: 50,
},{
id: 'topic',
header: "Sujet",
dataIndex: 'subject',
width: 220,
renderer: Forum.Renderers.topic
},{
header: "Date",
dataIndex: 'date',
width: 70,
},{
header: "Id",
dataIndex: 'id',
width: 100,
}]);

cm.defaultSortable = true;


var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'header',
height:32
}),
new Ext.tree.TreePanel({
id:'forum-tree',
region:'west',
title:'Forums',
split:true,
width: 290,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
dataUrl: 'forum.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable:false,
id:'source'
}
}),
new Ext.TabPanel({
id:'main-tabs',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:300,
items: {
id:'main-view',
layout:'border',
title:'Loading...',
items:[
new Ext.grid.GridPanel({
region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
trackMouseOver:false,
loadMask: {msg:'Loading Topics...'},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds){
//if(this.showPreview){
//p.body = '<p>'+record.data.auteur+'</p>';
// return 'x-grid3-row-expanded';
//}
return 'x-grid3-row-collapsed';
}
},
tbar:[
//{
// text:'New Topic',
// iconCls: 'new-topic',
// handler:function(){alert('Not implemented.');}
//},
// '-',
{
pressed: true,
enableToggle:true,
text:'Preview Pane',
tooltip: {title:'Preview Pane',text:'Show or hide the Preview Pane'},
iconCls: 'preview',
toggleHandler: togglePreview
},
' ',
{
pressed: true,
enableToggle:true,
text:'Summary',
tooltip: {title:'Post Summary',text:'View a short summary of each post in the list'},
iconCls: 'summary',
toggleHandler: toggleDetails
}
],
// bbar: new Ext.PagingToolbar({
//pageSize: 25,
//store: ds,
//displayInfo: true,
//displayMsg: 'Displaying topics {0} - {1} of {2}',
// emptyMsg: "No topics to display"
//})
}), {
id:'preview',
region:'south',
height:200,
title:'View Topic',
split:true
}
]
}
})
]
});

var tree = Ext.getCmp('forum-tree');
tree.on('append', function(tree, p, node){
if(node.id == 5){
node.select.defer(100, node);
}
});
var sm = tree.getSelectionModel();
sm.on('beforeselect', function(sm, node){
return node.isLeaf();
});
sm.on('selectionchange', function(sm, node){
ds.loadForum(node.text);
Ext.getCmp('main-view').setTitle(node.text);
});

function toggleDetails(btn, pressed){
var view = Ext.getCmp('topic-grid').getView();
view.showPreview = pressed;
view.refresh();
}

function togglePreview(btn, pressed){
var preview = Ext.getCmp('preview');
preview[pressed ? 'show' : 'hide']();
preview.ownerCt.doLayout();
}
});

Gordon25
23 Feb 2009, 1:44 PM
nobody has a simple example of event???

tryanDLS
23 Feb 2009, 2:23 PM
I don't understand, the grid examples show menus on right click.

Gordon25
23 Feb 2009, 2:32 PM
I wish that when you right click on the grid of the forum, a menu appears.

Example:

the same event for the feedviewer

Gordon25
24 Feb 2009, 3:35 AM
I changed my code a bit, this is my grid :


/*********Grille principale*********/
var grille = new Ext.grid.GridPanel({
region:'center',
id:'topic-grid',
store: ds,
cm: cm,
sm:new Ext.grid.RowSelectionModel({singleSelect:true}),
//trackMouseOver:false,
loadMask: {msg:'Loading Topics...'},
viewConfig: {
forceFit:true,
enableRowBody:true,
showPreview:true,
getRowClass : function(record, rowIndex, p, ds){
//if(this.showPreview){
//p.body = '<p>'+record.data.auteur+'</p>';
// return 'x-grid3-row-expanded';
//}
return 'x-grid3-row-collapsed';
}
},
tbar:[
{
pressed: true,
enableToggle:true,
text:'Preview Pane',
tooltip: {title:'Preview Pane',text:'Show or hide the Preview Pane'},
iconCls: 'preview',
toggleHandler: togglePreview
},
' ',
{
pressed: true,
enableToggle:true,
text:'Summary',
tooltip: {title:'Post Summary',text:'View a short summary of each post in the list'},
iconCls: 'summary',
toggleHandler: toggleDetails
}
],

});

grille.on('rowclick', grille.onContextClick, grille);

Ext.extend(grille, Ext.grid.GridPanel, {

onContextClick : function(grid, rowIndex, e){
console.log('lol');
}

});

and this is the error in firebug when I click on a box...

http://www.monsterup.com/upload/1235475296.jpg (http://www.monsterup.com)

Animal
24 Feb 2009, 4:04 AM
So when you step through it in debug, and stop at the line



grille.on('rowclick', grille.onContextClick, grille);


And then examine grille, does it have a member called onContextClick?

Read the docs for Ext.extend. Read http://extjs.com/learn/Tutorial:Creating_new_UI_controls

Gordon25
24 Feb 2009, 4:35 AM
I found a solution :


/****Ajout d'un evenement pour la grille*****/
grille.addListener('rowclick', evenementClick);

function evenementClick(grid, rowIndex, e) {
var ItemSelect = grid.store.getAt(rowIndex);
//console.log(ItemSelect.data.auteur);
var detailPanel = viewport.getComponent('detailPanel');
console.log(detailPanel);
detailPanel.updateDetail(ItemSelect.data.auteur);
}

Gordon25
24 Feb 2009, 6:37 AM
Another problem I would display
ItemSelect.data.auteur in the panel 'View Topic' , when I click on a row of the grid.



var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'header',
height:32
}),
new Ext.tree.TreePanel({
id:'forum-tree',
region:'west',
title:'Forums',
split:true,
width: 290,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 5 5',
rootVisible:false,
lines:false,
autoScroll:true,
dataUrl: 'forum.php',
root: {
nodeType: 'async',
text: 'Ext JS',
draggable:false,
id:'source'
}
}),
new Ext.TabPanel({
itemId: 'detailPanel',
activeTab:0,
region:'center',
margins:'0 5 5 0',
resizeTabs:true,
tabWidth:300,
items: {
id:'main-view',
layout:'border',
title:'Loading...',
items:[ grille,
{
region:'south',
height:200,
title:'View Topic',
split:true,

}
]
}
})
]
});

Animal
24 Feb 2009, 7:48 AM
OK, it's a Panel isn't it, "View Topic"?

Therefor it isa Container...

READ the API docs.

You are showing every sign of getting help for evrything and never actually reading about what your code does.

READ the API docs about Containers and Components and Layouts