Develop Reference

I can't close dialog in jointJS

Here is and a screenshot I uploaded for you I have edited my post, according to your advice in comments, posting my updated version of my code.I enclose in /**/ my original post for helping you.
/*In jointJS I try using a `ui.dialog` to delete all my graph with the following code:
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
After pressing OK button I successfully delete my graph but my dialog still remains without being able to delete it.
Any help please? */
Here is my updated code which unfortunately still doesn't work as expected. I remind you that in this dialog form which displays an OK and Cancel button I want the following ones:
1)When pressing OK I want to :
a)Delete my current graph And
b)Close my dialog
2)When pressing Cancel I want to:
Close my dialog (Which in my initial version worked successfylly with dialog.close)
openNew: function() {
// By pressing Create New Process button, a popup form asks for
//our confirmation before deleting current graph
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
//Since in 'action:ok' of dialog.on the 3rd parameter is used in the
//callback of multi_hand we must pass dialog and graph both together.To do so
//we enclose them in an object named together and we pass it instead
together= {dialog : dialog, graph : this.graph};
//Since jointJS supports assigning multiple events for same handler
//BUT NOT multiple handlers for the same event we create function multi_hand
multi_hand: function (together)
{
together.graph.clear();
together.dialog.close();
}
dialog.on('action:ok', multi_hand, together);
dialog.on('action:cancel', dialog.close, dialog);
dialog.open();
},
By using this new code my joinjtJS project crashes unexpectedly.
How will I make OK button work please?

The third argument in dialog.on is the context passed into the callback function (2nd argument). It says, what is bind to this in the callback function.
In your example is not clear where the graph is defined, if it is really this.graph. However, you can simply do it like in the following example, without passing the context:
var graph = new joint.dia.Graph;
var paper = new joint.dia.Paper({
el: $('#paper'),
width: 650,
height: 400,
model: graph,
linkPinning: false
});
var r = new joint.shapes.basic.Rect({
position: { x: 50, y: 50 },
size: { width: 100, height: 40 },
}).addTo(graph);
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Confirm',
content: '<b>Are you sure?</b>',
buttons: [
{ action: 'yes', content: 'Yes' },
{ action: 'no', content: 'No' }
]
});
dialog.on('action:yes', function() {
graph.clear();
dialog.close()
});
dialog.on('action:no', dialog.close, dialog);
dialog.open();
if the graph is defined on this:
dialog.on('action:yes', function() {
this.graph.clear();
dialog.close();
}, this);

I solved my problem this way and I just want to share it with all of you as a reference.
openNew: function() {
var dialog = new joint.ui.Dialog({
width: 400,
title: 'Create new process',
content: '<b>Cleanup current drawing?</b>',
closeButton: false,
buttons: [
{ action: 'ok', content: 'OK' },
{ action: 'cancel', content: 'CANCEL' }
]
});
dialog.on('action:ok', this.graph.clear, this.graph);
dialog.on('action:ok action:cancel', dialog.close, dialog);
dialog.open();
},

How to add an item to ext js panel on click of the panel?

I want to add a button into a panel to the exact position where I clicked.
SO I have tried like as follows, this the structure of my Ext.widget element
Ext.widget({
xtype : 'mz-form-widget',
itemId: 'shopableImage',
anchor: "100%",
defaults: {
xtype: 'textfield',
listeners: {
controller: '',
change: function (cmp) {
controller = cmp;
cmp.up('#shopableImage').updatePreview();
}
}
},
items: [
{
xtype: "tacofilefield",
itemId: "imageUploadButton",
text: "Upload images"
},
{
xtype: 'panel',
width: 350,
height: 350,
itemId:'container',
id:'container',
bodyStyle:{"background":"url('http://www.easyvectors.com/assets/images/vectors/vmvectors/jeans-girl-vector-27.jpg')","border":"1px solid #eee"},
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(a,b,c,d){
console.log(a.browserEvent.clientX - b.offsetLeft);
console.log(a.browserEvent.clientY - b.offsetTop);
console.log(c);
this.down('#container').addItem({"xtype":"button","text":"+"});
}
},
dblclick: {
element: 'body', //bind to the underlying body property on the panel
fn: function(){ console.log('dblclick body'); }
}
}
}
The following line throwing me error.
this.down('#container').addItem({"xtype":"button","text":"+"});
UPDATE
this.down('#container')
is returning null.
Please give me your suggestions regarding this?

There are two problems here, one is causing the error and another is a potential time bomb:
addItem does not exist, the correct method name is add
You use id's on components and that is a very bad practice, however, it does not the immediate cause of the error

How to activate a specific card in Sencha Touch from a different Card using onclick

I've got a few different cards in my app, and I'm trying to activate one of my sub cards from my homepage screen.
Here is the pertinent information.
Setup
Ext.setup({
id: 'Ext-setup',
onReady: function () {
rpc.main.init();
}
});
Main
rpc.main = {
init: function () {
var rootPanel = new Ext.TabPanel({
id: 'rpc-rootPanel',
fullscreen: true,
layout: 'card',
region: 'center',
items: [
rpc.controllers.HomeController,
rpc.controllers.VimeoController,
]
});
}
};
HomeController
rpc.controllers.HomeController = new Ext.Panel({
id: 'rpc-controllers-homecontroller',
layout: 'card',
items: [rpc.views.Home.index],
listeners: {
activate: function () {
if (rpc.stores.HomeStore.getCount() === 0) {
// This store uses the rpc.templates.AboutDetails XTemplate
rpc.stores.HomeStore.load();
}
}
}
});
Home Index View
rpc.views.Home.index = new Ext.DataView({
id: 'rpc-views-home-index',
itemSelector: 'div.home-index',
tpl: rpc.templates.AboutDetails,
store: rpc.stores.HomeStore,
fullscreen: true,
});
Vimeo Controller
rpc.controllers.VimeoController = new Ext.Panel({
id: 'rpc-controllers-VimeoController',
layout: 'card',
fullscreen: true,
items: [rpc.views.Vimeo.index,
rpc.views.Vimeo.Details]
});
Vimeo Index View
rpc.views.Vimeo.index = new Ext.Panel({
id: 'rpc-views-Vimeo-index',
layout: 'fit',
dockedItems: [{xtype: 'toolbar', title: 'Videos'}]
// stuff left out to keep it clean
});
The Template I'm using to try and activate the card This is where you'll see the javascript call javascript:goToCard();
rpc.templates.AboutDetails = new Ext.XTemplate(
' <tpl for=".">',
' <div class="padded">',
' <div class="rounded-div">',
' <h1>RockPointe Church</h1>',
' <span class="rpc-sub">One church meeting in multiple locations.</span>',
' </div>',
' <div>',
' <div id="quick-nav">',
' <ul>',
' <li><span onclick="javascript:goToCard(\'rpc-controllers-VimeoController\',\'rpc-views-Vimeo-index\');">Videos</span></li>',
' <li><span onclick="javascript:goToCard()">Events</span></li>',
' <li><span onclick="javascript:goToCard()">Sites</span></li>',
' </ul>',
' <br clear="left">',
' </div>',
' </tpl>'
And finally, the goToCard(); method
function goToCard(panelId, cardId) {
Ext.getCmp(panelId).setActiveItem(cardId);
}
The problem is simple... nothing happens when I click on the
<span onclick="javascript:goToCard(\'rpc-controllers-VimeoController\',\'rpc-views-Vimeo-index\');">Videos</span>
If I run the code directly in my console
Ext.getCmp('rpc-controllers-VimeoController').setActiveItem('rpc-views-Vimeo-index');
I get the following output.
subclass
additionalCls: Array[0]
autoRender: true
body: El.Ext.Element.Ext.extend.constructor
cardSwitchAnimation: "slide"
componentCls: "x-panel"
componentLayout: subclass
container: El.Ext.Element.Ext.extend.constructor
dockedItems: Ext.util.MixedCollection
el: El.Ext.Element.Ext.extend.constructor
events: Object
fullscreen: true
getTargetEl: function () {
height: 306
hidden: true
hiddenOwnerCt: false
iconCls: "tv"
id: "rpc-controllers-VimeoController"
initialConfig: Object
items: Ext.util.MixedCollection
layout: subclass
layoutOnShow: Ext.util.MixedCollection
monitorOrientation: true
mons: Array[0]
needsLayout: false
originalGetTargetEl: function () {
ownerCt: subclass
renderData: Object
renderSelectors: Object
renderTo: null
rendered: true
scroll: "vertical"
scrollEl: El.Ext.Element.Ext.extend.constructor
scroller: Ext.util.Scroller.Ext.extend.constructor
tab: subclass
title: "Video"
width: 798
proto: F
But nothing actually happens :-(
Basically, I don't get an error, nor does the appropriate view load.
I also tried
Ext.getCmp('rpc-controllers-VimeoController').layout.setActiveItem('rpc-views-Vimeo-index');
But the response was even less...
False
If I just run
Ext.getCmp('rpc-controllers-VimeoController');
I can see the 'rpc-views-Vimeo-index' ID within the items array.

This is because your whole application structure is fairly bizarre. You're creating panels and calling them controllers for some reason and then nesting these panels.
All that aside-- the reason you're not seeing anything is because while you are setting the active item on the 'rpc-controllers-VimeoController' panel you never tell it to change the active item of the panel being displayed-- which from the looks of your nesting madness is 'rpc-rootPanel'. So you'd need to set the active item of 'rpc-rootPanel' to your 'rpc-controllers-VimeoController' and then set the active item of 'rpc-controllers-VimeoController' to rpc-views-Vimeo-index. /facepalm
Despite the bad design practices to answer your question you can most likely just do this:
function goToCard(panelId, cardId) {
Ext.getCmp('rpc-rootPanel').setActiveItem(1);
Ext.getCmp(panelId).setActiveItem(cardId);
}
You'll need to have some if-thens in there to check what panelId your link is for and set the root panel active item accordingly. The above is specific for your referenced link...

ExtJS 3 using the methods of a registered component

I extended a tabpanel and registered it like such:
DVI.DviDashboard = Ext.extend(Ext.TabPanel, {
initComponent: function(){
Ext.apply(this, {
activeTab: 0,
items: [item1, item2]
});
DVI.DviDashboard.superclass.initComponent.call(this);
}
});
Ext.reg('dviDashboard', DVI.DviDashboard);
When rendered, I have a tabpanel with two tabs, item1 and item2. I would like to programatically add new tabs through the TabPanel's add() method. I am unclear how to access the tabpanel's methods however after extending.

(Stolen #amol's answer)
It'll be as simple as calling .add on the instance.
In the following example, you may want to check out how I access the instance through this from the change of scope. You may want to read up more about the event handling by checking out this manual
Example code: jsfiddle
var DVI = {};
DVI.DviDashboard = Ext.extend(Ext.TabPanel, {
initComponent: function() {
Ext.apply(this, {
activeTab: 0,
items: [{
title: 'Tab 1',
html: 'Tab 1'
}, {
title: 'Tab 2',
html: 'Tab 2'
}],
buttons: [{
text: 'Add Tab',
handler: function() {
var content = 'Tab '+(this.items.getCount()+1);
this.add(new Ext.Panel({
title: content,
html: content
}));
this.setActiveTab(this.items.getCount()-1);
},
//This 'this' is referring to your tabpanel, and by doing so,
//the 'this' in your button's handler function is in fact the object
//that you've set here, which is, the tabpabel itself.
scope: this
}]
});
DVI.DviDashboard.superclass.initComponent.call(this);
}
});
Ext.reg('dviDashboard', DVI.DviDashboard);
var dviDashboard = new DVI.DviDashboard({
renderTo: Ext.getBody()
});

Your instance of DVI.DviDashboard is a TabPanel, so you can treat it as such:
var dashboard = new DVI.DviDashboard();
dashboard.add(otherTab);
UPDATE:
Make sure you call tabPanel.doLayout() after adding a new tab, so that the tab gets rendered and laid out. Ext waits for you to call doLayout() in case you want to add tabs in batch fashion.

This is the code used to add the tab:
function buildDecisionMatrix() {
var db = new DVI.DviDashboard();
db.add({
title: 'New Tab',
xtype: 'grid',
iconCls: 'tabs',
html: 'Tab Body',
closable: true
}).show();
db.doLayout();
}
When I execute the function, the DOM shows the tab created but the tab is not displayed. Perhaps I am calling the doLayout() method on the wrong thing?

I was creating the DviDashboard using xtype like this:
tabPanel = {xtype: dviDashboard}
The function I wrote to add tabs to this panel originally looked like this:
function buildDecisionMatrix() {
var db = new DVI.DviDashboard();
db.add({
title: 'New Tab',
xtype: 'grid',
iconCls: 'tabs',
html: 'Tab Body',
closable: true
});
db.doLayout();
}
Problem was doLayout() was not rebuilding the panel with the tab. So I modified the creation of the tabPanel with an id:
tabPanel = {xtype: dviDashboard, id: 'dviDashboard'}
So I was able to get the tabPanel as a component. Then the function I build to add the tab was modified like so:
function buildDecisionMatrix() {
//var db = new DVI.DviDashboard();
var db = Ext.getCmp('dviDashboard')
var newDb = db.add({
title: 'New Tab',
xtype: 'grid',
iconCls: 'tabs',
html: 'Tab Body',
closable: true
});
db.doLayout();
dv.setActiveTab(newDb);
}
And this worked. Thanks to all that responded.

Calling javascript when a partial view is loaded

I have an ASP.NET MVC application. In the application, I have a page with a button on it. When I click on the button a partial view is rendered in a window (see below). Inside the view I have a combo box and I need to load the combo box after the view is rendered. I tried to call the js right after win.show() but that doesn't work because the textbox used to render combo is inside the partial view. When should I call the js? Any help regarding this will be highly appreciated. Thanks!
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
}
win.show(this);
}

You might add the < script > tag to the end of the partial view. That way the script will not be parsed/executed until the partial view is completely rendered.

Can you use the afterrender event on Ext.Window?

Since you are using autoLoad to load the partial view contents, you have to wait until the window has received the response with the partial view contents and has been updated with the components/markup... so you can listen for the update event of the window's updater...
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
[EDIT]
Make sure you set the event handler to run only once though... edits are above
var win;
if (!win) {
win = new Ext.Window({
layout: 'fit',
width: 750,
height: 630,
closeAction: 'hide',
plain: true,
autoLoad: {
url: '../SearchJob/SearchPanel'
},
buttons: [{
text: 'Submit',
handler: function () { }
}, {
text: 'Close Me',
handler: function () {
win.hide();
}
}]
});
win.on('render', function(component) {
win.getUpdater().on('update', function(el, response) {
// Load Combo
}, win, {single:true});
});
}
win.show(this);