I would like to change default contextmenu and customize the create function with submenus: create service and create application. Then I would also like to associate icons with the service and application submenus.
I searched available solutions on stackoverflow and modified it to suit my requirements. But it does not work.
So far, when I click on submenu the alert box is displayed. But the create node does not work. The icons are not displayed either.
Can someone please tell me how to fix this?
"contextmenu" : {
items : { b
"create" : {
"separator_before" : false,
"separator_after" : true,
"label" : "Create",
"action" : false,
"submenu" :{
"create_service" : {
"seperator_before" : false,
"seperator_after" : false,
"label" : "service",
"icon": "service.png",
action : function (obj) {
alert("creating service");
this.create(obj, "last", {"attr" : {"rel" : "service"}});
}
},
"create_application" : {
"seperator_before" : false,
"seperator_after" : false,
"label" : "app",
"icon": "app.png",
action : function (obj) {
alert("creating app");
this.create(obj, "last", {"attr" : { "rel" : "application"}});
}
}
}
}
}
}
check line 2, and remove the "b":
items : { b
As an example, a snippet of my contect menu (maybe this helps):
"contextmenu": {
"items": {
"create" : false,
"ccp" : false,
"rename" : false,
"remove" : {
"label" : " Delete",
"icon" : "/images/icon/cross.png"
}
}
},
Use full path for the icon image, like this
icon: "/Content/images/deleteIcon.gif"
Related
I've seen a lot of posts that suggest having a flatter structure instead of nesting items. My question is how would I possibly flatten this out?
{
"GroceryItems" : {
"Meat&Seafood" : {
"1234" : {
"category" : "C",
"grams" : false,
"imageURL" : "https://firebasestorage.googleapis.com/v0/b/lesn-1dcc8.appspot.com/o/pork-loin-steaks-23_3.jpg?alt=media&token=06e4fc13-b997-498b-8649-e2d6ee3967f0",
"inStock" : false,
"itemID" : 1234,
"name" : "Pork Loin",
"price" : "$4/piece",
"productDesc" : "Freshly cut Pork Loin, thin and juicy, taste great when fire grilled."
},
"fdsasda" : {
//same stuff
},
"kfdsopwj1" : {
//same stuff
},
"ofejsadi01" : {
//same stuff
},
I've looked at other examples and don't understand it, and when I try to change it, it fails.
I am trying to submit the values from the menu buttons but know this is not possible and that I have to create a hidden field and store the button values there.
Being new to ExtJs I can not seem to figure out how to do this. Below is the basic layout I used to check the button shows and I can choose a colour.
getFormItems : function() {
var me = this;
return [{
xtype : "fieldset",
title : "Items to monitor",
defaults : {
labelSeparator : ""
},
items : [{
xtype : "checkbox",
name : "cpuenable",
boxLabel : _("Will monitor CPU Temperature"),
fieldLabel : _("CPU Temperature"),
checked : false
},{
xtype : 'hiddenfield',
id : 'buttonvalues'
},{
xtype : "button",
name : "colours",
text : _("Choose Colours"),
scope : this,
style : {
marginTop : "10px",
marginBottom : "10px"
},
menu: [{
text: "Main CPU Colour",
menu: {
xtype : "colormenu",
name : "colourc",
value : "000000",
cls : "menubutton-class",
handler: function (obj, rgb) {
var colourmField = this.findField('colourc');
colourmField.setValue(rgb.toString());
alert(colourmField.getValue());
}
}
},{ and so on
Okay, here is an edit for you of my previous post. I give you an example how to fetch all child components you want inside a component:
Example extjs:
{
xtype: 'fieldset',
id: 'fsButtons',
items: [
{
xtype: 'hiddenfield',
id: 'hiddenValues'
},
{
xtype: 'button'
color: '000000'
},
{
xtype: 'button'
color: '555555'
}
]
}
Function to fill the hiddenfield:
function getButtonVars() {
var buttonVars = new Array();
//Get all components with xtype 'button' inside the fieldset with id 'fsButtons'
Ext.Array.each(Ext.ComponentQuery.query('button', Ext.getCmp('fsButtons'), function(button){
buttonVars.push(button.color);
});
Ext.getCmp('hiddenValues').setValue(buttonVars.join(',')); // concats all button values to one string: '000000,555555' etc.
}
I hope it's clear now :)
http://docs-origin.sencha.com/extjs/4.2.2/#!/api/Ext.ComponentQuery
I want to use jtable in jquery UI dialogue widget. I'm loading the content of dialogue widget dynamically as follows
$( "#dialog4" ).dialog({
autoOpen: false,
height:$(window).height() - 50,
width:$(window).width() - 50,
show: {
effect: "blind",
duration: 400,
},
hide: {
effect: "explode",
duration: 400
},
open: function (){
$(this).load("managegroupmembers.jsp");
}
});
my jtable code is present in managegroupmembers.jsp. It is as follows:
<script>
$(function() {
$('groupmembers')
.jtable(
{
title : 'Members in Group',
jqueryuiTheme : true,
selecting : true, //Enable selecting
multiselect : true, //Allow multiple selecting
selectingCheckboxes : true,
paging : true,
pageSize : 20,
pageSizes : [ 20, 50, 75, 100, 200, 500 ],
defaultSorting : 'fullName ASC',
sorting : true,
actions : {
listAction : 'group'
},
fields : {
groupID : {
key : true,
list : false
},
memberID : {
key : true,
list : false
},
fullName : {
create : false,
edit : false,
title : 'Name',
width : '15%'
},
memberRole : {
title : 'Role in Group',
width : '7%',
display : function(data) {
var roleName = "";
if (data.record.memberRole != null) {
roleName = data.record.memberRole.roleName;
}
return roleName;
}
},
memberSince : {
list : true,
title : 'Member Since',
inputClass : 'text ui-widget-content ui-corner-all inputClass'
}
}
});
$('#groupmembers').jtable('load');
});
</script>
<div id="groupmembers" class="ui-widget"></div>
I tried to debug the code using chrome's developer tools and I'm seeing following error:
"cannot call methods on jtable prior to initialization; attempted to call method 'load'"
Can anybody help me here? Thanks in advance.
You are not initializing the jTable because you forgot the # in front of the groupmembers ID in the init code....
$('groupmembers')
should be:
$('#groupmembers')
When i use Ext.ux.touch.grid,an error happened?
"Cannot read property 'features' of undefined "
but it only happen when i use it like this,
this.testGrid = Ext.create('Geo.view.Grid');
in file application.js,a main controller file
config: {
refs: {
main: 'mainview',
worklist: 'worklist',
testGrid: 'testGrid'
},
this is testGrid view file
Ext.define('Geo.view.Grid', {
extend : 'Ext.ux.touch.grid.List',
xtype : 'testGrid',
requires : [
'Ext.ux.touch.grid.feature.Feature',
'Ext.ux.touch.grid.feature.Editable',
'Ext.ux.touch.grid.feature.Sorter',
'Ext.field.Number',
'Geo.store.Grid'
],
config : {
title : 'Grid',
store : true,
columns : [
{
header : 'Text',
dataIndex : 'text',
width : '90%',
editor : {
xtype : 'textfield'
}
},
{
header : 'Amount',
dataIndex : 'amount',
width : '10%',
editor : {
xtype : 'numberfield'
}
}
],
features : [
{
ftype : 'Ext.ux.touch.grid.feature.Sorter',
launchFn : 'initialize'
},
{
ftype : 'Ext.ux.touch.grid.feature.Editable',
launchFn : 'initialize'
}
]
},
applyStore : function() {
return new Geo.store.Grid();
}
});
When direct use it in main view file,it's Correct
items: [
{xtype: 'dashboards'},
{xtype: 'testGrid'}
]
Who know the reason? Thanks a lot
do you set your store to autoload: true, (?)
Am having a controller which basically calls a message window that is displayed for a few seconds. Am trying to add a button to this message window, but its returning [object][object].
Controller
success : function(response) {
this.mWin = Ext.create('App.view.GenMessage');
this.mWin.addMessage(true, LANG.SUCT, LANG.SUCTxt1);
}
View
Ext.define('App.view.GenMessage', {
extend : 'Ext.panel.Panel',
alias : 'widget.genmessage',
initComponent : function() {
this.msgCt = App.genMsgCt
this.msgCt.setWidth(300);
},
addMessage : function(status, title, msg) {
if (status == false) {
delay = 3000;
} else {
delay = 2000;
}
Ext.DomHelper.append(this.msgCt, {
html : this.buildMessageBox(status, title, msg)
}, true).slideIn('t').pause(delay).ghost("t", {
remove : false
});
},
/*
* buildMessageBox
*/
buildMessageBox : function(status, title, msg) {
console.log('buildMesssage');
switch (status) {
case true :
var icon = GENHTML.tick;
break;
case false :
var icon = GENHTML.warning;
break;
}
return ['<div class="genMsgDiv">', icon,
'<div class="genMsgHd leftMargin">', title,
'</div><div class="H3 leftMargin">', msg,
'</div></div>'].join('');
}
What i did was declare a button like
var button={
id: 'button1',
text :'Button1'
}
and then add to the div class mentioned above and return
['<div class="genMsgDiv">', button].join();
But, what i see in the screen is [object][object] in place of the button.
Could anyone please tell me what am doing wrong here. Is this the correct way to add the button
EDIT
Since we cannot add a button to a div, i tried doing
var config = Ext.create(Ext.panel.Panel, {
itemId : 'GENMSGPANEL',
height : 150,
cls : 'msg effect1',
border : false,
html : '<div class="genMsgDiv">' + icon +
'<div class="genMsgHd leftMargin">'+ title +
'</div><div class="H3 leftMargin">'+ msg +
'</div></div>',
items : [{
xtype : 'panel',
//cls : 'winTitle',
}, {
xtype : 'form',
itemId : 'GENMSGFORM',
border : false,
title : '',
buttonAlign : 'center',
fieldDefaults : {
msgTarget : 'side',
labelWidth : 110,
size : 30
},
buttons : [{
text : LANG.BTYES,
iconCls : 'icon-tick-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'genDelete',
id : 'BTYES'
}, {
text : LANG.BTNO,
iconCls : 'icon-cross-tb',
iconAlign : 'right',
cls : 'tip-btn',
action : 'notDelete',
id : 'BTNO'
}]
}]
});
return config;
But, even this did not return anything
The answer is simple: You cannot add a ExtJS Button into the html config property of a component. This one is just for plain html. ExtJS objects belongs into the items array.
Decide to place your html content into a box (xtype for component) and add this to the items array. Then you can add your button. Don't use the html at all in your case.
You may change/set any required classes. Please note that I haven't check the way you manipulate the DOM.
// you may use a layout to align them
items : [
{
xtype: 'box',
cls : 'msg effect1',
html : '<div class="genMsgDiv">' + icon +
'<div class="genMsgHd leftMargin">'+ title +
'</div><div class="H3 leftMargin">'+ msg +
'</div></div>'
},
{
xtype : 'panel',
//cls : 'winTitle',
},
...