Have this code.
Ext.define('App.v2.model.Things', {
extend: 'App.v2.model.Base'
,fields: [{
name: 'C'
,type:'int'
},{
name:'NAME'
,type:'string'
},{
name:'SHORT_NAME'
,type:'string'
}]
,proxy:{
url:'/data/data1.php'
,reader : {
rootProperty: 'data'
},
extraParams: {
limit: 1000
}
},
idProperty: 'C'
});
model for document
Ext.define('App.v2.model.ThingsList', {
extend: 'App.v2.model.Base'
,fields: [{
name: 'C'
,type:'int'
},
{
name: 'THING_ID',
type:'int'
},
{
name: 'ZE',
type:'int'
},
{
name: 'HS',
type:'int'
},
{
name: 'THING_NAME',
type:'string'
},]
,proxy:{
url:'/data/thingsList.php'
,reader : {
rootProperty: 'data'
}
},
idProperty: 'C'
});
Form config
items: [{
xtype: 'form',
bodyStyle: 'border:none',
defaultType: 'textfield',
layout: 'fit',
maindata: [{
xtype: 'panel',
//layout: 'vbox',
layout: 'vbox',
id: 'ThingsForm',
items: [{
xtype: 'textfield',
fieldLabel: 'ЗЕ',
name: 'ZE',
width: 400,
allowBlank: false
},
{
xtype: 'textfield',
fieldLabel: 'HS',
name: 'HS',
width: 400,
allowBlank: false
},
{
xtype: 'combo',
fieldLabel: 'Thing',
name: 'THING_ID',
hiddenName: 'THING_NAME',
valueField: 'C',
displayField: 'SHORT_NAME',
store : {
model:'App.v2.model.Things',
autoLoad: true,
}
}
//]
]
}]
}]
load data to form
row = grid.store.getAt(this.conf.grid.getSelectionModel().getCurrentPosition().rowIdx);
form = this.down('form').getForm();
form.loadRecord(row);
all good. Form show values
after change of form try to update record
var record = form.getRecord(); // see old values of THING_ID and THING_NAME
record.set(form.getValues()); // see new value of THING_ID and OLD value of THING_NAME
How update THING_NAME to NEW value (TEXT) selected on COMBO in record?
only like describe there?
ExtJS 5 combobox - submitting both value and text
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 created a table using extjs where it is having three columns name, email and cars. In extjs we are having a default sorting method. here i want to add search method for all these three columns so that i can also search using the name, email and cars.
What change i need to do for the below code
The expected output is i need to get search filter option under each columns.
Ext.define('ViewerModel', {
extend: 'Ext.app.ViewModel',
alias: 'viewmodel.viewermodel',
stores: {
mystore: {
fields: ['name', 'email', 'cars'],
data: {
'items': [{
'name': 'Lisa',
"email": "lisa#simpsons.com"
}, {
'name': 'Bart',
"email": "bart#simpsons.com"
}, {
'name': 'Homer',
"email": "homer#simpsons.com"
}, {
'name': 'Marge',
"email": "marge#simpsons.com"
}]
},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
}
}
});
Ext.define('APP.HorizontalBox', {
extend: 'Ext.container.Container',
requires: ['Ext.layout.container.HBox'],
xtype: 'layout-horizontal-box',
width: 750,
height: 300,
layout: {
type: 'hbox',
align: 'stretch'
},
bodyPadding: 10,
defaults: {
frame: true,
bodyPadding: 10
},
viewModel: {
type: 'viewermodel'
},
items: [{
xtype: 'grid',
title: 'Grid: click on the grid rows',
itemId: 'myGridItemId',
flex: 1.2,
margin: '0 10 0 0',
bind: {
store: '{mystore}',
selection: '{users}'
},
columns: [{
text: 'Name',
dataIndex: 'name',
flex: 0.5
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Cars',
dataIndex: 'cars',
flex: 1
}],
dockedItems: [{
xtype: 'toolbar',
dock: 'top',
items: [{
xtype: 'button',
padding: '2 5 2 5',
text: 'Edit item',
handler: function (btn) {
var grid = btn.up('grid');
var selectedRow = grid.getSelectionModel().getSelection()[0];
var janela = Ext.create('APP.MyWindow', {
animateTarget: btn.getEl(),
//EDITED
viewModel: {
data: {
users: selectedRow
}
}
}).show();
}
}]
}],
}, {
xtype: 'form',
title: 'View',
itemId: 'panelbindItemId',
flex: 1,
margin: '0 10 0 0',
defaults: {
labelWidth: 50
},
items: [{
xtype: 'displayfield',
margin: '20 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'displayfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
Ext.define('APP.MyWindow', {
extend: 'Ext.window.Window',
alias: 'widget.mywindow',
reference: 'windowreference',
title: 'MyWindow | Edit record',
closable: true,
modal: true,
padding: '10px',
height: 150,
layout: 'fit',
initComponent: function () {
var me = this;
Ext.apply(me, {
items: [{
xtype: 'form',
layout: 'anchor',
defaults: {
padding: '5 0 5 0'
},
items: [{
xtype: 'textfield',
margin: '10 0 0 0',
fieldLabel: 'Name',
bind: '{users.name}'
}, {
xtype: 'textfield',
fieldLabel: 'Email',
bind: '{users.email}'
}]
}]
});
me.callParent(arguments);
}
});
Ext.application({
name: 'Fiddle',
launch: function () {
Ext.create('APP.HorizontalBox', {
renderTo: document.body,
width: 750,
height: 400,
title: 'Title'
});
}
});
You can do it in the afterrender event of grid (Refer this post.) For example:
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
text: 'Search',
iconCls: 'x-fa fa-home',
handler: function () {
console.log("Search Item");
}
}]);
}
}
Check this Fiddle.
What you are searching for is the FiltersFeature, and the usage is as follows:
xtype:'grid',
...
features:[{
ftype: 'filters',
local: true,
filters: [{
type: 'string',
dataIndex: 'name'
}, {
... (one definition for every column you want to allow filtering one)
}]
}]
Please note that you have to add a requires and maybe even load Ext.ux, as can be found in the last comment.
Other readers please be aware that FiltersFeature is ExtJS4 specific, and has been moved around for ExtJS 5 and 6.
You can also use this code where it will search the data using the date.
listeners: {
afterrender: function () {
var menu = Ext.ComponentQuery.query('grid')[0].headerCt.getMenu();
menu.add([{
xtype:'datefield',
name:'date1',
fieldLabel:'Filter By',
format: 'y-m-d',
listeners:{
renderer: Ext.util.Format.dateRenderer('y-m-d'),
field:{ xtype:'datefield',
autoSync:true,
allowBlank:false,
editor: new Ext.form.DateField(
{format: 'y-m-d'}) }
}
}
I have a grid that has combobox on one column. Data loads fine on the grid. But when I double click on one row to enable edit, the combobox doesn't show the data. (Please see the screenshot below) The highlighted part should show '1st Label'. But when I start to edit, it shows up like in the 2nd row with '2nd Label'.
I tried my code on 4.1 and it works fine. It seems 4.2.2 doesn't like combobox inside grid. Any help is really appreciated
This is my sample code. Please try it on Sencha's Code Editor to see both on 4.2.2 and 4.1.0
Ext.define('GridModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'Id',
type: 'int'
}, {
name: 'Value',
type: 'int'
}]
});
Ext.define('ComboModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'ComboId',
type: 'int'
}, {
name: 'Label',
type: 'string'
}],
idProperty: 'Order'
});
Ext.create('Ext.data.Store', {
storeId: 'comboStore',
model: 'ComboModel',
data: [{
ComboId: 1,
Label: '1st Label'
}, {
ComboId: 2,
Label: '2nd Label'
}]
});
Ext.create('Ext.data.Store', {
storeId: 'gridStore',
model: 'GridModel',
data: [{
Id: 1,
Value: 1
}, {
Id: 2,
Value: 2
}, {
Id: 3,
Value: 1
}, {
Id: 4,
Value: 2
}]
});
Ext.create('Ext.grid.Panel', {
width: 400,
height: 200,
renderTo: 'ct',
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
listeners: {
edit: function(editor, e) {
console.log(gridStore.getModifiedRecords());
}
}
})
],
store: Ext.data.StoreManager.lookup('gridStore'),
forceFit: true,
columns: [{
dataIndex: 'Id',
header: 'ID'
}, {
dataIndex: 'Value',
header: 'Label',
editor: {
xtype: 'combobox',
displayField: 'Label',
valueField: 'ComboId',
queryMode: 'local',
store: Ext.data.StoreManager.lookup('comboStore'),
allowBlank: true
},
renderer: function(value) {
var rec = comboStore.getById(value);
return rec ? rec.get('Label') : value;
}
}],
renderTo: Ext.getBody()
});
This is my popup with tabs.
I need to give a value from record to gridpanel in tab 2 in store to get attributes from server side by category_id. Searched answer in official documentation and didn't find.
Can help me somebody?
Ext.define('desk.view.CategoryPopup', {
extend: 'Ext.window.Window',
alias: 'widget.categorypopup',
title: 'Change Category',
layout: 'fit',
autoShow: true,
bdoyPadding: 10,
initComponent: function(){
this.items = [{
xtype: 'tabpanel',
items: [
{
xtype: 'form',
title: 'Add / Edit / Delete Category',
items: [
{
xtype: 'textfield',
name: 'name',
fieldLabel: 'Parent Category'
},
{
xtype: 'textfield',
name: 'new',
fieldLabel: 'New Category'
},
{
xtype: 'textfield',
name: 'id',
fieldLabel: 'Category ID',
hidden: true
},
{
xtype: 'textfield',
name: 'parent',
fieldLabel: 'Parent ID',
hidden: true
}
],
bodyPadding: 10
},
{
xtype: 'gridpanel',
alias: 'widget.categoryattr',
title: 'Attributes',
height: 350,
buttons: [{'text': 'Add attribute', 'action' : 'add-attribute'}],
columns: [
{
name: 'Name',
dataIndex: 'name'
}
],
width: 300,
store: Ext.widget('categoryattributes')
}
]
}];
this.buttons = [
{
text: 'Update',
action: 'add'
},
{
text: 'Delete',
action: 'delete'
}
];
this.callParent(arguments);
}
})
This is function in controller
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
}
you need something like this:
editCategories: function(grid, record){
var view = Ext.widget('categorypopup');
view.down('form').loadRecord(record);
Ext.Ajax.request({
url: '/api/category/'+ record.getId() +'/attributes', //example url insert your webservice
success: function(response){
var attributes = Ext.decode(response.responseText);
view.down('grid').getStore().loadData(attributes);
}
});
}
you will need a store with a model for your grid.
I'm trying to load a form from a record selected in a combo.
The store is loaded properly and the combo is populated, but, when I select a value from combo, form fields remain empty.
Any help will be appreciated.
This is the code:
Model:
Ext.define('AA.model.proc.Process', {
extend: 'Ext.data.Model',
fields: [
{ name: 'name', type: 'string' },
{ name: 'owner', type: 'string' },
{ name: 'mail_dest', type: 'string' }
],
proxy: {
type: 'rest',
url : 'data/camp.json',
reader: {
type: 'json',
root: 'camp',
totalProperty: 'count'
}
}
});
Store:
Ext.define('AA.store.proc.Process', {
extend: 'Ext.data.Store',
model: 'AA.model.proc.Process',
requires: 'AA.model.proc.Process'
});
Class:
Ext.define('AA.view.proc.IM', {
extend: 'Ext.window.Window',
alias: 'widget.im',
title: 'IM',
layout: 'fit',
height: 500,
width: 400,
autoShow: true,
plain: true,
modal: true,
headerPosition: 'right',
closable: false,
initComponent: function () {
this.items = [{
xtype: 'form',
fileUpload: true,
width: 550,
autoHeight: true,
border: false,
bodyStyle: 'padding:5px 5px 0',
frame: true,
labelWidth: 100,
defaults: {
anchor: '95%',
allowBlank: false,
msgTarget: 'side'
},
items: [{
xtype: 'combo',
name: 'name',
store: 'procstore',
fieldLabel: 'Name',
valueField: 'name',
displayField: 'name',
width: 150,
allowBlank: true,
listeners: {
scope: this,
'select': this.loadForm
}
}, {
xtype: 'textfield',
fieldLabel: 'Name',
name: 'name'
}, {
xtype: 'textfield',
fieldLabel: 'Owner',
name: 'owner'
}, {
xtype: 'textfield',
fieldLabel: 'E-mail owner',
name: 'mail_dest'
}]
}];
this.buttons = [{
text: 'Save',
action: 'save'
}, {
text: 'Cancel',
scope: this,
handler: this.close
}];
this.callParent(arguments);
},
loadForm: function (field, record, option) {
console.log(record)
// firebug returns
// $className "AA.model.proc.Process"
// $alternateClassName "Ext.data.Record"
console.log(this.down('form'))
// firebug returns the right form panel
this.down('form').loadRecord(record);
}
});
This is from the documentation for the select event:
select( Ext.form.field.ComboBox combo, Array records, Object eOpts )
Notice that the second parameter is an Array. But in your example the second parameter is an Ext.data.Record. You are treating array as a record. Modify your loadForm to make it process arrays of records:
loadForm: function (field,records,option) {
this.down('form').loadRecord(records[0]);
}
P.S. By the way you have two fields with name: 'name'.