I am new to Ext JS and I need to update an old app. The EditorGridPanel has an 'ADD' button and it works fine. However, I need to add a 'DELETE' button that deletes the row from the grid. Here is the code to the grid. Thanks for your help.
/*==== INVOICE DATA START =======================================================*/
var iLineItemCM = new Ext.grid.ColumnModel([
{id:'i_line_item_name', header: "Line Item Name", dataIndex: 'i_line_item_name', width: 280,
editor: new Ext.form.TextField({allowBlank: false})}
,{header: "Amount", dataIndex: 'i_line_item_amt', width: 80, align: 'right', renderer: 'usMoney',
editor: new Ext.form.NumberField({
allowBlank: false,
allowNegative: false,
maxValue: 100000
})}
]);
var iLineItemRec =
new Ext.data.Record.create([
{name: 'i_line_item_name' ,mapping: 'i_line_item_name' ,type: 'string'}
,{name: 'i_line_item_amt' ,mapping: 'i_line_item_amt' ,type: 'string'}
]);
var iLineItemStore = new Ext.data.Store({
url: '',
reader: new Ext.data.JsonReader({
root: 'rows'
},
iLineItemRec
)
});
var iLineItemGrid = new Ext.grid.EditorGridPanel({
store: iLineItemStore,
cm: iLineItemCM,
width: 'auto',
height: 'auto',
//title:'Edit Plants?',
frame:false,
//plugins:checkColumn,
clicksToEdit:1,
viewConfig: {
//forceFit: true,
autoFit:true
},
id: 'iLineItemStore',
tbar: [{
text: 'Add Line Item',
handler : function(){
var r = new iLineItemRec({
i_line_item_name: '',
i_line_item_amt: ''
});
iLineItemGrid.stopEditing();
iLineItemStore.insert(0, r);
iLineItemGrid.startEditing(0, 0);
}
}]
});
///////////////////
From the docs for Cell Selection Model: http://docs.sencha.com/ext-js/2-3/#!/api/Ext.grid.CellSelectionModel
The cell model is specified as default.
getSelectedCell( ) : Array
Returns the currently selected cell's row and column indexes as an array (e.g., [0, 0]).
So... something like
{ text: 'Remove',
tooltip:'Remove the selected item',
handler: function(){
iLineItemGrid.stopEditing();
var r = iLineItemGrid.getSelectionModel().getSelectedCell();
iLineItemStore.removeAt(r[1]); } }
Related
I need to get combo-box label to a one line. I'm using extjs3.
Code :
var orq_type_button= new Ext.form.ComboBox({
id:'testa',
fieldLabel: 'Organization Type',
editable:false,
emptyText:'Empty',
selectOnFocus:true,
forceSelection: true,
allowBlank: false,
width: 350,
labelWidth: 330,
});
var assignConfig_window_formPanal = new Ext.form.FormPanel ({
id:'assignConfig_window_formPanal',
frame:true,
bodyStyle:'padding:5px 5px 0',
height:110,
buttonAlign:'center',
items: [orq_type_button],
buttons: [ {text: 'Save'} ,
{text: 'Cancel',
handler : function() {
assignConfig_window.hide();
}
}
]
});
Screenshot :
labelWidth is a property of FormPanel or FieldSet, not for combobox. Move it to your form panel so that it can work.
You can use labelStyle config. Please check this link.
https://www.sencha.com/forum/showthread.php?37686-Setting-a-combobox-fieldLabel-width-to-include-long-labels
If I add a button to my panel via a 'renderTo' argument (See 'b' below), it works perfectly :
//create div in javascript
var extJSTest = document.createElement('div');
//append to main
mainPanel.appendChild(extJSTest);
//'get' panel through EXT (just adds a wrapper?)
var myDiv = Ext.get(extJSTest);
var b = Ext.create('Ext.Button', {
text: 'Click me!!!!',
renderTo: myDiv,
handler: function() {
alert('You clicked the button!')
}
});
However, if, I replace the 'b' with the following code (That is, i want to replace the button with a grid, connected up with a SimpleStore and some data)...
var myData = [
['Apple',29.89],
['Ext',83.81]
];
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'}
]
});
ds.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "Company", width: 120, dataIndex: 'company'},
{header: "Price", width: 90, dataIndex: 'price'}
],
renderTo: myDiv,
height: 180,
width: 900,
title: 'List of Packages'
});
I get this error :
Uncaught TypeError: Cannot read property 'dom' of null
Which is found at line 28211 in ext-all-debug. Code looks like this :
if (!me.container) {
me.container = Ext.get(me.el.dom.parentNode);
}
Anyone know what the issue is when i want to add a grid?
Also my index.html looks like this :
<script>
Ext.require([
'Ext.data.*',
'Ext.grid.*',
'Ext.tree.*'
]);
Ext.onReady (function () {
//application is built in here
});
</script>
Here's a fiddle :
https://fiddle.sencha.com/#fiddle/693
If I render to Ext.getBody() it works fine, but if i render to my own myDiv object it seems to have problems.
My solution to my question..
I am confusing renderTo with add.
I should create a panel, and use renderTo to put it somewhere on the DOM, and then later I can create a grid and then the panel can 'add' it.
Ext.onReady (function () {
var myDiv = Ext.create('Ext.Panel',{
renderTo:Ext.getBody(),
})
var myData = [
['Apple',29.89],
['Ext',83.81]
];
var ds = new Ext.data.SimpleStore({
fields: [
{name: 'company'},
{name: 'price'}
]
});
ds.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: ds,
columns: [
{header: "Company", width: 120, dataIndex: 'company'},
{header: "Price", width: 90, dataIndex: 'price'}
],
height: 180,
width: 900,
title: 'List of Packages'
});
myDiv.add(grid);
//document.body.appendChild(myDiv);
});
I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.
I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?
I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.
I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here
try applying renderTo config to window instead of form
check example
I using Ext JS 2.3.0 and have a GridPanel that looks like this:
I want to expand the width of the column such that the scroll bar is pushed over the extreme right of the panel, thus eliminating the empty space to the right of the scroll bar.
The relevant code is shown below:
var colModel = new Ext.grid.ColumnModel([
{
id: 'name',
header: locale['dialogSearch.column.name'],
sortable: true,
dataIndex: 'name'
}
]);
var selModel = new Ext.grid.RowSelectionModel({singleSelect: false});
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
stripeRows: true,
autoExpandColumn: 'name',
store: this._searchResultsStore,
view: new Ext.grid.GridView(),
colModel: colModel,
selModel: selModel,
hidden: true,
buttonAlign: 'center',
buttons: [
{
text: locale["dialogSearch.button.add"],
width: 50,
handler: function () {
}
},
{
text: locale["dialogSearch.button.cancel"],
width: 50,
handler: function () {
entitySearchWindow.close();
}
}
]
});
You should use the forceFit config for the grid view:
this._searchResultsPanel = new Ext.grid.GridPanel({
title: locale['dialogSearch.results.name'],
height: 400,
layout: 'fit',
viewConfig: {
forceFit: true
}, ....
I'm not sure if this isn't redundant so you can remove this part view: new Ext.grid.GridView(),
The problem is not the column but the grid itself which does not stretch to fill the window body completely.
Put the layout: 'fit' property onto the window config instead of onto the grid config (where it needs to be removed). You should also remove the height property because the grid height will determined by the window's size.
Add
flex: 1,
to one of the the columns config