I wrote an application which displays testCases in a treePanel. In that pannel, I have a specific column with icons for actions user can perform on a test case (show details, edit, add a bug...). In the column config, the renderer call this function, where data is an object with a _ref attribut like /testcase/123456/ :
_gridDataFormatTestCaseIcons:function(data)
{
var IconsString = Ext.String.format('<span class="icon-testCase"></span>', Rally.nav.Manager.getDetailUrl(data));
IconsString+= ' ';
IconsString+= '<span class="icon-edit"></span>';
IconsString+= ' ';
IconsString+= '<span class="icon-defect"></span>';
return IconsString ;
}
My first icon opens a new tab with details about the TestCase : OK. My 2nd icon opens a popup where I can edit my TestCase : OK. My third icon opens a popup where I can create a new bug. OK, but... I need to fill all the fileds, included the ones I guess it could be filled automatically.
So my question is about the third icon and the arguments of the function Rally.nav.Manager.create('defect') : the SDK 2.0rc2 docs here says it can take another argument args but don't give any details about it. Can i use it to specify the Owner and Test Case fields for example and how ?
You are correct, the args parameter can be an object that includes default attributes to populate into the Create Dialog. Only a limited subset of fields are accepted however:
Allowed args keys
User Story:
defaultName
rank
iteration
release
parent
dpyOid {dependency}
Defect:
defaultName
defectSuiteOid {Defect Suites}
testCaseResult
testCase
requirement
iteration
Defect Suite:
defaultName
rank
iteration
Portfolio Item:
defaultName
rank
parent
Task:
workProduct
Test Case:
testfolderOid {Test Folder}
artifactOid {Artifact}
It looks like the docs are a bit misleading, i.e., since we're creating a new object, instead of including a ref to an existing defect:
//Launch the create dialog
Rally.nav.Manager.create('/defect/12345');
The docs should read:
//Launch the create dialog
Rally.nav.Manager.create('defect');
Here's a quick example that pops and editor using a Button and sets the Defect Name and Default Iteration. Note that the Rally.nav.Manager functions generally only work when the app is installed and running inside Rally.
<!DOCTYPE html>
<html>
<head>
<title>Create Example</title>
<script type="text/javascript" src="https://rally1.rallydev.com/apps/2.0rc2/sdk.js"></script>
<script type="text/javascript">
Rally.onReady(function() {
Ext.define('CustomApp', {
extend: 'Rally.app.App',
componentCls: 'app',
launch: function() {
var myButtonContainer = Ext.create('Ext.Container', {
items: [{
xtype: 'rallybutton',
text: 'Click Here to Create a New Defect',
handler: function() {
//Launch the create dialog
var defectDefaults = {
defaultName: "My Defect",
iteration: "12345678910"
};
Rally.nav.Manager.create('defect', defectDefaults);
}
}],
});
this.add(myButtonContainer);
}
});
Rally.launchApp('CustomApp', {
name: 'Create Example'
});
});
</script>
<style type="text/css">
</style>
</head>
<body></body>
</html>
Related
We have been using Froala editor within Wagtail for years, and even though Draftail is nice, the end user wants to continue to use Frola, especially as a license fee has been paid for it, and it offers extra functionality that they use.
I have used the following which works great for any version of Wagtail prior to version 2.2:
https://github.com/jaydensmith/wagtailfroala/pull/5/commits/d64d00831375489cfacefa7af697a9e76fb7f175
However in Wagtail version 2.2 this has changed:
https://docs.wagtail.org/en/stable/releases/2.2.html#javascript-templates-in-modal-workflows-are-deprecated, this causes selecting images within Froala to no longer work correctly. You get to pick the image, but it fails to move onto the 2nd dialog to select alignment and then click insert.
It looks like wagtailfroala/static/froala/js/froala.js needs to be changed to add onload to the ModalWorkflow.
$.FE.RegisterCommand('insertImage', {
title: 'Insert Image',
undo: false,
focus: true,
refreshAfterCallback: false,
popup: true,
callback: function () {
var editor = this;
return ModalWorkflow({
url: window.chooserUrls.imageChooser + '?select_format=true',
responses: {
imageChosen: function(imageData) {
editor.edit.off();
var $img = $(imageData.html);
$img.on('load', function() {
_loadedCallback(editor, $(this));
});
// Make sure we have focus.
// Call the event.
editor.edit.on();
editor.events.focus(true);
editor.selection.restore();
editor.undo.saveStep();
// Insert marker and then replace it with the image.
if (editor.opts.imageSplitHTML) {
editor.markers.split();
} else {
editor.markers.insert();
}
var $marker = editor.$el.find('.fr-marker');
$marker.replaceWith($img);
editor.html.wrap();
editor.selection.clear();
editor.events.trigger('contentChanged');
editor.undo.saveStep();
editor.events.trigger('image.inserted', [$img]);
}
}
});
},
plugin: 'image'
});
But what needs to be added to make it work? I can't find any documentation or examples on how do to this? Please help or point me in the direction of the documentation for how this should be done.
Thank you so much in advance.
Our testing team require IDs or class values to be set on the HTML elements in our message popup boxes. This is for their automated tests.
I can pass in a class value for the dialog panel by passing in a cls value like so:
Ext.Msg.show({
title:'Reset Grid Layout',
msg: 'Are you sure that you want to reset the grid layout?',
cls:'Reset-Grid-Layout-Message',
buttons: Ext.Msg.YESNO,
fn: function (response) {
if (response == 'yes') {
}
},
icon: Ext.window.MessageBox.QUESTION
});
Now we also need it on the buttons, and also on the text being displayed. Is there some way of getting a cls value onto the buttons?
I was thinking it may be possible to expand the button parameter into something like :
buttons : [{name:'but1', cls:'asdf'}, {name:'but2', cls:'asdf2'}]
But google is not giving me back anything useful.
If your testing team uses Selenium for their automated test, adding ids/classes in every component could be difficult for both of you.
Overriding components in Ext is a good solution, but I don't recommend this because it will affect all your components. Unless you know what you're doing.
I suggest, extend Ext.window.MessageBox and generate classes for your buttons based on your parent cls.
// Put this somewhere like /custom/messagebox.js
Ext.define('App.MyMessageBox', {
extend: 'Ext.window.MessageBox'
,initConfig: function(config) {
this.callParent(arguments);
}
,makeButton: function(btnIdx) {
var me = this;
var btnId = me.buttonIds[btnIdx];
return new Ext.button.Button({
handler: me.btnCallback
,cls: me.cls + '-' + btnId
,itemId: btnId
,scope: me
,text: me.buttonText[btnId]
,minWidth: 75
});
}
});
To use:
App.Box = new App.MyMessageBox({
cls:'reset-grid-layout'
}).show({
title:'Reset Grid Layout'
,msg: 'Are you sure that you want to reset the grid layout?'
,buttons: Ext.Msg.YESNO
,icon: Ext.window.MessageBox.QUESTION
});
Your buttons will have reset-grid-layout-yes and reset-grid-layout-no class.
You can do the same with other components you have. Check out the Fiddle. https://fiddle.sencha.com/#fiddle/7qb
You should refer to the API
cls : String A CSS class string to apply to the button's main element.
Overrides: Ext.AbstractComponent.cls
You can also use the filter on right side (not the one in the right top corner). Just type cls and you will see all properties, methods and events containing cls (note that you see by default just public members, use the menu on the right of this searchfield to extend this)
Edit
If you just need it for testing purpose I would recommend to override the responsible method. This should work (untested!)
Ext.window.MessageBox.override({
buttonClasses: [
'okCls', 'yesCls', 'noCls', 'cancelCls'
],
makeButton: function(btnIdx) {
var btnId = this.buttonIds[btnIdx];
var btnCls = this.buttonClasses[btnIdx];
return new Ext.button.Button({
handler: this.btnCallback,
cls: btnCls,
itemId: btnId,
scope: this,
text: this.buttonText[btnId],
minWidth: 75
});
}
});
In my json data, i am getting projectName and assignedTo values(it accrues in all data),
example data:
[ {projectName:'project1',assignedTo:'some1'},{projectName:'project2',assignedTo:'some2'}]
my template is: (including my confused stuff)
<script id="listTemplate" type="text/template">
<%= projectName === projectName ? projectName : taskStatus%>//not works how can i mange?
</script>
In my view, i am converting the model "toJSON()", but i am getting the project name alone in the 2 links what i am use.
my request, Is it possible to use a single template to print two different values? - as a first time i need to print project name, later taskStatus with some condition, if so any suggestion please
The reason why it is constantly printing project name is because, in the template, you have...
<%= projectName === projectName ? projectName : taskStatus%>
projectName would always equal to projectName. What you'll want to do in this case is, in your Backbone.View, when you serialize the Model to be consumed by the template, you can do this...
Backbone.View.extend({
events: {
// An example on how to change the display
'click button.change-display': 'onChangeDisplayClicked'
},
template: _.template(...),
// Controls whether project name should be shown or not.
showProjectName: true,
onChangeDisplayClicked: function() {
// Flip the switch
this.showProjectName = !this.showProjectName;
// Re-render the View
this.render();
},
serialize: function() {
// Grab the data from model
var data = this.model.toJSON();
// Pass this data to the template to control what to be displayed.
data.showProjectName = this.showProjectName;
return data;
},
render: function() {
this.$el.html(this.template(this.serialize()));
}
});
... and in your template, you would...
<script id="listTemplate" type="text/template">
<%= showProjectName ? projectName : taskStatu s%>
</script>
var User = Backbone.Model.extend({
schema: {
date: {type: 'Date'}
}
});
var user = new User();
var form = new Backbone.Form({
model: user
}).render();
$('.bootstrap').append(form.el);
What type do I enter to use the included JQuery-UI datepicker? There is no documentation on this other than:
The old jQuery editors are still included but may be moved to another repository:
jqueryui.List
jqueryui.Date (uses the jQuery UI popup datepicker)
jqueryui.DateTime
The schema type is declared in quotes and I can't figure out what the string for jqueryui.Date would be - and that doesn't work for sure.
You want to create a custom editor that you'll name for example: 'DatePicker'.
All the editors are attached to Backbone.Form.editors. Because the DatePicker is rendered exactly like a text field, we can use the text field as a base and only override the behavior specific to the datepicker.
I often use moment.js for some date related work, so this example also includes this. Also it's based on Bootstrap DatePicker and not the jQuery one, but this would be almost 100% the same.
Backbone.Form.editors.DatePicker = Backbone.Form.editors.Text.extend({
render: function() {
// Call the parent's render method
Backbone.Form.editors.Text.prototype.render.call(this);
// Then make the editor's element a datepicker.
this.$el.datepicker({
format: 'yyyy-mm-dd',
autoclose: true,
weekStart: 1
});
return this;
},
// The set value must correctl
setValue: function(value) {
this.$el.val(moment(value).format('YYYY-MM-DD'));
}
});
That's it, you can now use your date picker like this:
schema: {
birthday: { title: 'When were you born', type: 'DatePicker'}
}
Not sure it undestanding right your Question
but I think you can atach the Jquery date pickers in the initialize method of the view
Good evening dear fellow programmers!
I have a question regarding persistant panels in ExtJS. I have a few form panels that I want to display inside a single container panel. The displayed form depends on the type of object that the user is editing. As far as I understand, this can be achieved by the following 3 statements:
removeAll(true)
add(persistent form panel)
doLayout()
The problem is that this doesn't seem to work. If using 2 different persistent form panels, they both stick to the container panel. The strange thing is that it does seem to work when I don't use persistent panels, but recreate the form panels every time I add them to the container:
removeAll(true)
add(new form panel())
doLayout()
See a working example below:
<script type="text/javascript" language="javascript">
Ext.namespace("Ext.ARA");
Ext.onReady(function()
{
Ext.ARA.AddFormPanelDoesntWorkA = function()
{
Ext.ARA.ContainerPanel.removeAll(false);
Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelA);
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesntWorkB = function()
{
Ext.ARA.ContainerPanel.removeAll(false);
Ext.ARA.ContainerPanel.add(Ext.ARA.FormPanelB);
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesWorkA = function()
{
Ext.ARA.ContainerPanel.removeAll(true);
Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]}));
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.AddFormPanelDoesWorkB = function()
{
Ext.ARA.ContainerPanel.removeAll(true);
Ext.ARA.ContainerPanel.add(new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]}));
Ext.ARA.ContainerPanel.doLayout();
}
Ext.ARA.FormPanelA = new Ext.form.FormPanel({title:'Form Panel A', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel A Field', anchor:'100%'})]});
Ext.ARA.FormPanelB = new Ext.form.FormPanel({title:'Form Panel B', padding:5, items:[new Ext.form.TextField({fieldLabel:'Panel B Field', anchor:'100%'})]});
Ext.ARA.ContainerPanel = new Ext.Panel
({
title:'Container Panel',
bbar:new Ext.Toolbar
({
items:
[
{text:'AddFormPanelDoesntWorkA', handler:Ext.ARA.AddFormPanelDoesntWorkA},
{text:'AddFormPanelDoesntWorkB', handler:Ext.ARA.AddFormPanelDoesntWorkB}, '->',
{text:'AddFormPanelDoesWorkA', handler:Ext.ARA.AddFormPanelDoesWorkA},
{text:'AddFormPanelDoesWorkB', handler:Ext.ARA.AddFormPanelDoesWorkB}
]
})
});
Ext.ARA.Mainframe = new Ext.Viewport({layout:'fit', items:[Ext.ARA.ContainerPanel]});
});
</script>
What is the proper way to use persistent form panels in ExtJS? What am I doing wrong here?
I tried your example and made a few tweaks and didn't get it to work and then I realised that I'd have used a CardLayout for this sort of display. See the LayoutBrowser where it is demonstrated using a 'Wizard' type of display. I think it'll give you what you need.