Maybe someone can give some ideas, how to add item to the end of combobox dropdown, and make it "different" for example put separator before it or make it bold. Combobox uses sorted (by name) store, and on load there is added item which I want to make different.
Ext.define('Plugin.workspace.store.FavouriteCarStore', {
extend : 'Plugin.workspace.store.CarStore',
alias : 'store.favouritecar',
filters : [{
property : 'favorite',
value : true
}],
listeners : {
load : function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.add(rec);
}
}
});
combo uses this store:
tbar : [{
xtype : 'combo',
width : 200,
editable: false,
store : {
type : 'favouritecar'
},
bind : {
value : '{workspace}'
},
tpl : '<ul class="x-list-plain"><tpl for="."><li role="option" class="x-boundlist-item">{name}</li></tpl></ul>',
displayTpl : '<tpl for=".">{name}</tpl>',
listeners : {
'select' : 'onSelectWorkspace'
}
}].
This code adds item, which looks like others, and places it depending on sort.
I use 5.1 ExtJS.
EDIT: solution to add item to list end.
sorters : [{
sorterFn : function(rec1, rec2) {
if (rec1.id != 'showAll' && rec2.id != 'showAll') {
return ((rec1.get('name') > rec2.get('name')) ? 1 : (rec1.get('name') === rec2.get('name') ? 0 : -1));
} else {
return ((rec1.id == 'showAll') ? 1 : -1);
}
}
}],
Method 1
Use a custom cls on the combo's listConfig:
listConfig: {
cls: 'thisComboMakesLastItemDifferent'
},
And then use CSS to make the last item different:
.thisComboMakesLastItemDifferent li:last-child {
color: red;
font-weight: bold;
}
Method 2
Since you are marking your "different" item with favorite: true, you can code it in the template:
tpl: '<tpl for="."><li role="option" class="x-boundlist-item favorite-{favorite}">{name}</li></tpl>',
And then, again, use CSS:
.favorite-true:before {
content: 'FAV: '
}
Note that the first method focuses on making the last item different regardless of what item it is. The second method makes specific item different (you need extra logic to make sure it is the last; you have one already).
See both methods in action: https://fiddle.sencha.com/#fiddle/sdj
Maybe you can use store.insert(store.indexOf(store.last()) index, rec) or store.insert(store.count() - 1, rec)?
load : function(store) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
filterchange(store, filters, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
sort(store, eOpts) {
somewhere.static.setShowAllAsLastRecordOfStore(store);
}
setShowAllAsLastRecordOfStore: function(store) {
var rec = {
id : 'showAll',
name : 'Show All',
favorite : true
};
store.remove(store.findRecord('id', 'showAll'));
store.insert(store.indexOf(store.last()) index, rec);
// or
store.insert(store.count() - 1, rec);
}
Related
jQgrid table is workin fine. In the last line I've enabled column filtering. Search/Filtering in other column is working fine. But not working on the the Status column that has been generated from formatter
$('#jqGrid').jqGrid({
datatype: "local",
data : res.data,
colModel: [
{
label : 'Batch No.', name:'batch_no', firstsortorder:'asc'
},
{
label : 'Batch Wt.', name:'expected_batch_wt', formatter:'number', align:'right'
}
,
// ...
// ...
{
label : 'Status'
,formatter:function (cellvalue, options, rowObject){
if(condition)
status = 'MSG 1';
else if(condition)
status = 'MSG 2';
else
status = 'DEF MSG';
return status;
}
,align : 'center'
// ,sortable : false
}
],
rowNum : 1000,
rownumbers : true,
pager : '#jqGridPager',
caption : `CURRENT STOCK REPORT`,
height : '500px',
width : '1500',
footerrow : true,
userDataOnFooter : true,
gridComplete : function(){
var $grid = $('#jqGrid'),
sum_batch_count = $grid.jqGrid('getCol', 'batch_no', false, 'count'),
sum_batch_wt = $grid.jqGrid('getCol', 'expected_batch_wt', false, 'sum');
$grid.jqGrid('footerData', 'set', {
'batch_no' : sum_batch_count,
'expected_batch_wt' : sum_batch_wt
});
}
});
jQuery("#jqGrid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
In your case datatype is local and the formatter shows certain value depending on condition. This value is not connected with your actual local data. When a datatype is local the search is performed within local data array - in your case this is: res.data. Since this data does not contain your new constructed values, the search return nothing.
To solve the problem one possible solution is to use unformatter function.
Depending on the jqGrid version used (Guriddo jqGrid, free-jqGrtid, jqGrid <= 4.7) you have diffrent options, but is needed to know the version. I recommend you too to search this site for solving the problem you have.
For some reason, the blur event doesn't get fired when the below floating panel loses focus. However, when I listen to the 'el' of the panel for the blur event, it gets registered as shown in the listeners config. What I want to do is hide the panel when the blur event occurs. How do I get access to the parent panel ?
Ext.define('NoteKeeper.view.tabs.AttachmentPanel',{
extend : 'Ext.panel.Panel',
alias : 'widget.attachmentPanel',
itemId : 'attachmentPanel',
floating : true,
focusable : true,
width : 200,
height : 150,
layout : {
type : 'vbox'
},
items : [
{
xtype : 'grid',
store : null,
columns : [
{
text : 'File Name',
dataIndex : 'fileName'
},
{
dataIndex : 'remove'
}
]
},
{
xtype : 'button',
text : '+'
}
],
listeners : {
el: {
blur: {
fn: function()
{
console.log( this );
//how do I access the 'attachmentPanel' from here
//so I can hide it ?
}
}
}
},
noteId : null,
initComponent : function()
{
this.callParent(arguments);
}
});
Please note that there can be multiple instances of these 'attachmentPanel's.
The following appears to work fine:
listeners : {
el: {
blur: {
fn: function()
{
console.log(this);
var elId = this.id;
var attachmentPanels = Ext.ComponentQuery.query('#attachmentPanel');
Ext.Array.forEach( attachmentPanels, function(cmp){
if(cmp.id == elId)
{
cmp.hide();
return false;
}
});
}
}
}
Please let me know if there is better/more efficient solution. Thanks!
There is a reference from the element to the owning component, in form of the component property, so from the scope of the element, you can access the panel like so:
var attachmentPanel = this.component;
I am trying to apply internationalization to my web app that uses JSP pages.I found this link How to internationalize a Java web application? and it really helped me.
However I am now trying to use the given tag fmt:message tag within my primeui datatable's headerText so that I can see column name of my datatable in spanish language.But it's being displayed as text on the screen.Whereas I want it to function as it does on my JSP page i.e to pick user.data.userName="spanish translation for username" from my properties file text_es.properties.
Below is the code for my datatable which is included in script tag on my JSP:
$(function() {
$('#tbllocal').puidatatable({
caption : 'Inbox Tasks',
paginator : {
rows : 5
},
columns : [
{
field : 'userName',
**headerText : '<fmt:message key='user.data.userName'/>',**
sortable : true
},{
field : 'userEmailId',
headerText : 'userEmailId',
sortable : true
} ],
datasource : function(callback) {
$.ajax({
type : "GET",
url : 'crud',
dataType : "json",
context : this,
success : function(response) {
callback.call(this, response);
}
});
},
selectionMode : 'single',
rowSelect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Selected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
rowUnselect : function(event, data) {
$('#messages').puigrowl('show', [ {
severity : 'info',
summary : 'Row Unselected',
detail : (data.firstName + ': ' + data.lastName)
} ]);
},
jsonReader : {
response : "response"
}
});
});
Still there is no support for including html in datatable header till primeui 2.0 i have also posted this question on frimeui forum please refer following link for further details
http://forum.primefaces.org/viewtopic.php?f=16&t=42417
I have a codeset that dynamically creates an "option" in a select box. But, since we're using Knockout, when I go to SELECT that newly created option, and click on it, it gets removed, e.g. DISAPPEARS! Poof!!!!
So, here's the create script:
function createNewGroup()
{
var htmlSelect = document.getElementById('groups');
var optionValue = document.getElementById('newgroupname');
if (optionValue.value === '')
{
alert('Please enter group name.');
optionValue.focus();
return false;
}
if (isOptionAlreadyExist(htmlSelect, optionValue.value))
{
optionValue.value = "";
alert('Group name already exists.\n\nPlease try again.');
optionValue.focus();
return false;
}
var selectBoxOption = document.createElement("option");
selectBoxOption.value = optionValue.value;
selectBoxOption.text = optionValue.value;
htmlSelect.add(selectBoxOption, null);
optionValue.value = "";
alert("New group has been added successfully.");
optionValue.focus();
return true;
};
Since this is a KNOCKOUT observable, how to keep it in the box when I select it, moreover, how do I send that new value back to JSON object. Here's an example of that:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
]
}
Hence, the admin user can create a new user so it can look like this:
{"groups":[
{
"groupname" : "Administrator",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Administrator');" }
},
{
"groupname" : "Guest",
"attr" : { "id" : "li.attr.node_2",
"href" : "#",
"data-bind" : "click: grpMgmt('Guest');" }
}
],
"users":[
{
"groupname" : "Joes Users",
"attr" : { "id" : "li.attr.node_1",
"href" : "#",
"data-bind" : "click: grpMgmt('Joe');" }
}
]
}
OK, I'll stop writing for now... thanks...
If you're using knockout (which I can't actually see) all you need to do is bind your select box to an observable array and when you need to add a new item just push it onto the array and knockout will add it to the list for you.
Knockout should essentially replace that script you've included with a lot less, much more simplistic code.
I have a problem with JsTree's contextmenu, how can I remove the default elements from the contextmenu like Create, Delete, Rename? I want to provide elements of my own, but the default elements are still at the contextmenu.
"contextmenu" : {
"items" : {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
}
I had this issue a couple of days ago but haven't yet decided if this is a bug or a feature. It may be related to the order in which the plugins are loaded.
What worked for me was returning the items from a function:
"contextmenu" : {
"items" : function ($node) {
return {
"IsimVer" : {
"label" : "İsim Değiştir",
"action" : function (obj) { this.rename(obj); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { this.create(obj); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { this.remove(obj); }
}
};
}
}
After some searching it seems that the default behaviour is for your menu items to extend the defaults, so this is a feature. Unfortunately the documentation currently lacks the detail on this point.
If you like to modify labels of existing items or remove a few, a simple solution like below will work
"contextmenu": {
"items": function(node) {
var defaultItems = $.jstree.defaults.contextmenu.items();
defaultItems.create.label = "Ekle";
delete defaultItems.ccp;
return defaultItems;
}
}
This will set "Create" items label as "Ekle" and remove cut copy paste from default items.
Just set value to false in items object. For example, to disable edit (cut, copy, paste) menu try this:
contextmenu : {
items : {
"ccp" : false
}
}
Set ccp, create, rename, remove to false like this :
plugins : ["themes","json_data","ui","crrm", "hotkeys", "types", "contextmenu"],
contextmenu : {
items : {
"IsimVer" : {
"label" : "IsimVer",
"action" : function (obj) { alert("IsimVer"); }
},
"Ekle" : {
"label" : "Ekle",
"action" : function (obj) { alert("Ekle"); }
},
"Sil" : {
"label" : "Sil",
"action" : function (obj) { alert("tiga"); }
},
"ccp" : false,
"create" : false,
"rename" : false,
"remove" : false
}
}