I have some store, which is formed data. On panel, it looks how "fieldName" and text field (in depension from invoked form).
For example, on one form is displayed "name document" and field, on another: date of selling and date field. Data is formed dynamically.
Here is store:
someStore = new Ext.data.JsonStore({
url: objectUrlAddress,
baseParams: {
'objectID' : objectID
},
root: 'Fields',
fields: [
{name: 'Hint'},
{name:'Type', type: 'int'},
{name: 'Value'},
{name: 'Index', type: 'int'},
{name: 'IsRequired', type:'bool'},
{name: 'Identifier'},
{name: 'EnumList'},
{name: 'Directory'},
{name: 'Data'}
]});
Here's grid
var templateGrids = new Ext.grid.EditorGridPanel({
id: 'tableId',
height:300,
width: '100%',
clicksToEdit:1,
frame: true,
store: tableTempStore,
columns:
[{header: 'Объект', width:200, dataIndex: 'Hint'},
{header: 'Значение',
dataIndex: 'Value',
width:300,
editor: {
xtype: 'textfield'
},
getCellEditor: function(record) {
var xtype = null,
args = {
fieldLabel: record.get('Hint'),
allowBlank: !record.get('IsRequired'),
value: record.get('Data'),
disabled: false
};
switch ('Type') {
case 0: // int
xtype = new Ext.form.NumberField();
args.allowDecimals = false;
break;
case 1: // decimal
xtype = new Ext.form.NumberField();
args.allowDecimals = true;
break;
case 2: // text
xtype = new Ext.form.TextField();
break;
case 3: // date
xtype = new Ext.form.DateField();
args.emptyText = 'дд.мм.гггг чч:мм';
args.format = 'd.m.y H:i';
break;
case 4: // enum
break;
case 5: // sql
var dataValues = Ext.util.JSON.decode(record.get('EnumList'));
var dataArray = Object.keys(dataValues).map(function(k) { return [k, dataValues[k]] });
xtype = 'Ext.form.field.ComboBox ';
args.store = new Ext.data.ArrayStore({
fields: [
{name: 'myId', type: 'string'},
{name: 'displayText'}
],
data: dataArray
});
break;
}
return new Ext.grid.CellEditor ({
field: Ext.create(xtype, args)
});
}
}]
});
Type of cell may be displayed in a grid in dependence from value of 'Type'.
For example if Type == 2, editor of column must be textvalue and etc. But my listener is not working and type is not changing. Besides, i get error "record.get is not a function".
Please help me to understand what wrong am I doing?
Related
I have some store, which is formed data. On panel it looks how "fieldName" and text field (in depension from invoked form). For example, on one form is displayed "name document" and field, on another: date of selling and date field. Data is formed dynamicly
Here is store:
tableTempStore = new Ext.data.JsonStore({
url: objectUrlAddress,
baseParams: {
'objectID': objectID
},
root: 'Fields',
fields: [{
name: 'Type',
type: 'int'
}, {
name: 'Value'
}, {
name: 'IsRequired',
type: 'bool'
}, {
name: 'Identifier'
}, {
name: 'Data'
}],
listeners: {
load: function(obj, records) {
Ext.each(records, function(rec) {
var item = null;
switch (rec.get('Type')) {
case 0:
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = !isRequired;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
case 1:
item = new Ext.form.NumberField();
item.id = rec.get('Identifier');
item.fieldLabel = rec.get('Hint');
var isRequired = rec.get('IsRequired');
item.anchor = '100%';
item.allowBlank = !isRequired;
item.allowDecimals = true;
item.disabled = editDisabled;
item.value = rec.get('Data');
break;
}
if (item != null) {
grid.add(item);
tableValue = Ext.getCmp('propGrid').doLayout();
source[item.fieldLabel] = tableValue;
//grid.doLayout();
}
});
grid.setSource(source);
}
}
});
This code had worked in a form, but I need to use Grid (or Editor Grid). I know, how displayed field name ("document name" and etc.), but I don't understand, how displayed text field or etc. For form I had used doLayout. How can I do this?
Here is Grid:
var templateGrids = new Ext.grid.EditorGridPanel({
id: 'tableId',
height:300,
width: '100%',
clicksToEdit:1,
frame: true,
store: tableTempStore,
columns: [
{header: 'Value' dataIndex: typeValue},
{header: 'Name' dataIndex: ''}]
})
Please, help me! Thanks for answers in advance!
I have a SharePoint web service that retrieves documents from a farm. The call is a successful 200 and when I open it I can validate the JSON fine.
However it is not rendering on the page. Instead throwing a:
SyntaxError: missing ; before statement[Learn More] getTopics:1:8
getTopics is part of the Visual studio wsp project which compiles, deploys, and successfully retrieves the data. Is there something I'm missing here?
Code
var title = 'List';
var gridHeight = 400;
var uniqueId = 'topics';
var url = '/_vti_bin/MetaDataDoc/MetaDoc.svc/getTopics/?folder=/general_documents/';
var dSort = 'modified';
var dSortOrder = 'DESC';
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder)
function buildGrid(divId, title, gridHeight, url, dSort, dSortOrder) {
Ext.define('gridModel', {
extend: 'Ext.data.Model',
fields: [
{ name: "name", mapping: "name", sortable: true, convert: Ext.util.Format.trim },
{ name: "upcase_name", mapping: "name", convert: Ext.util.Format.uppercase },
{ name: "upcase_desc", mapping: "para", convert: Ext.util.Format.uppercase },
{ name: "url", mapping: "url", sortable: true},
{ name: "modified", mapping: "date", sortable: true, type: "date", dateFormat: "n/j/Y g:i A" },
{ name: "type", mapping: "type", sortable: true },
{ name: "size", mapping: "size", sortable: true, type: 'int'},
{ name: "desc", mapping: "para" },
{ name: "doclist", mapping: "doclist", convert: nestedData },
{ name: "title", mapping: "title" }
]
});
function toggleDetails(btn, pressed) {
grid[divId].columns[1].renderer = pressed ? renderNameDetails : renderName;
grid[divId].columns[0].renderer = pressed ? renderTypeDetails : renderType;
grid[divId].getView().refresh();
}
var gridStore = Ext.create('Ext.data.Store', {
model: 'gridModel',
proxy: {
type: 'jsonp',
url: url,
reader: {
type: 'json',
record: 'doc',
root: 'doclist'
}
}
});
if (dSort) {
gridStore.sort(dSort, dSortOrder);
}
var searchField = new SearchField({ store: gridStore, width: 300 });
var toggleButton = new Ext.Button({
enableToggle: true,
border: true,
text: 'View Details',
toggleHandler: toggleDetails,
pressed: false
});
grid[divId] = Ext.create('Ext.grid.Panel', {
renderTo: divId,
store: gridStore,
enableColumnHide: false,
enableColumnMove : false,
height: gridHeight,
tbar: ['Filter: ', ' ', searchField, { xtype: 'tbfill' }, toggleButton],
columns: [
{text: 'Type', width: 50, dataIndex: 'type',renderer: renderType},
{text: 'Document Name', flex: 1, dataIndex: 'name', renderer: renderName},
{text: 'Modified', width: 90, dataIndex: 'modified', xtype:'datecolumn', format:'m/d/Y'}
]
});
var loadMask = new Ext.LoadMask(divId, {message: "Loading"});
gridStore.load();
}
getTopics from the web service
public content getTopics(string foldername)
{
content returnContent = new content();
returnContent = getDocs2(foldername);
return returnContent;
}
Add that missing semicolon here (line 8):
buildGrid(uniqueId,title,gridHeight,url,dSort,dSortOrder);
I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.
I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.
the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.
`
var JSONSTORE = new Ext.data.JsonStore ({
// Store Configs
autoLoad: true,
url: 'json_data_call.php',
baseParams: {action: 'read'},
// Reader Configs
storeId: 'store1',
idProperty: 'store1',
root: 'data',
sortInfo: {
field: 'field_name',
direction: 'ASC'
},
fields: [
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'int'}
],
autoSave: false
});
JsonStore.on('exception',JsonSave,this);
JsonStore.on('load',function(){
autoDiagnosticsJsonStore.warn_err_loaded = true;
if(autoDiagnosticsJsonStore.warn_err_loaded)
{
console.log(autoDiagnosticsJsonStore);
}else{
console.log('ERROR');
}
});
/*
* ColumnModel
*/
var ColumnModel = new Ext.grid.ColumnModel ({
defaults: { menuDisabled: true },
columns: [
{header: 'Type', hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.ERR_TYPE == 'WARNING') {
metaData.css = 'cog_bg_orange';
}
if (record.data.ERR_TYPE == 'ERROR') {
metaData.css = 'cog_bg_red';
}
return value;
}
},
{header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
]
});
var errorGrid = new Ext.grid.GridPanel({
id: 'nmerrorGrid',
enableColumnMove: false,
autoHeight: true,
xtype: 'grid',
ds: JsonStore,
cm: ColumnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
$error_panel = "
var errorPanel = new Ext.Panel({
title: 'field_name',
collapsible: true,
anchor: '98%',
height: 300,
frame: true,
layout: 'fit',
items: [ errorGrid ]
});`
If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.
If you create a model for the records of your store, you can create a field that is calculated using the record's values.
Example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstName',
type: 'string'
},{
name: 'lastName',
type: 'string'
},{
name: 'fullName',
calculate: function (data) {
return data.firstName + ' ' + data.lastName;
}
}]
});
The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.
I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).
Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();
You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!
I am grouping a store with a custom field added to my JSON data records in the model:
Ext.define('SCB.RMWB.InfoBar.Model.Message', {
extend: 'Ext.data.Model',
idProperty: 'Message',
fields: [
{name: 'id', type: 'int'},
{name: 'source', type: 'string'},
{name: 'target', type: 'string'},
{name: 'sourceType', type: 'string'},
{name: 'redirectUrl', type: 'string'},
{name: 'message', type: 'string'},
{name: 'targetType', type: 'string'},
{name: 'messageType', type: 'string'},
{name: 'sentDate', type: 'int'},
{name: 'notificationType', type: 'string'},
{name: 'parameters', type: 'string'},
{name: 'read', type: 'boolean'},
{name: 'readDate', type: 'int'},
{
name: 'dateGroup',
type: 'string',
convert: function(value, record) {
var formattedSentDate = dateHelpers.format(record.get('sentDate')),
str = '';
if (formattedSentDate === dateHelpers.today()) {
str = 'Today';
} else if (formattedSentDate === dateHelpers.yesterday()) {
str = 'Yesterday';
} else {
str = 'Last week';
}
return str;
}
}
],
validations: [
{type: 'presence', field: 'id'},
{type: 'presence', field: 'source'},
{type: 'presence', field: 'target'},
{type: 'presence', field: 'sourceType'},
{type: 'presence', field: 'redirectUrl'},
{type: 'presence', field: 'message'},
{type: 'presence', field: 'targetType'},
{type: 'presence', field: 'messageType'},
{type: 'presence', field: 'sentDate'},
{type: 'presence', field: 'notificationType'},
{type: 'presence', field: 'parameters'},
{type: 'presence', field: 'read'},
{type: 'presence', field: 'readDate'},
{type: 'presence', field: 'dateGroup'}
]
});
So it should be apparent that the desired grouping are today, yesterday and last week.
This appears to be working fine but i need to render the groupings in an accordion fashion with a title denoting the grouping.
Currently the template outputs the date grouping every time and i need the grouping title once then those records that belong to that grouping.
This is the current template:
'<tpl for=".">',
'<li class="view-all-details">',
'<h3>{dateGroup}</h3>',
'<div>',
'<p>{[ Ext.util.Format.ellipsis(values.message, 100, true) ]}</p>',
'<span class="time-frame">{[ SCB.RMWB.Infobar.utils.dateRangeMsg(values.sentDate) ]}</span>',
'</div>',
'</li>',
'</tpl>'
I know the template will not currently output what i need but am unsure how to group the records in the view with a title.
I know question is 5 years old but I have got same requirement. So I have worked around for the same and got solution from my end so I am sharing here.
For this inside of XTemplate you need to check if condition to show common header for date group and handle one variable to check type of date-group.
How to check if condition check tpl? see below example:-
'<tpl for="kids">',
'<tpl if="age > 1">',
'<p>{name}</p>',
'<p>Dad: {parent.name}</p>',
'</tpl>',
'</tpl></p>'
In this FIDDLE, I have created a demo using Ext.view.View, store, model and panel. I hope this will help or guide to you/other folks to achieve your requirement.
Code Snippet
Ext.application({
name: 'Fiddle',
launch: function () {
var message = [],
date,
date1;
/*
* function will calculate diffrence b/w 2 dates
* #param{Date} min
* #param{Date} max
* #return number
*/
function dayDiff(min, max) {
return Math.round((max - min) / (1000 * 60 * 60 * 24))
}
//createing demo message for testing
for (var i = 0; i < 12; i++) {
if (i < 4) {
date = Date.now();
} else if (i >= 4 && i < 8) {
date1 = new Date();
date = date1.setDate(date1.getDate() - 1);
} else {
date1 = new Date();
date = date1.setDate(date1.getDate() - 2);
}
message.push({
text: `Hello I am message ${i+1}`,
sentdate: Ext.Date.clearTime(new Date(date)),
id: i + 1
})
}
//Create Message model
Ext.define('Message', {
extend: 'Ext.data.Model',
fields: ['id', 'text', {
name: 'sentdate',
type: 'date'
}, {
name: 'dateGroup',
type: 'string',
convert: function (value, record) {
var sentDate = record.get('sentdate'),
str,
diff = dayDiff(new Date(sentDate), Ext.Date.clearTime(new Date()));
if (diff == 0) {
str = 'Today';
} else if (diff == 1) {
str = 'Yesterday';
} else {
str = 'Last week';
}
return str;
}
}
/*, {
name: 'group',
type: 'int',
mapping: 'dateGroup',
convert: function (value, rec) {
switch (rec.get('dateGroup')) {
case 'Today':
value = 0;
break;
case 'Yesterday':
value = 1;
break;
default:
value = 2
}
return value;
}
}*/
],
// sort: 'group'
});
//create message store
Ext.create('Ext.data.Store', {
storeId: 'message',
model: 'Message'
});
//Create data view
//we can also use using xtype:'dataview' inside of items
var view = Ext.create('Ext.view.View', {
height: window.innerHeight,
//overflowY: 'auto',
store: 'message',
tpl: new Ext.create('Ext.XTemplate',
'<tpl for=".">',
'<tpl if="this.isSameGroup(values.dateGroup)"><div class="x-group-header"><b>{[this.doShowGroup(values.dateGroup)]}</div></b></tpl>',
'<div class="x-message-item ">{text} <span>{[Ext.Date.format(values.sentdate,"d M y")]}<span></div>',
'</tpl>', {
isSameGroup: function (group) {
return this.currentGroup != group;
},
doShowGroup: function (group) {
this.currentGroup = group;
return group;
}
}),
itemSelector: '.x-message-item',
emptyText: 'No data available',
renderTo: Ext.getBody()
});
//create panel
Ext.create('Ext.panel.Panel', {
title: 'Rendering a custom view from a grouped store with a title for the grouping',
items: [view],
renderTo: Ext.getBody(),
listeners: {
afterrender: function () {
this.down('dataview').getStore().loadData(message);
}
}
});
}
});