PDA

View Full Version : Action Tab on Panel



joefox
25 Feb 2009, 9:52 AM
I was looking over the "Action Tabs" in the examples, and tried to create 1 action tab on my table, however it throws and error saying no action defined.

Here is my items table, i wanted to add a action panel on the Group Memberships item.

items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships'
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]

I tried this, but didnt work.

items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships'
},{
var action = new Ext.Action({
text: 'Action 1',
handler: ShowUsersGroups,
iconCls: 'blist'
});
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]




*****************UPDATE*******************

Ive also tried this...and no go.


items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships'
},{
items: [
new Ext.Button(action) // <-- Add the action as a button
],
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]

lower in my code


var action = new Ext.Action({
text: 'Action 1',
handler: ShowUsersGroups,
iconCls: 'blist'
});

joefox
25 Feb 2009, 2:06 PM
I tried the sample project, and it worked fine, so i moved it over to my production, but i cant seem to get the stuff lined up right.

dj
25 Feb 2009, 3:51 PM
What are "action tabs" or "action panels"? Or: I don't understand what you are trying to do...

... that said, you have to but the second snippet


var action = new Ext.Action({
text: 'Action 1',
handler: ShowUsersGroups,
iconCls: 'blist'
});


somewhere before the first one


items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships'
},{
items: [
new Ext.Button(action) // <-- Add the action as a button
],
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]


because - naturally - you have to define something before you can use it...

joefox
25 Feb 2009, 5:21 PM
Yeah sorry my bad, i explained it wrong.
All I wanted to do is all a action button like the example below, to one of my tables.

http://imagesticky.com/images/jpsx6c83kjhmxmgw49nj.jpg

Above was the code that created the 2 tables, i just didnt know where to put it in my code.

Thanks again, and sorry about the confusion.

mjlecomte
25 Feb 2009, 5:26 PM
You should post more complete code. I think you're trying to add to the header, which you can not (currently) do. You need to add to the toolbar.

You should start with the working example as your base point, then modify that slowly into what you want.

joefox
25 Feb 2009, 5:59 PM
Thanks for the the quick look at it.

When i was looking at the example, I didnt see where they created a new toolbar, i didnt knwo if i needed to do that in the "items" of that column, or outside, then add it into a bar...

Here is what I have..

},{
layout:'column',
title:'Group Memberships',
iconCls:'group',
defaults:{
style:'padding:5px',
height: 525,
minSize: 175,
maxSize: 525
},
items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships'
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]
},{
contentEl:'user_audit',
title: 'User Audit',
iconCls:'reporting',
autoScroll:true
}]
}]},

I was not sure if needed to create a new action, then create a new panel, i thought i could use the column, add a new panel to it, then create a tbar like in the example..i think im totlly off though.

I dont know what to add in there from the example.


// The action
var action = new Ext.Action({
text: 'Action 1',
handler: function(){
Ext.example.msg('Click','You clicked on "Action 1".');
},
iconCls: 'blist'
});

var panel = new Ext.Panel({
title: 'Actions',
width:600,
height:300,
bodyStyle: 'padding:10px;', // lazy inline style
tbar: [
action, { // <-- Add the action directly to a toolbar
text: 'Action Menu',
menu: [action] // <-- Add the action directly to a menu
}
],
items: [
new Ext.Button(action) // <-- Add the action as a button
],
renderTo: Ext.getBody()
});

mjlecomte
25 Feb 2009, 6:24 PM
// This creates an instance of action that you can refer to later
var action = new Ext.Action({
text: 'Action 1',
handler: function(){
Ext.example.msg('Click','You clicked on "Action 1".');
},
iconCls: 'blist'
});

var panel = new Ext.Panel({
title: 'Actions',
width:600,
height:300,
bodyStyle: 'padding:10px;', // lazy inline style
// create top toolbar
tbar: [
action,
{ // <-- Add the action directly to a toolbar
text: 'Action Menu',
menu: [action] // <-- Add the action directly to a menu
}
],
// items: add widgets to your container, in this case it's the button you
// see floating inside the panel in the example.
items: [
new Ext.Button(action) // <-- Add the action as a button
],
renderTo: Ext.getBody()
});

mjlecomte
25 Feb 2009, 6:27 PM
I gather you're wanting to do this:



},{
layout:'column',
title:'Group Memberships',
iconCls:'group',
defaults:{
style:'padding:5px',
height: 525,
minSize: 175,
maxSize: 525
},
items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
tbar: //add your actions, buttons, whatever here
contentEl: 'current_group_memberships'
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]
},{
contentEl:'user_audit',
title: 'User Audit',
iconCls:'reporting',
autoScroll:true
}]
}]},

joefox
25 Feb 2009, 6:31 PM
I gather you're wanting to do this:



},{
layout:'column',
title:'Group Memberships',
iconCls:'group',
defaults:{
style:'padding:5px',
height: 525,
minSize: 175,
maxSize: 525
},
items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
tbar: //add your actions, buttons, whatever here
contentEl: 'current_group_memberships'
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]
},{
contentEl:'user_audit',
title: 'User Audit',
iconCls:'reporting',
autoScroll:true
}]
}]},


Yeah your right, Ive tried a few methods, and just cant seem to get it right.

I tried this, but no go.
I dont get if i can render it inline, or i need to do something with my first item 'Group Memberships', maybe give it a menu id, then have the action point to 'Group Memberships' menu?

I just needed a button, that i can put a handler on, to call a javascript function. :(



items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships',
tbar: [
action, { // <-- Add the action directly to a toolbar
text: 'Action Menu',
menu: [action] // <-- Add the action directly to a menu
}
],
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]

mjlecomte
25 Feb 2009, 6:32 PM
"no go" doesn't help me to know what's wrong.

Make a test case and show the complete code.

It's just a panel with a toolbar, that's it.

joefox
25 Feb 2009, 6:34 PM
"no go" doesn't help me to know what's wrong.

Make a test case and show the complete code.

It's just a panel with a toolbar, that's it.

I updated my wording, sorry about that, here is my complete code.


Ext.onReady(function(){
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());

var viewport = new Ext.Viewport({
layout:'border',
items:[
new Ext.BoxComponent({ // raw
region:'north',
el: 'header',
height:32
}),{
region:'south',
contentEl: 'log',
split:true,
autoScroll:true, // Allow Scrolling
height: 100,
minSize: 100,
maxSize: 200,
collapsible: true,
title:'Event Log',
iconCls:'nav',
margins:'0 0 0 0'
},{
region:'west',
id:'west-panel',
title:'Main Menu',
iconCls:'mainmenu',
split:true,
width: 250,
minSize: 175,
maxSize: 400,
collapsible: true,
margins:'0 0 0 5',
layout:'accordion',
layoutConfig:{
animate:true
},
items: [{
contentEl: 'search',
title:'Search',
border:false,
autoScroll:true, // Allow Scrolling
iconCls:'search'
},{
contentEl: 'config',
title:'Config Information',
border:false,
autoScroll:true, // Allow Scrolling
iconCls:'settings'
},{
contentEl: 'yourinformation',
title:'Your Information',
border:false,
autoScroll:true, // Allow Scrolling
iconCls:'user'
}]
},
new Ext.TabPanel({
region:'center',
deferredRender:false,
activeTab:0,
items:[{
contentEl:'disclamer',
title: 'Use Policy',
iconCls:'usepolicy',
closable:true,
autoScroll:true
},{
layout:'column',
title:'User Information',
iconCls:'user',
defaults:{
style:'padding:5px'
},
items: [{
title: 'User Profile',
iconCls:'user',
height: 563,
collapsible: true,
columnWidth: .35,
contentEl: 'user_information'
},{
xtype: 'tabpanel',
activeTab:1,
columnWidth: .65,
height: 563,
minSize: 175,
maxSize: 563,
items:[{
contentEl:'user_notes',
title: 'Account Notes',
iconCls:'usepolicy',
autoScroll:true
},{
layout:'column',
title:'Group Memberships',
iconCls:'group',
defaults:{
style:'padding:5px',
height: 525,
minSize: 175,
maxSize: 525
},
items: [{
title: 'Group Memberships',
iconCls:'group',
columnWidth: .50,
autoScroll:true,
contentEl: 'current_group_memberships',
tbar: [
action, { // <-- Add the action directly to a toolbar
text: 'Action Menu',
menu: [action] // <-- Add the action directly to a menu
}
],
},{
title: 'Add Group',
iconCls:'add',
columnWidth: .50,
autoScroll:true,
contentEl: 'search_groups'
}]
},{
contentEl:'user_audit',
title: 'User Audit',
iconCls:'reporting',
autoScroll:true
}]
}]},
{
layout: 'accordion',
title: 'Config Options',
iconCls:'settings',
defaults:{
collapsed:true
},
items:[{
contentEl: 'User_Search_Attribute',
title: 'User Search Attribute Option',
iconCls:'settings'
},{
title: 'Application User Policy',
contentEl: 'Application_Use_Policy',
iconCls:'settings'
}]
},{
contentEl:'Reporting',
title: 'Reporting',
iconCls:'reporting',
autoScroll:true
},{
contentEl:'Action_Log',
title: 'Action Log',
iconCls:'reporting',
autoScroll:true
}]
})
]
});

var action = new Ext.Action({
text: 'Action 1',
handler: ShowUsersGroups,
iconCls: 'reporting'
});

//Rerender Search User Button
new Ext.Button({
text: 'Update Config',
handler: update_disclaimer
}).render(document.body, 'config_update_disclaimer');


//Rerender Search User Button
new Ext.Button({
text: 'Update Config',
handler: update_user_search_attribute
}).render(document.body, 'config_update_search_user_button');

//Rerender Search User Button
new Ext.Button({
text: 'Search',
handler: SearchUsers
}).render(document.body, 'user_search_button');

//Code For Drop Down Box For Selection Of Group Type
var converted2 = new Ext.form.ComboBox({
typeAhead: true,
triggerAction: 'all',
transform:'Search_ADtype',
width:130,
forceSelection:true
});
});

mjlecomte
25 Feb 2009, 6:38 PM
If you just need a button I think an action is overkill.

Just do:


tbar: [{
text: 'Test'
}]

That should give you a toolbar with a button in it. Let me know if that works.

mjlecomte
25 Feb 2009, 6:40 PM
Did you pick up some legacy code from someone else?

You're using a mashup of existing html and ExtJS to generate the page is it?

joefox
25 Feb 2009, 6:41 PM
If you just need a button I think an action is overkill.

Just do:


tbar: [{
text: 'Test'
}]

That should give you a toolbar with a button in it. Let me know if that works.

Perfect!
That made it!
Now to add a function to it and picture, i do it like i do a button correct?

**EDIT**

Ok i added a handler. however my icon image wont show up, i created a new linked image in css, but when i look at my page, its not there..



tbar: [{
text: 'Test',
iconCls: 'remove',
handler: joestest
}]

mjlecomte
25 Feb 2009, 6:42 PM
Yeah, that's just a button. So lookup Button in the API and use iconCls, handler, etc.

joefox
25 Feb 2009, 6:47 PM
Yeah, that's just a button. So lookup Button in the API and use iconCls, handler, etc.

Perfect thanks again for all the help! :D

joefox
25 Feb 2009, 6:53 PM
Weird, now the image wont show in front of the action tab.
But function, wording etc works, just no image, it looks like it puts a blank spot for it, but not showing.

CSS

.remove_image{
background-image:url(../images/cross.gif);
}

JAVASCRIPT

tbar: [{
text: 'Remove All Groups',
iconCls: 'remove_image',
handler: joestest
}]