I have some problems with the rowwidget
I have a rowwidget plugin inside the rowwidget to display nested tables.
It looks like the picture(1). But there is a problem when I expand the record of the second level.
The height of the parent row is not set correctly and the records are not visible (picture 2).
Does anyone know how to make the height of the row automatically recalculated by the size of the expand row?
picture(1)
picture(2)
My code:
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'A',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
orders: [{
item: 'A11',
desc: 'Stand',
orde: [{
item: 'A111',
desc: 'Stand',
}, {
item: 'A222',
desc: 'Holder'
}, {
item: 'A333',
desc: 'Hanger'
}]
}, {
item: 'A22',
desc: 'Holder',
orde: [{
item: 'A222',
desc: 'Stand',
}, {
item: 'A333',
desc: 'Holder'
}, {
item: 'A444',
desc: 'Hanger'
}]
}, {
item: 'A33',
desc: 'Hanger',
orde: [{
item: 'A333',
desc: 'Stand',
}, {
item: 'A444',
desc: 'Holder'
}, {
item: 'A555',
desc: 'Hanger'
}]
}]
} ]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 1
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone',
flex: 1
}],
height: Ext.getBody().getHeight(),
width: '100%',
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
maxHeight: 300,
title: false,
bind: {
store: '{record.orders}',
},
plugins: [{
ptype: 'rowwidget',
widget: {
xtype: 'grid',
maxHeight: 200,
title: false,
bind: {
store: '{record.orde}',
},
columns: [{
text: 'Item',
dataIndex: 'item',
flex: 1
}, {
text: 'Description',
dataIndex: 'desc',
flex: 2
}]
}
}],
columns: [{
text: 'Item',
dataIndex: 'item',
flex: 1
}, {
text: 'Description',
dataIndex: 'desc',
flex: 2
}]
}
}],
renderTo: Ext.getBody()
});
}
});
I solved my problem with manageHeight: false
Related
I requires Ext.grid.plugin.Editable in my grid. Now I want to change classes inside default panel, witch slides right for editing of row.
But I don't understand how I to manage submit and delete button function (for example I want to define POST for submit button).
toolbarConfig - doesn't work
Ext.define('Foresto.model.EditListRenters', {
extend: 'Ext.grid.Grid',
xtype: 'rentlist',
requires: [ //some plugins and models
],
frame: true,
store: {
model: 'Foresto.model.RentsListModel',
autoLoad: true,
pageSize: 0,
proxy: {
type: 'ajax',
url: '/api/renter/',
reader: {
type: 'json',
rootProperty: 'results'
}
}
},
plugins: [{
type: //someplugins}
],
/* toolbarConfig: {
xtype:'titlebar',
docked:'top',
items:[{
xtype:'button', // it is don't work
ui:'decline',
text:'decline',
align: 'right',
action:'cancel'
}]
}, */
columns: [{
text: 'id',
dataIndex: 'id'
}, {
text: 'document',
dataIndex: 'document',
editable: true,
flex: 1
}, {
text: 'document_num',
dataIndex: 'document_num',
editable: true
}, {
text: 'legal_type',
dataIndex: 'legal_type',
editable: true
}, {
text: 'fio_represent',
dataIndex: 'fio_represent',
editable: true
}, {
text: 'position_represent',
dataIndex: 'position_represent',
editable: true,
}, {
text: 'certificate',
dataIndex: 'certificate',
editable: true,
}]
});
Here is an example of a grid with a custom form:
https://fiddle.sencha.com/#view/editor&fiddle/2ojt
// model
Ext.define('Fiddle.model.Document', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'document',
type: 'string'
}, {
name: 'type',
type: 'string'
}]
});
//view (grid)
Ext.define('Fiddle.view.DocumentGrid', {
extend: 'Ext.grid.Panel',
xtype: 'documentlist',
store: {
model: 'Fiddle.model.Document',
data: [{
id: 1,
document: 'My First Doc',
type: 'pdf'
}, {
id: 2,
document: 'My Second Doc',
type: 'pdf'
}]
},
columns: [{
text: 'id',
dataIndex: 'id'
}, {
text: 'Document',
dataIndex: 'document',
flex: 1
}, {
text: 'Type',
dataIndex: 'type',
}]
});
var form = Ext.create('Ext.form.Panel', {
title: 'Form',
region: 'east',
layout: {
type: 'vbox',
algin: 'stretch'
},
collapsible: true,
bodyPadding: 10,
hidden: true,
items: [{
xtype: 'textfield',
name: 'document',
fieldLabel: 'Document'
}, {
xtype: 'combo',
name: 'type',
fieldLabel: 'type',
store: ['pdf', 'doc', 'docx', 'odf']
}],
buttons: [{
text: 'Save',
handler: function () {
form.updateRecord();
form.hide();
}
}]
});
var grid = Ext.create('Fiddle.view.DocumentGrid', {
title: 'Document Grid',
region: 'center',
listeners: {
selectionchange: function (selModel, selection) {
if (Ext.isEmpty(selection)) {
form.hide();
return;
}
form.loadRecord(selection[0]);
form.show();
}
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('Ext.panel.Panel', {
renderTo: Ext.getBody(),
layout: 'fit',
layout: 'border',
width: 600,
height: 600,
items: [
grid, form
]
});
}
});
I have an editor comboBox in Grid and it only shows when I click row. How to keep it permanent visible in grid? Thanks
How to keep it permanent visible in grid?
If you are using ExtJS version 5.x or higher then you can use widgetcolumn
A widget column is configured with a widget config object which specifies an xtype to indicate which type of Widget or Component belongs in the cells of this column.
I have created an sencha fiddle demo hope this will help you to solve problem or achieve your requirement.
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone', {
name: 'checked',
defaultValue: 'AL'
}],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244'
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254'
}]
}),
states = Ext.create('Ext.data.Store', {
fields: ['abbr', 'name'],
data: [{
"abbr": "AL",
"name": "Alabama"
}, {
"abbr": "AK",
"name": "Alaska"
}, {
"abbr": "AZ",
"name": "Arizona"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}, {
text: 'State',
width: 150,
xtype: 'widgetcolumn',
dataIndex: 'checked',
widget: {
xtype: 'combobox',
flex: 1,
emptyText: 'Select State',
queryMode: 'local',
displayField: 'name',
valueField: 'abbr',
store: states,
listeners: {
select: function (combo, record) {
Ext.Msg.alert('Success', 'Good you have selected <b>' + record.get('name') + '</b>')
var grid = combo.up('grid'),
index = grid.getView().indexOf(combo.el.up('table')),
record = grid.getStore().getAt(index);
console.log(record.getData());
}
}
}
}],
height: 200,
width: 400,
renderTo: Ext.getBody()
});
I have a simple Extjs (5.1.1) Tree menu:
var menu = new Ext.tree.Panel( {
root: {
text: 'My menu',
expanded: true,
listeners: {
itemclick: function(s,r) {
alert(r.data.text);
}
},
children: [{
text: 'System',
expanded: true,
children: [{
text: '',
leaf: true
}, {
text: 'System Users',
leaf: true
}, {
text: 'System Administrators',
leaf: true
}]
}, {
text: 'Settings',
expanded: true,
children: [{
text: 'Passwords',
leaf: true
}, {
text: 'Emails',
leaf: true
}, ]
}, {
text: 'Logs',
leaf: true,
}]
}
});
Ext.application({
name : 'MVC',
launch : function() {
Ext.create('Ext.container.Viewport', {
extend: 'Ext.container.Viewport',
layout: 'border',
items: [
{
title: 'North',
region: 'north',
height: 50,
xtype: 'container'
},
{
title: 'Menu',
region:'west',
floatable: false,
items: menu,
width: 300
},
{
title: 'Center',
region: 'center'
}
]
});
}
});
My problem: The contents (GRID) have some js file. And I would like click one of the tree menu than js load 'Center' item. But I don't know how. :-(
Example system_users.js file: (This file should load on center when I click System Users on the Tree.)
var Users = {
init: function () {
itemdblclick: this.editDocument
},
edit: function(grid, roWindex, e) {
var id = grid.getStore().getAt(rowIndex);
Users.openEditForm(id);
},
openEditForm: function(id){
// form open
}
};
Users.init();
Ext.application({
name : 'Users',
launch : function() {
Ext.widget({
renderTo : Ext.getBody(),
xtype : 'grid',
title : 'Users',
height : 800,
store : {
fields : [ 'login_id',
'login_name',
'login_firstname',
'login_middlename',
'login_lastname',
'login_email',
'login_mobile',
'login_status' ],
autoLoad : true,
proxy: {
type: 'ajax',
api: {
read: 'http://users/select',
create: 'http://users/insert',
update: 'http://users/update',
destroy: 'http://users/delete'
},
reader: {
type: 'json',
successProperty: 'success',
root: 'data',
messageProperty: 'message'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
}
}
},
columns: {
items: [
{ text: 'ID', dataIndex: 'login_id', editor: 'textfield', width: 200 },
{ text: 'Login Name', dataIndex: 'login_name', editor: 'textfield', width: 200 },
{ text: 'Firstname', dataIndex: 'login_firstname', editor: 'textfield', width: 200 },
{ text: 'Middlename', dataIndex: 'login_middlename', editor: 'textfield', width: 200 },
{ text: 'Lastname', dataIndex: 'login_lastname', editor: 'textfield', width: 200 },
{ text: 'Email', dataIndex: 'login_email', editor: 'textfield', width: 200 },
{ text: 'Mobile', dataIndex: 'login_mobile', editor: 'textfield', width: 200 },
{ text: 'Status', dataIndex: 'login_status', editor: 'textfield', width: 200 }
]
},
listeners: {
itemdblclick: function(dv, record, item, index, e) {
// This is row index
alert(index);
}
}
})
}
});
I has problem about renderer, I use renderer to create numberfield in column of grid, but it doesn't work, please see code and help me where I wrong.
xtype:'gridcolumn',
header: 'Quantity',
dataIndex: 'qty',
hideable: false,
sortable : true,
renderer:function(value) {
var id = Ext.id();
var numberField = Ext.create('Ext.form.field.Number', {
height:100,
});
return '<div id="' + id + '"></div>';
}
Thanks for your help.
I think you should be looking at the Cell Editing plugin. In the code above you are creating an instance of a number field but not actually applying it to anything.
The cell editing plugin allows you to use field components such as text field, number field etc in a column and helps manage edited data.
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
data: [{
name: 'Lisa',
email: 'lisa#simpsons.com',
phone: '555-111-1224',
number: 0
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234',
num: 1
}, {
name: 'Homer',
email: 'homer#simpsons.com',
phone: '555-222-1244',
num: 2
}, {
name: 'Marge',
email: 'marge#simpsons.com',
phone: '555-222-1254',
num: 3
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
header: 'Name',
dataIndex: 'name',
editor: 'textfield'
}, {
header: 'Email',
dataIndex: 'email',
flex: 1,
editor: {
xtype: 'textfield',
allowBlank: false
}
}, {
header: 'Phone',
dataIndex: 'phone'
}, {
header: 'Number',
dataIndex: 'num',
editor: 'numberfield'
}],
selModel: 'cellmodel',
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
height: 200,
width: 400,
renderTo: Ext.getBody()
});
}
});
I have a button:
var me = this;
...
var argumentToPass;
...
{
xtype: 'button',
text: 'text',
listeners: {
click: {
fn: me.onBtnAddToBidClick,
scope: me
}
}
}
...
me has a refferance to the argumentToPass.
And the Listerner:
onBtnAddToBidClick: function(button, e, options){
alert(argumentToPass)
}
Basicly i am trying to make a simple function(String var) method.
How can i get the scope from inside the Listener(onBtnAddToBidClick)
EDIT: Thsi is most of my code:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.selection.CheckboxModel'
]);
var sm = Ext.create('Ext.selection.CheckboxModel');
Ext.define('MyApp.view.MyViewport', {
extend: 'Ext.container.Viewport',
layout: {
type: 'border'
},
initComponent: function() {
var me = this;
Ext.applyIf(me, {
items: [
{
xtype: 'panel',
region: 'west',
id: 'MenuPanelID',
width: 255,
layout: {
type: 'accordion'
},
collapsed: true,
collapsible: true,
title: 'תפריט',
items: [
{
xtype: 'form',
width: 148,
layout: {
align: 'stretch',
type: 'vbox'
},
collapsed: false,
title: 'מחירונים',
dockedItems: [
{
xtype: 'textfield',
flex: 1,
dock: 'top',
id: 'txtPrefixID',
margin: 10,
fieldLabel: 'Prefix',
labelWidth: 50
},
{
xtype: 'button',
flex: 1,
dock: 'top',
margin: 10,
text: 'חפש',
listeners: {
click: {
fn: me.onBtnPrefixSearchClick,
scope: me,
arg: 0
}
}
},
{
xtype: 'button',
flex: 1,
dock: 'top',
margin: 10,
text: 'חפש טווח',
listeners: {
click: {
fn: me.onBtnPrefixSearchClick,
scope: me,
arg: 1
}
}
}
]
}
]
},
{
xtype: 'tabpanel',
region: 'center',
id: 'MainTabPanelID',
activeTab: 0,
items: [
{
xtype: 'panel',
layout: {
type: 'border'
},
title: 'General',
items: [
{
xtype: 'container',
region: 'center',
layout: {
align: 'stretch',
type: 'vbox'
},
items: [
{
xtype: 'gridpanel',
flex: 1,
autoScroll: true,
title: 'שיחות נכנסות',
store: 'IncomingDataStore',
viewConfig: {
id: 'IncomingGridId'
},
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'trunk_owner',
text: 'Owner'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_name',
text: 'Country'
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
text: 'Code'
},
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'operator_prefix',
text: 'Operator Prefix',
format: '00'
},
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'call_duration',
text: 'Duration Hourly'
},
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'acd',
text: 'ACD Hourly'
},
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'asr',
text: 'ASR Hourly'
},
{
xtype: 'numbercolumn',
align: 'right',
dataIndex: 'calls',
text: 'Calls Hourly',
format: '0,000'
}
],
listeners: {
celldblclick: {
fn: me.onIncomingGridpanelCellDblClick,
scope: me
}
}
}
]
}
]
}
]
}
]
});
me.callParent(arguments);
},
onBtnPrefixSearchClick: function(arg) {
var checkBoxPrefixes = Ext.create('Ext.selection.CheckboxModel');
var val = Ext.getCmp('txtPrefixID').value;
var v_url = 'GetCountryPrefixes.jsp?' + Ext.urlEncode({'prefix': val, 'action': 'search_exact'});
alert(arg);
if arg === 0 {
// do something...
}
var me = this;
var newTab = Ext.create('Ext.panel.Panel', {
id: 'prefix_panel',
title: 'Price Usage Report',
autoScroll: true,
layout: {
type: 'fit'
},
closable: true,
dockedItems: [
{
xtype: 'toolbar',
dock: 'top',
items: [
{
xtype: 'button',
id: 'buttonBiding',
icon: 'images/dollar16x16.png',
text: 'הוסף להצעת מחיר',
listeners: {
click: {
fn: me.onBtnAddToBidClick,
scope: me
}
}
}
]
}
],
items: [{
id: 'prefix_grid',
xtype: 'gridpanel',
autoShow: false,
autoScroll: true,
selModel: checkBoxPrefixes,
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'price_date'}, //, type: 'Date' , sortType: 'asDate', format: 'Y-m-d h:M:s'
{name: 'country_code',type: 'int', sortType: 'asInt'},
{name: 'prefix',type: 'int', sortType: 'asInt'},
{name: 'vendor_name'},
{name: 'rate', type: 'float', sortType: 'asFloat'},
{name: 'currency'},
{name: 'quality', type: 'int', sortType: 'asInt'},
{name: 'duration',type: 'int', sortType: 'asInt'},
{name: 'acd', type: 'float', sortType: 'asFloat'}
],
proxy: {
type: 'ajax',
timeout: 120000,
url: v_url,
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
}
},
autoLoad: true
}),
title: 'Price Reprort for "' + val + '" - Monthly' ,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'price_date',
width: 80,
text: 'Date',
renderer: Ext.util.Format.dateRenderer('Y-m-d')
},
{
xtype: 'gridcolumn',
dataIndex: 'country_code',
text: 'Counry Code',
width: 80
},
{
xtype: 'gridcolumn',
dataIndex: 'prefix',
text: 'Prefix',
width: 80
},
{
xtype: 'gridcolumn',
dataIndex: 'vendor_name',
width: 100,
text: 'Vendor Name'
},
{
xtype: 'gridcolumn',
dataIndex: 'currency',
width: 100,
text: 'Currency'
},
{
xtype: 'gridcolumn',
dataIndex: 'rate',
width: 50,
text: 'Rate'
},
{
xtype: 'gridcolumn',
dataIndex: 'quality',
width: 50,
text: 'Quality'
},
{
xtype: 'gridcolumn',
dataIndex: 'duration',
width: 100,
text: 'Duration'
},
{
xtype: 'gridcolumn',
dataIndex: 'acd',
width: 100,
text: 'ACD'
}
]
}]
});
var panel = Ext.getCmp("MainTabPanelID");
panel.remove('prefix_panel');
panel.add(newTab).show();
},
You cannot do it because you are not able to modify event args of a defined event.
But you can store the arguments you want to pass into the instance that fires the event or into the scope in which the event callback get executed. In that way you will have access to them either by the first event arg, which is in nearly all situations the instance that fires the event or by the this keyword when you have applied them to the scope.
Simplified example with data stored in callback scope:
fiddle