I want to put a download link inside Dojo grid . can any one provide me way to generating link in json
Layout
var layout = [{
field: 'id',
name: 'id',
width: '100px'
},
{
field: 'Download',
name: 'Download',
width: '100px'
}];
Java code for generation Json
JSONObject json = new JSONObject();
json.put("Id", "1");
json.put("ProductName", "Download Link");
JSONArray finalArray = new JSONArray();
finalArray.add(json);
setResponse(getTopLevelJsonObject(finalArray).serialize(true));
If you're asking how to put a link in a dgrid cell, then you need to override the column's renderCell function.
e.g.
columns: {
id: {label:'ID'},
name: {
label:'Name',
renderCell: function(object, value, node, options) {
var anchor = domConstruct.create("a");
anchor.href = "http://www.google.com";
anchor.innerHTML = value;
return anchor;
}
}
},
Here's a jsfiddle of an anchor/link in a dgrid cell.
Related
I'm trying to create a custom grid with columns for Feature Predecessors and Successors.
I've managed to extract the data and display the relevant formatted IDs of the pre+suc in clear text. Now I would like to format these as "standard" FormattedIDs with QDP/click options.
My display looks like this, is this the right path, what should I return in order to have correct formatting?
var myGrid = Ext.create('Ext.Container', {
items: [
{
xtype: 'rallygrid',
columnCfgs: [
'FormattedID',
'Name',
{ // Column 'Successors'
xtype: 'templatecolumn',
tpl: Ext.create('Rally.ui.renderer.template.FormattedIDTemplate'),
dataIndex: 'Successors',
renderer: function(value, metaData, record) {
//console.log('Display in renderer: ', record.successorStore);
var mFieldOutputSuc = '';
var i;
var mDependency;
for (i = 0; i < record.successorStore.getCount(); i++) {
mDependency = record.successorStore.getAt(i);
console.log('mDependency = ', mDependency);
mFieldOutputSuc = mFieldOutputSuc + mDependency.get('FormattedID') + '<br>'; // Correct return value?
}
return mFieldOutputSuc;
}, //renderer: function(value, metaData, record) {
}, // Column 'Successors'
I'd check out this utility method: https://help.rallydev.com/apps/2.1/doc/#!/api/Rally.nav.DetailLink-method-getLink
You should be able to just put that in there where you have your //Correct return value? comment:
mFieldOutputSuc += Rally.nav.DetailLink.getLink({
record: mDependency
});
There are some more config options you can pass as well, to customize the link further, but I think that should get you started...
I have a rally grid that shows defects. I want do add a column that shows the number of days a defect has been open.
I know can do that by adding a custom renderer in the column configs, but I would also like to sort on this column. Unfortunately, the renderer does not change the sorting of the column.
I think I might be able to use the convert() function on the store instead to create a new virtual column (in this case openAgeDays), but I'm not sure how to do this from the constructor--I presume I make some changes to storeConfig?
Does anyone have an example of how to use a convert function (assuming that this is the right way to do it) to add a new virtual, sortable column to a rally grid?
this.grid = this.add({
xtype: 'rallygrid',
model: model,
disableColumnMenus: false,
storeConfig: [...]
As is the answer in the duplicate, you can add a doSort to the column:
{dataIndex: 'Parent', name: 'Parent',
doSort: function(state) {
var ds = this.up('grid').getStore();
var field = this.getSortParam();
console.log('field',field);
ds.sort({
property: field,
direction: state,
sorterFn: function(v1, v2){
console.log('v1',v1);
console.log('v2',v2);
if (v1.raw.Parent) {
v1 = v1.raw.Parent.Name;
} else {
v1 = v1.data.Name;
}
if (v2.raw.Parent) {
v2 = v2.raw.Parent.Name;
} else {
v2 = v2.data.Name;
}
return v1.localeCompare(v2);
}
});
},
renderer: function(value, meta, record) {
var ret = record.raw.Parent;
if (ret) {
return ret.Name;
} else {
meta.tdCls = 'invisible';
return record.data.Name;
}
}
},
Ok, so I would like to have a slider that looks like this one.
Just can't figure out where we can at least have these delimiter separators? So if you see there are 7 delimiters and we have large labels on the first 4-th and the last delimeter.
How would you approach this task?
This is a rather old question but I was faced with the very same need today. Building on GenieWanted's answer, I came to this:
...
{
xtype: 'sliderfield',
maxValue: 5,
label: 'Some data',
html: '<table width="100%" align="left"><tr><td width="25%">Min</td><td width="50%" align="center">Med</td><td width="25%" align="right">Max</td></tr></table>'
}
...
which works very well for me, and avoids messing around to find the correct number of needed. Also, I suspect that results would vary from device to device using .
There is no way of adding a label inside sliderfield. However, you can indeed add HTML to acheive the required output. On the config panel, go to HTML property, and add something like this:
<div style="padding-left:1em">| | |<div>Low Average High </div></div>
The output I have got:
You just need to playaround with the alignment of your text in the HTML. That will do!
Good Luck!
You can create Custom Slider like this
Ext.ns('Ext.ux');
Ext.ux.CustomSlider = Ext.extend(Object, {
valueTextClass: 'x-slider-value-text',
showSliderBothEndValue: true,
sliderEndValueStyle: 'color: black',
constructor: function(config){
Ext.apply(this, config);
Ext.ux.CustomSlider.superclass.constructor.apply(this, arguments);
},
init: function(parent) {
var me = this;
parent.on({
painted: {
fn: function(component) {
if (me.showSliderBothEndValue) me.showSliderEndValue(this);
if (!this.valueTextEl) {
this.valueTextEl = component.element.createChild({
cls: me.valueTextClass
});
}
}
}
});
},
showSliderEndValue: function(slider) {
var sliderPosX = slider.getComponent().getThumb().element.getX();
var thumbHeight = slider.getComponent().getThumb().element.getHeight();
var sliderLength = slider.getComponent().element.getWidth();
var minValueEl = slider.getComponent().element.createChild();
minValueEl.setHtml(slider.getComponent().getMinValue());
minValueEl.applyStyles('overflow:hidden;position:absolute');
minValueEl.applyStyles(this.sliderEndValueStyle);
minValueEl.setLeft(14);
minValueEl.setTop(thumbHeight -7);
var maxValueEl = slider.getComponent().element.createChild();
maxValueEl.setHtml(slider.getComponent().getMaxValue());
maxValueEl.applyStyles('overflow:hidden;position:absolute');
maxValueEl.applyStyles(this.sliderEndValueStyle);
maxValueEl.setLeft(sliderLength-45);
maxValueEl.setTop(thumbHeight - 7);
}
});
And create slider like this
var slider = {
xtype: 'sliderfield',
flex : 6,
label: "Percentage",
name: "Percentage",
value : 50,
minValue : 0,
maxValue : 100,
labelWrap : true,
labelAlign : 'left',
increment : 10,
plugins: [new Ext.ux.CustomSlider({
showSliderBothEndValue: true
})],
listeners: {
painted: function (slider) {
var sliderPanelItems = this.parent.getInnerItems();
sliderPanelItems[1].setValue(this.getValue());
},
change: function (me,slider, thumb, newVal, oldVal, opts) {
var sliderPanelItems = this.parent.getInnerItems();
sliderPanelItems[1].setValue(newVal);
}
}
};
Result will be like this
I did this using this link
Below I have pasted a function to show the data in the datagrid based on the function call shownames('a'). DataGrid is not refreshing for different characters like shownames('b')...and so on . Or, How do I change the data in the datagrid without destroying the grid completely ?
function shownames(chr) {
require([
"dojox/grid/EnhancedGrid",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/_base/xhr",
"dojo/domReady!"
], function(DataGrid, Memory, ObjectStore, xhr){
var grid, dataStore;
xhr.get({
url: "http://localhost/xampp/namedb.php?name_idx="+chr,
handleAs: "json"
}).then(function(data){
dataStore = new ObjectStore({ objectStore:new Memory({ data: data.items }) });
if(dijit.byId("namegrid")) {
grid.destroy();
} else {
grid = new dojox.grid.EnhancedGrid({
id: "namegrid",
store: dataStore,
query: { name_id: "*" },
queryOptions: {},
structure: [
{ name: "Name", field: "name", width: "25%" },
{ name: "Actual Meaning", field: "meaning", width: "50%" },
{ name: "name_id", field : "name_id", hidden: true }
]
}, "alphanames");
grid.startup();
}
/*
dojo.connect(grid, "onRowClick", grid, function(evt){
var idx = evt.rowIndex,
item = this.getItem(idx);
// get the ID attr of the selected row
var value = this.store.getValue(item, "country_name");
});
*/
});
});
}
Thanks,
Raja
you should not refresh the grid the way you posted it !
First you need to initialize a grid at startup. So the grid shows you some data. Dont create a grid each time !!!! AFTER that your function has to communicate with the grid by using it's methods !
I constantly use this bulk to refresh the grid:
var grid= // CREATE GRID IN HERE
function yourFunction(id) {
var prepareQuery={};
prepareQuery["name_id"]=id; // Create a query based on id
grid._pending_requests={}; // Stop everything thats loading
grid._setQuery(prepareQuery); // Pass query to the grid
grid._refresh(true); // Refresh grid
}
It may also work with your code, but you may have to do some adaptions.
I am using extjs4,I need to add check box group based on my JSON Object,
JSON
{"Provider":[{"id":3,"name":"Beta House","npi":0,"taxId":0,
"address":{
"state":{"id":"1","stateName":"Alabama","code":"AL"},
"zipcode":0,"country":"USA","email":"beta#gmail.com"},
"type":"CP","LabProvider":[],"ListOfProvider":[]}]}
ExtJs
Ext.define('providerList', {
extend: 'Ext.data.Model',
fields: ['id','name']
});
var provider = Ext.create('Ext.data.Store', {
model: 'providerList',
autoLoad: true,
proxy: {
type: 'ajax',
url : url+'/lochweb/loch/clinicalProvider/getAll',
reader: {
type: 'json',
root: 'Provider'
}
}
});
Panel
var checkboxconfigs = [];
provider.each(function(record) {
checkboxconfigs.push(
{
boxLabel: 'record.id',
name: 'record.name'
})
});
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:checkboxconfigs
});
var patientProvider = new Ext.FormPanel({
renderTo: "patientProvider",
frame: true,
title: 'Association',
bodyStyle: 'padding:5px',
width: 500,
items: [{
checkboxes
}],
});
There is no check box in the form.How to populate checkbox from JSON store
You can define the items array before you use it as children of checkboxes. Each element of items array is created base on each record of the store.
var items = [];
provider.each(function(record) { items.push({boxLabel: 'up-to-you', name: 'up-to-you'}) }, );
var checkboxes = new Ext.form.CheckboxGroup({
fieldLabel:'Providers',
columns:2,
items:items
});
Here you can determine the boxLabel and name for each checkbox (the attributes of record may be used as prefix, suffix...)
A couple of tips:
in the definition of panel items remove {} around checkboxes, like this:
items: [ checkboxes ]
second, make sure that the store is available when you are populating checkboxes.
I have a similar situation in my app where store is available after panel is rendered. Panel is dynamically populated with list of checkboxes like this:
panel.add(new Ext.form.CheckboxGroup({
columns: 1,
vertical: true,
items: checkItems
}));
panel.doLayout();
EDIT: another tip:
remove qutoes '' from this code:
{
boxLabel: 'record.id',
name: 'record.name'
}
or you will end up with all labels 'record.id'