I can only create new javascript, I don't have access to source code. A button & on click of that a popup is already there.
Now I want to write ext.js script to add text(HTML) on popup form.
I want text like below:
Below is the code I added in the console and I got the result as expected.
getComponent('addStakeholderUserBtn').on('click', function() {
var addlabel = getComponent('stakeholderAddUserWindow');
var labeltext = Ext.create('Ext.Panel', {
html: "Before adding a new user,'Add Existing Stakeholder'",
bodyPadding: 10
});
addlabel.insert(1,labeltext);
)};
Related
I am using a highchart pie-legend graph in a backbone application.If i click on a portion of pie chart,it calls back-end for only 1 time. If I click again on a portion without getting chart redrawn,even then only 1 call to back end is there. But if I cause chart to be redrawn by clicking on a legend and then I click on a portion of pie-chart, it calls two times for back end. I can see it on console of firebug debugger. And if I again make chart to be redrawn by any change, calls to the back-end increase accordingly. How can I restrict these unwanted multiple calls on clicking pie-legend chart.
The click on legent is also captured and kept. And when I click on pie chart,it accumulates the number of clicks and send multiple calls to back-end through model.
Thanks is advance.
The code is as follows:
chart: {
backgroundColor: null,
events:{
redraw: function() {
var dataObj = this.series[0].data;
$.each(dataObj, function( index ) {
var pathObj = dataObj[index].graphic.element;
pathObj['contentValue']=dataObj[index].name;
$(pathObj).popoverClosable({
container:'div#chart-donut',
html: true,
trigger:'click',
placement: 'top',
content:'<div class="popover-dummy"></div>'
});
$(pathObj).on('click', function () {
//render the corresponding popover content
var spinner = new Spinner().spin();
$('div.popover-dummy').html(spinner.el);
var contentCategory=pathObj.point.name;
var model = Backbone.model;
if(!that.brandDetailsPopoverView || that.brandDetailsPopoverView == null){
that.brandDetailsPopoverView = new BrandDetailsPopoverView({model:model,brandName:that.selectedBrandName,topicId:that.curTopicId,brandId:that.brandId,contentCategory:contentCategory,groupId: that.selectedGroupId,el:"#discover-popover-content"});
}
that.brandDetailsPopoverView.render(contentCategory);
$('div.popover-dummy').html($('#discover-popover-content').html());
});
});
}
},
margin: [10,20,10,10]
},
my setup: i have a file1 which is a Form Panel defined. I have another file2 which creates the form panel from the file1 and open it in a new Window.
My question now is it possible to transfer datas to the new opened window? In my case, i have a grid panel in file1. Now when i select one of the rows from the grid, i will transfer these data to the new window when i click a button. In my new window the Form will shown the datas from the grid panel for editing.
if you have a grid and want to open one record in a window, you would do sth like:
itemdblclick:function(grid,record,item) {
Ext.create('MyWindow',{
record:record // here, you set window.record = clicked record
});
}
and
Ext.define('MyWindow',{
items:[{
xtype:'form',
items:[{
...
}]
}],
listeners:{
beforerender:function(window) {
// here, you load window.record into the form!
if(window.record) window.down('form').loadRecord(window.record);
}
}
});
I need to create a window that will be always visible unless it is made hidden by clicking on an icon. Clicking on that icon a second time will make the window re-appear. The icon needs to be stuck at the top left corner of the window and outside of the window. I am planning to create a window without title and with two items 1: Button to hide/show and 2: the actual panel. The fiddle can be found at: https://fiddle.sencha.com/#fiddle/bi7 I need to make the portion behind the button transparent. Is there a way to do that?
You would do this manually, ideally with CSS classes. The following is crude, using inline styling, but works. Add the following listeners attribute to your button
{
xtype: 'button',
...
listeners: {
click: function(){
var panel = Ext.getCmp("togglePanel");
if (panel.el.dom.style.display == "none") {
panel.el.dom.style.display = "block";
} else {
panel.el.dom.style.display = "none";
}
}
}
}
and include the id 'togglePanel to your green panel containing the slider
id: "togglePanel",
Clicking the button will show/hide your panel
I am working on a EXTJS application, where I am displaying data in an EXTJS grid.
There is an edit button against each row. Please check the image.
I want on clicking the edit link, a pop window will open with all the editable fields and I can edit the row from there.
Please help me achieving this.
Here is my code.
{
xtype:'actioncolumn',
width:50,
items: [{
icon: 'assets/images/edit.png', // Use a URL in the icon config
tooltip: 'Edit',
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('ID'));
}
}
}
Thanks
I'm not gonna do the coding for you, but here's what you'll need:
A window with a form panel.
The loadRecord method on the form panel's underlying basic form to the load record into the form
The getValues method on the basic form to retrieve the modified values
The set method on the record to write back the values from the form to the record
after click the button( you get the id of the row/record), you can open a window which contain a form grid, then load the data into the form.
I would like to know how I can open a panel/form on the click of a hyperlink which is in another panel in ExtJS.
Define 'open'. When you say open I think of a window rather than a panel or form. Panels or forms can be created. You'r not very clear in what you want exactly.
You can render it to the body like this:
var panel = Ext.create('yourpanel', { renderTo: Ext.getBody() });
Or add it to another container eg:
var panel = Ext.create('yourpanel');
Ext.getCmp('id_of_somecontainer').add(panel);
PS If the issue is how to execute javascript from a link, try using:
<a herf="javascript:somefunction();">some link</a>
You can add panel like -
Ext.get('test_link').on('click', function(){
var panel = Ext.create('yourpanel');
Ext.getCmp('target_panel').add(panel);
});