Related
Help with any portion of this is appreciated. I am totally new to using extjs and the version is old (3.3). When the user selects the combo box, data is loaded in the combo box. I need to allow the user to select/insert a blank option (i.e.: so the first option should be id:0 field and can be blank). Last, I must give the model an additional field: id.
I can see the data returned in network tab, so I have the url path correct (the url was set up to return an id and list name), but the store property is empty, so no data in combo box.
header: 'Bucket List',
sortable: true,
dataIndex: 'bucket_list',
width: 10,
align: 'center',
editor: BucketList = new Ext.form.ComboBox({
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
beforeload: function (data_objStore, data_objOpt) {
data_objOpt.params.userModel = userModelCbx.getValue();
data_objOpt.params.user_id = 001;
}
}
}),
listeners: {
blur: function () { }
}
}),
Below code shows the response, but at index 0, id is 1. I need index 0 to be id: 0 or null value ( 0: {id: 0, name: ''} )
RESPONSE:
0: {
id: 1,
name: "bucketListItem_1"
}
1: {
id: 2,
name: "bucketListItem_2"
}
2: {
id: 3,
name: "bucketListItem_3"
}
3: {
id: 4,
name: "bucketListItem_4"
}
I have read alot of the docs and answers here on SO. I tried using some of the store methods, like add(), insert(), load(), but I'm probably using them in the wrong places or something. I'm asking here because I'm stuck and I really hope someone will help me. Thanks.
UPDATE:
after beforeload, add this to store listeners to insert a blank record. Make sure your reader is accessing the right fields
beforeload: function( sObj, optObjs ){
// code here...
},
load: function(store, records) {
store.insert(0, [new Ext.data.Record({
id: null,
name: 'None'
})
]);
}
Response:
0: {
id: null,
name: "None"
}
1: {
id: 1,
name: "bucketListItem_1"
}
2: {
id: 2,
name: "bucketListItem_2"
}
...
You may try with next working example. You need to insert the record on store's load listener using new Ext.data.Record. Also check tpl config option - it's needed to show empty record correctly. Example is tested with ExtJS 3.4, but I think it should work with your version too.
Ext.onReady(function() {
var combo = new Ext.form.ComboBox({
tpl : '<tpl for="."><div class="x-combo-list-item">{name} </div></tpl>',
valueField: 'name',
displayField: 'name',
triggerAction: 'all',
typeAhead: true,
preventMark: true,
editable: false,
store: new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
url: '/todos/sysadmin/bucket-lists',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
}),
listeners: {
load: function (s) {
record = new Ext.data.Record({
id: 0,
name: ''
});
s.insert(0, record);
}
}
})
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({
url: 'combo-extjs3-editor-json.html',
method: 'GET'
}),
reader: new Ext.data.JsonReader({
root: 'bucket_lists',
fields: [
'id',
'name'
]
})
}),
width: 600,
height: 300,
columns: [
{
header: 'Name',
dataIndex: 'name',
width: 130,
editor: combo
}
]
});
});
I just started to study extjs 6.
How it is possible to implement dependent grids when the main displays data from the table, when clicked on, in the second grid, the dependent entries from the second table are displayed.
What I realized at the moment:
I created a grid, I get the records from the "Operation" table, I call it using the CRUD. In the "Operation" table, all entries are associated with the second table (numoperation) in the code field.
It is required to me that at pressing on record of the main grid which is already created, to receive dependent records from the table numoperation in the second grid.
How can this be implemented in general?
I would be glad if you share useful links, tips or examples.
Thank you in advance.
Below is the code for the client part of the application:
Ext.onReady(function () {
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'date_op',
'code',
'status',
'type'
]
});
var urlRoot = 'data?model=Operation&method=';
var registrStore = Ext.create('Ext.data.Store', {
model: 'Operation',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
var rowEditing = Ext.create('Ext.grid.plugin.RowEditing', {
clicksToEdit: 2,
autoCancel: false,
listeners: {
edit: function (editor, context) {
var emp = registrStore.getProxy();
var con = context.record;
emp.setExtraParam("id", con.data['id']);
emp.setExtraParam("date_operation", con.data['date_operation']);
emp.setExtraParam("code", con.data['code']);
emp.setExtraParam("status", con.data['status']);
emp.setExtraParam("type", con.data['type']);
}
}
});
var textField = {
xtype: 'textfield'
};
// Определение столбцов
var columns = [
{
header: 'ID',
dataIndex: 'id',
sortable: true,
width: 35
},
{
header: 'Дата',
dataIndex: 'date_op',
sortable: true,
editor: textField
},
{
header: 'Код',
dataIndex: 'code',
sortable: true,
editor: textField
},
{
header: 'Статус',
dataIndex: 'status',
sortable: true,
editor: textField
},
{
header: 'Тип',
dataIndex: 'type',
sortable: true,
editor: textField
}
];
var pagingToolbar = {
xtype: 'pagingtoolbar',
store: registrStore,
displayInfo: true,
items: [
'-',
{
text: 'Save Changes',
handler: function () {
registrStore.sync();
}
},
'-',
{
text: 'Reject Changes',
handler: function () {
// Отмена изменений в stoe
registrStore.rejectChanges();
}
},
'-'
]
};
var onDelete = function () {
var selected = grid.selModel.getSelection();
Ext.MessageBox.confirm(
'Confirm delete',
'Are you sure?',
function (btn) {
if (btn == 'yes') {
var nn = selected[0].get('id')
var emp = registrStore.getProxy();
emp.setExtraParam("id", nn)
grid.store.remove(selected);
grid.store.sync();
}
}
);
};
var onInsertRecord = function () {
var selected = grid.selModel.getSelection();
rowEditing.cancelEdit();
var newEmployee = Ext.create("Operation");
registrStore.insert(selected[0].index, newEmployee);
rowEditing.startEdit(selected[0].index, 0);
};
var doRowCtxMenu = function (view, record, item, index, e) {
e.stopEvent();
if (!grid.rowCtxMenu) {
grid.rowCtxMenu = new Ext.menu.Menu({
items: [
{
text: 'Insert Operation',
handler: onInsertRecord
},
{
text: 'Delete Operation',
handler: onDelete
}
]
});
}
grid.selModel.select(record);
grid.rowCtxMenu.showAt(e.getXY());
};
var grid = Ext.create('Ext.grid.Panel', {
title: 'Таблица операций',
items: grid,
columns: columns,
store: registrStore,
loadMask: true,
bbar: pagingToolbar,
plugins: [rowEditing],
stripeRows: true,
selType: 'rowmodel',
viewConfig: {
forceFit: true
},
listeners: {
itemcontextmenu: doRowCtxMenu,
destroy: function (thisGrid) {
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
}
},
renderTo: Ext.getBody()
});
registrStore.load();
});
What you probably want to do is to add a listener on the main grid that listens for the event: select.
https://docs.sencha.com/extjs/6.5.3/modern/Ext.grid.Grid.html#event-select
listeners: {
select: "onSelectMainGrid",
},
then you want to have a function called onSelectMainGrid or something similar
var onSelectMainGrid : function(grid, selectedItem) {
. . .
}
and in this function, you want to get the store from the dependent grids and you want to call the .load() function on them. For your dependent grid's store's proxy, use the config extraParams: {}
https://docs.sencha.com/extjs/6.5.3/modern/Ext.data.Connection.html#cfg-extraParams and bind the selection from the main grid to the extraParams of the dependent grids. Then call the method .load() on the dependent grid's store. The store of your dependent grid will look something like
var dependentGridStore = Ext.create('Ext.data.Store', {
model: 'OperationDependent',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
extraParams: { // <==THIS IS NEW
valueFromMainGrid: '{selectedValueFromMainGrid}'
}
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
. . .
. . .
});
I noticed that you have all the code in the same file. It is strongly advised that you separate your code into views, viewModels, and viewControllers.
One last thing, If you don't make use of a viewModel for databinding, alternatively in the onSelectMainGrid function, since you are passing the selectedItem parameter, you can just get the dependent grid, then get its store, then get its proxy, and then set the extraParams to the selectedItem passed as parameter to the function.
Let me know if you need any clarification.
I did so (shortened the code for better perception):
Ext.define('Operation', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'date_operation',
'code',
'status',
'type',
'mesto_hraneniya',
'contragent',
'sum_operation',
'rezerv',
'cnt_doc',
'stellag'
]
});
var urlRoot = 'data?model=Operation&method=';
// Хранилище для данных таблицы Registr
var registrStore = Ext.create('Ext.data.Store', {
model: 'Operation',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
api: {
create: urlRoot + 'Create',
read: urlRoot + 'Read',
update: urlRoot + 'Update',
destroy: urlRoot + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
Ext.define('Tovary', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [
{ name: 'id', type: 'int' },
'name',
'code',
'prise',
'unit'
]
});
var urlRootTv = 'data?model=Tovary&method=';
var TovaryGridStore = Ext.create('Ext.data.Store', {
model: 'Tovary',
pageSize: 10,
proxy: {
type: 'jsonp',
noCache: false,
extraParams: {
inclProps: '{code_tv}'
},
api: {
create: urlRootTv + 'Create',
read: urlRootTv + 'Read',
update: urlRootTv + 'Update',
destroy: urlRootTv + 'Destroy'
},
reader: {
type: 'json',
metaProperty: 'meta',
root: 'data',
idProperty: 'id',
totalProperty: 'meta.total',
successProperty: 'meta.success'
},
writer: {
type: 'json',
encode: true,
writeAllFields: true,
root: 'data',
allowSingle: false,
}
}
});
......
// Grid панель
var grid = Ext.create('Ext.grid.Panel', {
title: 'Таблица операций',
items: grid,
columns: columns,
store: registrStore,
loadMask: true,
bbar: pagingToolbar,
plugins: [rowEditing],
stripeRows: true,
selType: 'rowmodel',
viewConfig: {
forceFit: true
},
listeners: {
itemcontextmenu: doRowCtxMenu,
destroy: function (thisGrid) {
if (thisGrid.rowCtxMenu) {
thisGrid.rowCtxMenu.destroy();
}
},
select: function(grid, selectedItem) {
TovaryGridStore.proxy.extraParams = {'code_tv' : selectedItem.id.code};
TovaryGridStore.load();
}
},
renderTo: Ext.getBody()
});
registrStore.load();
When I click on a row in the grid, the browser console displays an error:
GET http://127.0.0.1:8000/hello_extjs/data?model=Tovary&method=Read&code_tv=&page=1&start=0&limit=10&callback=Ext.data.JsonP.callback2 500 (Internal Server Error)
What is the cause of this error? Whether correctly I understand that now I need to deduce the second Ext.grid.Panel what to display in it the data of model "Tovary"?
I have an in-line store that is inside of a simple combobox. This store has some default inline-data. Now I'm looking for an event that gets fired once the store is created and this event needs to supply me with the data that is in the store.
I tried it like this:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
let records = store.getData()
records.forEach(record => {
console.log(record.getField('name'))
})
}
}
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody()
});
But it doesn't work. store.getData() doesn't seem to contain my records.
There's my fiddle:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h53
Use this now store show console data:
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
//autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
datachanged : function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
store.load();
}
},
});
I finally managed to solve the problem by accessing the store after it's combobox is rendered:
https://fiddle.sencha.com/?fiddle=v7#fiddle/1h7c
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
store: {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
},
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
let store = me.getStore()
console.log("Event fired!")
store.each(record => {
console.log(record.get('name'))
})
}
},
});
You can easily do this by creating store afterrender of combo box and set store to combo box.
Ext.create('Ext.form.ComboBox', {
fieldLabel: 'Choose',
queryMode: 'local',
valueField: 'name',
displayField: 'name',
renderTo: Ext.getBody(),
listeners: {
afterrender: function(me) {
var store = Ext.create('Ext.data.Store', {
autoLoad: true,
fields: [
{name: 'name', type: 'string'}
],
data : [
{"name":"TestName_A"},
{"name":"TestName_B"},
{"name":"TestName_C"},
],
listeners: {
load: function(store) {
Ext.each(store.data.items,function(rec){
console.log(rec.data.name);
});
}
}
});
me.setStore(store);
}
},
});
I'm learning extJS and trying to create simple application following this and that guides.
My app.js file:
sstore = new Ext.data.Store({
autoLoad: true,
fields: ['firstName', 'lastName', 'educationId', 'townId'],
proxy: {
type: "ajax",
url: "data",
reader: {
type:"json",
root: "users"
}
}
});
Ext.application({
name: 'Application',
autoCreateViewport: true,
controllers: ['MainController']
});
Viewport.js:
Ext.define('Application.view.Viewport', {
extend: 'Ext.container.Viewport',
layout: { type: "vbox", align: 'stretch' },
items : [{
xtype: 'mainList',
autoScroll: true
}]
});
List.js:
Ext.define('Application.view.List', {
extend: 'Ext.grid.Panel',
alias : 'widget.mainList',
title : 'Users',
store: sstore, // ***** LOOK HERE PLEASE *****
//store: 'Users',
columns: [
{ header: 'Имя', dataIndex: 'firstName' },
{ header: 'Фамилия', dataIndex: 'lastName' },
{ header: 'Образование', dataIndex: 'educationId'},
{ header: 'Город', dataIndex: 'townId'}
]
});
Store (Users.js) :
Ext.define('Application.store.Users', {
extend: 'Ext.data.Store',
storeId: 'usersStore',
//model: 'Application.model.User',
fields: ['firstName', 'lastName', 'educationId', 'townId'],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data',
reader: {
type: 'json',
root: 'users'
}
},
onProxyLoad: function (aOperation) {
console.log('From store');
console.log(aOperation);
}
});
When I'm changing store: sstore on store: 'Users' in my List.js file, it's not loading any data, but with store created in app.js file, which lives in sstore variable, it works ok.
What I tried and it didn't help:
using memory proxy,
used store: Ext.data.StoreManager.lookup('usersStore'),
it's not problem with backend data (because sstore works fine)
I can see that the store from Users.js is loading (because the console output from onProxyLoad function).
This is what I see in a browser:
Full js app lives here
My view file is here
And I'm using extJS 4.2
This was really stupid. Problem was in onProxyLoad function. When I deleted it from store app worked as I expected.
I created the following grid component:
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
});
}
});
The grid renders correctly, and the URL that is mapped to MyAppUrls.ListRelationshipMembers is correct. The data is being retrieved, and the ListRelationshipMembers URL is returning the following JSON:
{"data":[{"Id":1,"ObjType":"topic","Name":"Test2"}]}
Yet, even though the grid is rendered (columns, borders, etc..) no data is showing in the actual grid though. Since this is my first time using a data store, I am unsure of what I am doing wrong. Any help would be appreciative.
Edit:
I tried updating the store to have a reader via the following code:
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
}),
groupField: 'ObjType'
});
No change, the datagrid is not being filled with the records
Evan is correct. Your biggest problem is a lack of a reader. That and the validation stub you left in there needed to return true. If you can't just drop this code in and have it work you have some other problem.
MyApp.grids.RelationshipMemberGrid = Ext.extend(Ext.grid.GridPanel, {
autoHeight: true,
iconCls: 'icon-grid',
title: 'Relationship Members',
frame: true,
viewConfig: { forceFit: true },
relationshipId: null,
documentId: null,
initComponent: function () {
if (this.verifyParameters()) {
// Initiate functionality
this.columns = this.buildColumns();
this.view = this.buildView();
this.store = this.buildStore();
this.store.load();
}
MyApp.grids.RelationshipMemberGrid.superclass.initComponent.call(this);
},
verifyParameters: function () {
// Verification code
return true;
},
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10
}, {
header: 'Type',
dataIndex: 'ObjType',
sortable: true,
width: 10
}, {
header: 'Name',
dataIndex: 'Name',
sortable: true
}];
},
buildView: function () {
return new Ext.grid.GroupingView({
forceFit: true,
groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Members" : "Member"]})'
});
},
buildStore: function () {
return new Ext.data.GroupingStore({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
reader: new Ext.data.JsonReader({
root: 'data',
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
groupField: 'ObjType'
})
});
}
});
Think you need to do a couple of things here: firstly, as mentioned by Evan, you need to add a reader to your store, like this:
buildStore: function () {
return new Ext.data.Store({
url: MyAppUrls.ListRelationshipMembers,
baseParams: { relationshipId: this.relationshipId },
fields: ['Id', 'ObjType', 'Name'],
sortInfo: { field: 'Name', direction: 'ASC' },
reader: new Ext.data.JsonReader({
root: 'data'
})
});
}
I've changed the store type here to something simpler - was there a particular reason you were using GroupingStore? Note that the root is specified in the reader, not the store itself.
Then, in your columns, I'd tend to add a renderer to explicitly determine what each column will display, such as:
buildColumns: function () {
return [{
header: 'Id',
dataIndex: 'Id',
sortable: true,
width: 10,
renderer: function (value, metaData, record) {
return record.data.Id
}
} ... ];
}
I've got into the habit of using renderers, since I modify the content of my column cells quite heavily in my grids. Notice here the arguments being passed to the renderer function; there are a few more you can pass in - see the ExtJS API if you need more info on what you can actually access. On that note, the API documentation is pretty good - it can take some digging into but definitely worth your time if you're working with ExtJS a lot.
You haven't specified a reader on your store, you need to specify the root in the JsonReader.