I have a dojo dialog function and want to be able to add a table with 5 rows to it. How can I do this? Below is the code I have.
dojo.require("dijit.Dialog");
dojo.require("dijit.form.TextBox");
dojo.require("dojox.grid.EnhancedGrid");
dojo.addOnLoad(function() {
popup = new dijit.Dialog({
title: "Non-Spatial Permanent Feature Deductions...",
style: "width: 750px; height: 400px",
content: "<input dojoType='dijit.form.Button' type='button' name='name' id='name' label='OK'>"
});
popup.show()
});
If your table row is fixed i.e 5 than you may be do one simply thing that create a html file have table of 5 rows and call that file inside dialog.
popup = new dijit.Dialog({
title: "Non-Spatial Permanent Feature Deductions...",
style: "width: 750px; height: 400px",
href:"table.html"
});
When I need a dialog that has a bunch of dijits or custom functionality I end up making a custom dialog dijit. Here's one of my from a current project.
define([
"dojo/_base/declare",
"dijit/_Widget",
"dijit/_TemplatedMixin",
"dijit/_WidgetsInTemplateMixin",
"dojo/i18n!magic/nls/common",
"dojo/text!./templates/emrSelection.html",
"dojo/dom-construct",
"dojo/on",
"dojo/Evented",
"dojo/_base/connect",
"dojo/query",
"dojo/_base/lang",
"dijit/Dialog",
"dijit/form/CheckBox"
],
function (declare, _Widget, _TemplatedMixin, _WidgetsInTemplateMixin, i18n, template, domConstruct, on, Evented, connect, query, lang, Dialog, CheckBox) {
return declare("project.customDialog", [Dialog], {
title: i18n.customDialog.title,
emrIds: [],
constructor: function(/*Object*/ kwArgs) {
lang.mixin(this, kwArgs);
var contentWidget = new (declare([_Widget, _TemplatedMixin, _WidgetsInTemplateMixin], {
closeLabel: i18n.close,
templateString: template,
baseClass: "customDialog"
}));
contentWidget.startup();
this.content = contentWidget;
},
postCreate: function() {
this.inherited(arguments);
},
startup: function() {
this.inherited(arguments);
this._createTable();
},
_createTable : function() {
var that = this;
var i = 0;
var tr = null;
this.store.query().forEach(lang.hitch(this, function(emr){
var state = that.emrIds.indexOf(emr.id) != -1;
if(i++%3 == 0) {
tr = domConstruct.create("tr");
domConstruct.place(tr, that.content.tableBody);
}
var td1c = domConstruct.create("td", {'class':"checkBox"}, tr);
var td1l = domConstruct.create("td", {'class':"label"}, tr);
var box = that._createCheckBox(emr.name, state, emr.id);
domConstruct.place(box.domNode, td1c);
domConstruct.place("<label for='checkbox'>"+emr.name+"</label>", td1l);
}));
},
_createCheckBox : function(name, checked, id) {
var box = CheckBox({
name: name,
value: name,
checked: checked,
emr_id: id,
onChange: lang.hitch(this, function(state){
var id = box.get('emr_id');
var name = box.get('name');
this.emit("tick", {emrId:id, name:name, state:state});
})
}, domConstruct.create("div"));
box.startup();
return box;
}
});
the template
<div class="${baseClass}" data-dojo-attach-point="container" >
<table>
<tbody data-dojo-attach-point="tableBody"></tbody>
</table>
<div class="buttonContainer">
<button class="button" data-dojo-type="dijit.form.Button" data-dojo-attach-point="saveButton">${closeLabel}</button>
</div>
</div>
and then i call it with and use on() to get events from it.
this.dialog = new emrSelection({store: this.emrStore, emrIds: this.emrIds});
this.dialog.startup();
this.dialog.show();
Related
I am trying to incorporate context menu from https://www.oracle.com/webfolder/technetwork/jet/jetCookbook.html?component=menu&demo=contextMenu
using full calender io events and i am unable to understand how to plug in oj component under fullcalender io events.
I am aware that context menus can be accomplised using jquery ui context menu, but i want to know how to use jet code from fullcalendar io events.
Can you please let me know how i can plug in the jet context menu in the below code?
JET
require(['ojs/ojoffcanvas','knockout','ojs/ojbootstrap','ojs/ojarraydataprovider','jquery','ojs/ojknockout',
'fullCalendar','moment','jqueryui','jquerycontextmenu',
'ojs/ojknockout', 'ojs/ojdiagram','ojs/ojformlayout','ojs/ojbutton',
'ojs/ojmenu', 'ojs/ojoption','ojs/ojinputtext','ojs/ojselectcombobox'],
function (ko, Bootstrap,ArrayDataProvider,$) {
function ChartModel() {
var self = this;
self.addressBookData = ko.observableArray([]);
self.columns = ko.observableArray([
{ headerText : 'title', field : 'title'},
{ headerText : 'start', field : 'start'},
{ headerText : 'end', field : 'end'},
{ headerText : 'QuantityOrdered', field : 'QuantityOrdered'},
{ headerText : 'QuantityCompleted', field : 'QuantityCompleted'}
])
this.dataprovider = new ArrayDataProvider(self.addressBookData, { keyAttributes: 'title'});
}
function getE1Data(self,callback) {
var input = {
aliasNaming: true,
findOnEntry: "TRUE",
maxPageSize: "100",
targetName: "XXX",
aliasNaming : true,
targetType: "view",
dataServiceType: "BROWSE",
returnControlIDs: "TABLEX.DOCO|TABLEX.DL01|TABLEX.LITM|TABLEX.STRT|TABLEX.DRQJ|TABLEX.UORG|TABLEX.SOQS|TABLEX.SOCN|TABLEX.SRST"
};
callAISService(input, DATA_SERVICE, function(response) {
if (response.message) {
callback("failed");
} else {
renderData($,self,response.fs_DATABROWSE_V4801C.data.gridData.rowset);
callback("success");
}
});
}
function renderData($,self,data) {
self = this;
this.events = [];
data.forEach(element => {
const obj ={};
const extendedProps ={};
var teststr1 = (element.TABLEX_LITM.value).concat(" - ",(element.TABLEX_DOCO.value));
var teststr2 = (element.TABLEX_DL01.value).concat(" - ",teststr1);
obj.title = teststr2,
obj.start = new Date(element.TABLEX_DRQJ.value),
obj.end= new Date(element.TABLEX_STRT.value),
extendedProps.QuantityOrdered = element.TABLEX_UORG.value,
extendedProps.QuantityCompleted = element.TABLEX_SOQS.value,
extendedProps.QuantityScrapped = element.TABLEX_SOCN.value,
extendedProps.WOStatus = element.TABLEX_SRST.value,
obj.extendedProps = extendedProps,
events.push(obj);
});
this.calendar = $ ('#calendar').fullCalendar(
{
editable: true,
weekends : true,
selectable: true,
selectHelper:true,
timeFormat: 'H(:mm)',
displayEventTime: false,
header:{
left : 'prev,next,today',
center : 'title',
right : 'month,agendaWeek,agendaDay'
},
events: events,
eventClick: function(self,events) {
console.log(events.extendedProps.QuantityOrdered);
console.log(events.extendedProps.QuantityCompleted);
},
eventRender: function (events, element) {
element.attr('href', 'javascript:void(0);');
element.click(function() {
$("#startTime").html(formatDate(events.start));
$("#endTime").html(formatDate(events.end));
$("#QuantityOrdered").html(events.extendedProps.QuantityOrdered);
$("#QuantityCompleted").html(events.extendedProps.QuantityCompleted);
$("#QuantityScrapped").html(events.extendedProps.QuantityScrapped);
$("#WOStatus").html(events.extendedProps.WOStatus);
$("#eventContent").dialog({ modal: true, resizable: true ,effect: "explode",title: events.title, width:350});
});
}
});
}
$(document).ready(function() {
var chartModel = new ChartModel();
getE1Data(chartModel,(status)=>{
ko.applyBindings(chartModel, document.getElementById('calendar'));
});
});
});
JET
HTML
<body
<br />
<div class = "container">
<div id = "calendar"> </div>
</div>
</body>
HTML
Please find the below sample HTML, which used JET libraries like oj-menu using which context menu is acheived:
<body id="content">
<oj-input-text id="filter" class="oj-form-control-max-width-md" label-hint="Filter" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged]]" value="{{filter}}" clear-icon="always">
</oj-input-text>
<oj-input-text id="filter1" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged1]]" value="{{filter1}}" clear-icon="always">
</oj-input-text>
<oj-input-text id="filter2" class="oj-form-control-max-width-md" label-hint="Filter1" label-edge="inside"
placeholder="Type to filter" on-raw-value-changed="[[handleValueChanged2]]" value="{{filter2}}" clear-icon="always">
</oj-input-text>
<oj-table id='table' aria-label='Departments Table'
data='[[dataprovider]]'
scroll-policy='loadMoreOnScroll'
columns-default.sortable='disabled'
columns='{{columns}}'
style='width:100%; height: 1000px;'>
<oj-menu id="ctxMenu" slot="contextMenu" aria-label="Match Edit">
<oj-option value="Action 1">Work Centre Details</oj-option>
<oj-option value="Action 12">Resource Units</oj-option>
<oj-option value="Action 13">Work Day Calendar</oj-option>
</oj-menu>
<div id="eventContent" title="Event Details">
<div id="eventInfo"></div>
</div>
</oj-table>
</body>
I have a parent view which contains a Backgrid view. In the parent view's initialize section I define a variable isWellSelected. The variable is toggled in the Backgrid column logic when a tickbox is checked. I am able to watch the variable toggled when a box is ticked and unticked.
However, once an event fires the variable is no longer in scope for the event to see. I suspect I may need to pass the variable to the Backrgrid view but I am unsure how to do that correctly. Please advise.
app.wellCollectionView = Backbone.View.extend({
template: _.template($('#wellTemplate').html()),
initialize: function() {
this.isWellSelected = false;
// isWellSelected toggled to true when a tickbox is checked in the columns block.
var columns = [...];
// instantiate collection
var wellCollection = new app.wellCollection;
// Set up a grid view to use the pageable collection
var wellGrid = new Backgrid.Grid({
columns: columns,
collection: wellCollection
});
// Initialize the paginator
var paginator = new Backgrid.Extension.Paginator({
collection: wellCollection
});
// Render the template
this.$el.html(this.template());
// Render the grid
this.$el.append(wellGrid.render().el);
this.$el.append(paginator.render().$el);
wellCollection.fetch({reset: true}).then(function () {...});
},
events: {
'click #EvaluateWell': function(){
this.evalWell(event, this.isWellSelected);
console.log("In events - isWellSelected: " + this.isWellSelected);}
},
// More stuff
}
Constructive feedback welcome.
Thanks!
Adding a snippet for "columns" as per JT's request:
var columns = [
{
name: '',
label: 'Select',
cell: Backgrid.BooleanCell.extend({
events : {
'change': function(ev){
var $checkbox = $(ev.target);
var $checkboxes = $('.backgrid input[type=checkbox]');
if($checkbox.is(':checked')) {
$checkboxes.attr("disabled", true);
this.isWellSelected = true;
// Disable all checkboxes but this one
$checkbox.removeAttr("disabled");
} else {
// Enable all checkboxes again
$checkboxes.removeAttr("disabled");
this.isWellSelected = false;
}
}
}
})
}, {
name: "api",
label: "API",
editable: false, // Display only!
cell: "string"
}, {
name: "company",
label: "Operator",
editable: false, // Display only!
cell: "string"
}];
I am trying to add an option to a select element. The value is being given by a user form in a jquery ui modal.
When I use Chrome Developer tools, I can see that the bound object array is indeed getting the new object, but it's not showing up in the select element.
I used $('#company').scope().vendors in the console to bring up the array. It shows items being added to the array, but they aren't showing in the select box.
Here is what I have:
app.js
app.factory('Vendors', function(){
var Vendors = {};
Vendors.list = [
{
id: 1,
name: 'Company 1'
},
{
id: 2,
name: 'Company 2'
},
{
id: 3,
name: 'Company 3'
}
]
return Vendors;
})
app.controller('companyCtrl', function($scope, Vendors){
$scope.vendors = Vendors;
$scope.selectedVendor = 0;
$scope.companySelect = function(){
alert("You chose " + $scope.selectedVendor.name)
}
$scope.addCompany = function(name){
var maxId = 0;
for(var i=0; i<$scope.vendors.list.length; i++){
maxId = $scope.vendors.list[i].id;
}
newVendor = {id:++maxId, name:name};
$scope.vendors.list.push(newVendor)
$scope.selectedVendor = newVendor;
}
})
HTML
<div class="row">
<div class="grid_12" ng-controller="companyCtrl" id="company">
<span>Company</span>
<select ng-model="selectedVendor" ng-change="companySelect()" ng-options="v.name for v in vendors.list">
<option value="">-- Choose Company --</option>
</select>
<small><button onclick="openModal('addCompany');">Add</button></small>
</div>
</div>
Inline JS
$( "#addCompany" ).dialog({
autoOpen: false,
width: 350,
modal: true,
buttons: {
"Create new company": function() {
var name = $('#name').val();
if(name != ''){
$('#company').scope().addCompany(name);
}
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: function() {
$('#name').val( "" );
}
});
function openModal(id){
$('#'+id).dialog('open');
}
I tried creating a jsFiddle, but I guess I'm not too sure how to get everything on there to work yet. But here is my try anyway: http://jsfiddle.net/aPXxe/
Try this:
$scope.$apply(function(){
$scope.vendors.list.push(newVendor);
$scope.selectedVendor = newVendor;
});
Trying to create an inline edit form.
I have a form that looks like this:
var editPic = "<img src='https://s3.amazonaws.com/bzimages/pencil.png' alt='edit' height='24' width='24' style='margin-left: 10px;'/>";
var submitPic = "<img id='submitPic' src='https://s3.amazonaws.com/bzimages/submitPic.png' alt='edit' height='24' width='24'/>";
Ext.define('BM.view.test.Edit', {
extend: 'Ext.form.Panel',
alias: 'widget.test-edit',
layout: 'anchor',
title: 'Edit Test',
defaultType: 'displayfield',
items: [
{name: 'id', hidden: true},
{
name: 'name',
fieldLabel: 'Name',
afterSubTpl: editPic,
cls: 'editable'
},
{
name: 'nameEdit',
fieldLabel: 'Name',
xtype: 'textfield',
hidden: true,
cls: 'editMode',
allowBlank: false,
afterSubTpl: submitPic
}
]
});
The controller looks like this (a lot of events):
init: function() {
this.control({
'test-edit > displayfield': {
afterrender: this.showEditable
},
'test-edit': {
afterrender: this.formRendered
},
'test-edit > field[cls=editMode]': {
specialkey: this.editField,
blur: this.outOfFocus
}
});
},
outOfFocus: function(field, event) {
console.log('Lost focus');
this.revertToDisplayField(field);
},
revertToDisplayField: function(field) {
field.previousNode().show();
field.hide();
},
formRendered: function(form) {
Ext.get('submitPic').on('click', function (event, object) {
var field = Ext.get(object).parent().parent().parent().parent();
var cmp = Ext.ComponentQuery.query('test-edit > field[cls=editMode]');
});
},
editField: function(field, e) {
var value = field.value;
if (e.getKey() === e.ENTER) {
if (!field.allowBlank && Ext.isEmpty(value)){
console.log('Not permitted!');
} else {
var record = Ext.ComponentQuery.query('test-edit')[0].getForm().getRecord();
Ext.Ajax.request({
url: '../webapp/tests/update',
method:'Post',
params: {
id: record.getId(),
fieldName: field.name,
fieldValue: field.value
},
store: record.store,
success: function(response, t){
field.previousNode().setValue(value);
t.store.reload();
var text = response.responseText;
// process server response here
console.log('Update successful!');
}
});
}
this.revertToDisplayField(field);
} else if (e.getKey() === e.ESC) {
console.log('gave up');
this.revertToDisplayField(field);
}
},
showEditable: function(df) {
df.getEl().on("click", handleClick, this, df);
function handleClick(e, t, df){
e.preventDefault();
var editable = df.nextNode();
editable.setValue(df.getValue());
editable.show();
editable.focus();
df.hide();
}
},
I'm using the 'afterSubTpl' config to add the edit icon, and the accept icon.
I have listeners set up to listen on click events concerning them, but after they are clicked, I only have the element created by Ext.get('submitPic'). Now I want to have access to the the Ext field and form that surround it. The parent method only brings back other DOM elements. How do I connect between them? You can see what I tried in formRendered.
I hope someone can clarify this little bit for me.
Walk up the DOM tree until you find a component for the element's id:
getCmpFromEl = function(el) {
var body = Ext.getBody();
var cmp;
do {
cmp = Ext.getCmp(el.id);
el = el.parentNode;
} while (!cmp && el !== body);
return cmp;
}
Ext.Component.from(el) does exactly this since ExtJS 6.5.0, as I just learnt. Doc
Source
You can get the component by id, but only if your component and its dom element have the same id (they usually do):
Ext.getCmp(yourelement.id)
But this is not exactly good practice -- it would be better to set up your listeners so that the handler methods already have a reference to the component. For example, in your 'submitPic' component, you could define the click listener like this:
var me = this;
me.on({
click: function(arguments){
var cmp = me;
...
});
I'm looking for a way to handle the key in the Grid.
I've closely followed the examples here:
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-1
http://www.sencha.com/learn/architecting-your-app-in-ext-js-4-part-2
http://www.sencha.com/learn/the-mvc-application-architecture/
So now everything works fine, but I'd like to handle keys in my Grid.
So I guess in the declaration "this.control({})" I should just add another event concerning userlist but it seems Grid don't have the "keypress" event.
Any idea how I should do (moreover how I should do with the new MVC pattern)?
Ext.define('GS.controller.Users', {
extend: 'Ext.app.Controller',
models: [
'User'
],
stores: [
'Users'
],
views: [
'user.List',
'user.Edit'
],
init: function () {
this.control({
/* (!) Actions in 'userlist' */
'userlist': {
selectionchange: this.userListSelectionChange,
itemdblclick: this.userEdit
},
'userlist button[action=create]': {
click: this.userCreate
},
'userlist button[action=delete]': {
click: this.userDelete
},
/* (!) Actions in 'useredit' */
'useredit button[action=create]': {
click: this.userCreateValidate
},
'useredit button[action=save]': {
click: this.userEditValidate
}
});
},
userListSelectionChange: function(grid, selections, options) {
var panel = grid.view.up('panel'),
button = panel.down('button[action=delete]');
button.setDisabled(selections.length === 0);
},
userCreate: function(button) {
/* Using Ext.create() to pass variable create:true
* instead of the shortcut:
* var view = Ext.widget('useredit');
*/
var view = Ext.create('GS.view.user.Edit', {
create:true
});
},
userCreateValidate: function(button) {
var win = button.up('window'),
form = win.down('form'),
values = form.getValues();
this.getUsersStore().add(values);
this.getUsersStore().sync();
win.close();
},
userEdit: function(grid, record) {
var view = Ext.widget('useredit');
view.down('form').loadRecord(record);
},
userEditValidate: function (button) {
var win = button.up('window'),
form = win.down('form'),
record = form.getRecord(),
values = form.getValues();
record.set(values);
win.close();
this.getUsersStore().sync();
},
userDelete: function(button) {
var panel = button.up('panel'),
selection = panel.getSelectionModel().getSelection()[0];
if (selection) {
var store = this.getUsersStore();
store.remove(selection);
store.sync();
}
}
});
Define KeyMap(s) in your launch: function() {...} right after you create the view.