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);
}
}
});
Related
I am facing an issue in particular case where reference of dragged widgets are overlapping.
I have an empty dashboard with button and user can add widgets by dragging this button. When user add new widget, previous widget params are also updated which should not.
Steps to reproduce:
Open https://jsfiddle.net/xs5r6mma/2/
Add widget by dragging “Drag Me” button
Enter some value in input field and update
Add another widget by dragging “Drag Me” button.
Now observer, this new widget title has the same name which u entered for 1st widget. Can you please confirm me if there is something I am doing wrong? My requirement is to add widgets by drag and drop on empty dashboard through some button.
myLayout.createDragSource($("#button"), {
type: 'component',
componentName: 'example',
componentState: {
text: 'Button'
}
});
I am building an ExtJS4 Web Application and I have a "page" where I have a Grid whose records come from a database. After loading the store of the grid, I want the first item to be selected.
This is what I've tried so far:
store.load({
callback: function() {
if(store.count() > 0){
grid.getSelectionModel().select(0);
//grid.getView().select(0);
}
}
});
The store loads the database records properly as they're shown in my grid. The first row is also highlighted as if it was clicked. However, my listener/controller for the itemclick event isn't firing as opposed to when I manually click the row.
I've also tried grid.getView().select(0); as well as grid.getSelectionModel().selectFirstRow(); but apparently, both those aren't functions.
My grid row appears to be selected by the itemclick function isn't being called at all.
You should use 'selectionchange' listener in 'Ext.selection.Model' instead of 'itemclick' in grid class. This listener will be fired in both cases when rows are clicked in grid and rows are selected programmatically.
Probably the code will be like this:
Ext.create('Ext.grid.Panel', {
selModel: Ext.create('Ext.selection.Model', {
...
listeners: {
selectionchange: function( this, selected, eOpts ) {
// Write your listener here or fire another event in view controller
}
}
}
store: ...
});
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 new to Extjs,I am working on Extjs3.2 grid RowEditor. I want Once we click on Add Employee Button editor windows pops up and when we click on cancel editor gots close but row get added to the grid .I want if we click on cancel it get back to initial state without new row
http://dev.sencha.com/deploy/ext-4.0.0/examples/grid/row-editing.html
How to Stop This??
Thanks
Add a 'canceledit' listener for RowEditing plugin and write logic acceptable for you.
For example I have written:
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
canceledit: function(editor, context) {
if(context.rowIdx == 0 && context.value == "New Guy") {
store.remove(context.record);
}
}
}
});
Working Demo: http://jsfiddle.net/3Ht5u/2/
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.