Related
I've error on grid, when try to click on disabled cell. Here is the code:
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'
}, {
name: 'Bart',
email: 'bart#simpsons.com',
phone: '555-222-1234'
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
plugins: {
ptype: 'cellediting',
clicksToEdit: 1
},
columns: [{
text: 'Name',
dataIndex: 'name',
editor: {
xtype: 'textfield',
disabled: true
}
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}],
height: 100,
width: 400,
renderTo: Ext.getBody()
});
}});
How to reproduce:
Click on cell "Lisa"
Sort by "Name" column
Wait 30 sec
Click on cell "Lisa" cell again
This error occurs:
Uncaught TypeError: Cannot read properties of null (reading 'value')
Reproduced on ExtJs "7.5.0" and older.
Java application sends to the front the following json data:
{"data":[{"id":1,"name":"","password":"xxxxxxxxxxxxxxxxxxx","roles":[{"id":1,"name":"Administrator"}],"username":"admin"}]}
In the front I have an user model like the following:
Ext.define('App.store.Users', {
extend: 'Ext.data.Store',
fields: [
{name: 'id', type: 'auto'},
{name: 'name', type: 'auto'},
{name: 'password', type: 'auto'},
{name: 'roles', type: 'auto'},
{name: 'username', type: 'auto'},
],
autoLoad: true,
proxy: {
type: 'ajax',
url: '/web/user',
reader: {
type: 'json',
root: 'data'
}
}
});
Edit:
I updated the code and this way the data is loaded.
Also i made a grid so I can show the results.
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [
{
xtype: 'gridpanel',
store: 'Users',
title: 'Users grid',
columns: [
{text: 'Id', dataIndex: 'id' },
{text: 'Username', dataIndex: 'username', width : 200 },
{text: 'Role', dataIndex: 'roles', width : 200 },
{text: 'Name', dataIndex: 'name', width : 200 },
]
}
]
});
Now the question that remains is that the grid is showing [object Object] how could i be showing the part that i want from that object, as the name of the role
You need to change the reader type to JSON, This code is working for me:
Fiddle
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: ['id', {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'data'
}
}
});
Ext.create("Users", {
listeners: {
load: function() {
console.log("Loaded " + this.getCount() + " records");
}
}
});
}
});
I also removed the mappings as I don't think that you need them.
EDIT
In regards to the data showing in a grid, the 'roles' property in the JSON data is an array, that's why it's showing in the grid as object, I've updated the fiddle to show a possible way to get this information, But it's not the recommended method. You should probably look at associations in ExtJs for this.
Reviewing the guide on the Data Package may also help with this.
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.define('Users', {
extend: 'Ext.data.Store',
fields: [{
name: 'id',
type: 'int'
}, {
name: 'username',
type: 'string'
}, {
name: 'name',
type: 'string'
}, {
name: 'roles',
type: 'auto'
}],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
root: 'data'
}
},
listeners: {
load: function(store, records) {
console.log("Loaded " + this.getCount() + " records");
}
}
});
var users = Ext.create("Users");
Ext.define('App.view.Home', {
extend: 'Ext.panel.Panel',
alias: 'widget.home',
title: 'Home',
layout: 'fit',
items: [{
xtype: 'gridpanel',
store: users,
title: 'Users grid',
columns: [{
text: 'Id',
dataIndex: 'id'
}, {
text: 'Username',
dataIndex: 'username',
width: 200
}, {
text: 'Role',
dataIndex: 'roles',
width: 200,
renderer: function(v, metadata) {
return v[0].name;
}
}, {
text: 'Name',
dataIndex: 'name',
width: 200
}]
}]
});
Ext.create('App.view.Home', {
renderTo: Ext.getBody()
});
}
});
Jqgrid is able to load the data. But, gviing error when it getting loaded.
Error is at below lin in - jqgrid min version:
k=b.jgrid.formatter.integer||{}
saying unable to get property of undefined null reference
Layout has included script file as follow:
<script src='#Url.Content("~/Scripts/jqgrid/jquery-1.10.2.min.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/i18n/grid.locale-en.js")' type="text/javascript"></script>
<script src='#Url.Content("~/Scripts/jqgrid/jquery.jqGrid.min.js")' type="text/javascript"></script>
Please help me I m just stuck. and spent 3 hours...
I google and found many link where it syas, locale is not added or add it on first line.. but still not got success.
$('#CategoriesGrdList').jqGrid({
ajaxGridOptions: {
error: function () {
$('#CategoriesGrdList')[0].grid.hDiv.loading = false;
alert('An error has occurred.');
}
},
url: '#Url.Action("GetAllCategoriesList", "Categories")/' + 0,
gridview: true,
autoencode: true,
//public JsonResult GetEnrolls(int adClassSchedID,DateTime attendanceDate,int adProgramID,int syCampusID)
postData: { categoryId: 1 },
//postData: { categoryId: rowID, attendanceDate: $('#AttendanceDate').val(), adProgramID: $('#adProgramID').val(), syCampusID: $('#syCampusID').val() },
datatype: 'json',
jsonReader: { root: 'List', page: 'Page', total: 'TotalPages', records: 'TotalCount', repeatitems: false, id: 'Id' },
mtype: 'GET',
colNames: ['Id', 'Code', 'Description', 'IsActive'],
colModel: [
{ name: 'Id', index: 'Id', hidden: true },
{ name: 'Code', index: 'Code', width: 170 },
{ name: 'Description', index: 'Description', width: 170 },
{ name: 'IsActive', index: 'IsActive', width: 170 }
],
pager: $('#CategoriesGrdPager'),
sortname: 'Code',
rowNum: 40,
rowList: [3, 3, 3],
width: '525',
height: '100%',
viewrecords: true,
beforeSelectRow: function (rowid, e) {
return false;
},
sortorder: 'desc'
}).navGrid('#CategoriesGrdPager', { edit: false, add: false, del: false, search: false, refresh: false });
});
Thanks
First of all you should always use jquery.jqGrid.src.js instead of jquery.jqGrid.min.js in case of some error inside of jqGrid.
I suppose that the reason of the error is missing grid.locale-en.js or other language specific file from i18n folder. The language file should be included before jquery.jqGrid.min.js or jquery.jqGrid.src.js. You should validate whether grid.locale-en.js is really loaded. Undefined $.jgrid.formatter could means only missing grid.locale-en.js (see here).
I recommend you to compare your HTML file (especially <head> part) with the demo HTML file from the jqGrid documentation.
By default jqGrid considers the text value to set the selected option in a combo box. How can I add a column for the key value and have jqGrid selecting the right option using the key value?
I've been using the custom formatter, but some pages are displaying undefined when the rows are not editable, and when the inline edit modes is enabled, they display the right option.
<script type="text/javascript">
jQuery(document).ready(function () {
jQuery('#Grid').jqGrid({
autowidth: true,
datatype: 'json',
height: '100%',
pager: '#pager',
rowNum: 10,
sortname: 'Description',
url: '/AppUrl/Service',
viewrecords: true,
gridComplete: function () { OnGridComplete() },
onSelectRow: function (rowid, status) { grid.EditGridRow(rowid) },
colModel: [
{
name: 'ID',
hidden: true,
key: true,
index: 'ID'
}, {
name: 'ModuleId',
formatter: formatAsDropDown,
label: 'Módulo',
sortable: true,
width: 300,
editable: true,
edittype: 'select',
editoptions: { "value": "1:Modulo 1;2:Modulo 2;3:Modulo 3" },
index: 'ModuleId'
}, {
name: 'Description',
label: 'Description',
sortable: true,
width: 300,
editable: true,
index: 'Description'
}
]
});
function formatAsDropDown(cellvalue, options, rowObject) {
return rowObject.ModuleName;
}
});
</script>
I am new to EXTjs(and to Stackoverflow as well). I was struggling with this issue and at last decided to ask for help.My question is " How to sync combobox and textfield values. i.e how to load different values from 'store' on textfield,while I am changing values on combobox? " My problem is that while I load values on combobox and I select them my textfield stays empty all the time. I tried "Ext.getCmp().setValue();" it works fine with this ,but I think it is not the best option if I'd have 100 textfields. I want combobox and textfield to be synched with store somehow. Any help is appreciated. Situation in pictures are in links below :
pic one
pic two
And my code :
My app.js :
Ext.Loader.setConfig({
enabled: true
});
Ext.application({
name: 'work',
appFolder: 'app',
controllers: ['Work'],
launch: function() {
Ext.create('Ext.container.Viewport', {
//layout: 'fit',
items: [{
xtype: 'rightpanel' // gets it from view class
}
]
});
}
});
My view RightPanel :
Ext.define('work.view.works.RightPanel', {
extend: 'Ext.panel.Panel',
ALIAS: 'widget.rightpanel',
width: 300,
title: 'Building navigation',
animCollapse: true,
collapsible: true,
split: true,
minSize: 400,
maxSize: 400,
margins: '0 5 0 0',
//activeTab:1, tabPosition:'bottom',
initComponent: function() {
this.items = [{
xtype: 'form',
items: [{
xtype: 'combobox',
fieldLabel: 'BuildingID',
queryMode: 'local',
name: 'Bid',
displayField: 'Bid',
valueField: 'Bid',
id: 'Bid',
MODE: 'remote',
store: 'Work'
}, {
xtype: 'textfield',
fieldLabel: 'Address',
name: 'Address',
displayField: 'Address',
valueField: 'Address',
id: 'Address',
store: 'Work'
}]
}];
this.columns = [{
header: 'ID',
dataIndex: 'Bid',
flex: 1
}, {
header: 'Texts',
dataIndex: 'Address',
flex: 1
}];
this.callParent(arguments);
}
});
My store :
Ext.define('work.store.Work', {
extend: 'Ext.data.Store',
model: 'work.model.Work',
storeId: 'workstore',
id: 'workstore',
autoLoad: true,
proxy: {
type: 'ajax',
limitParam: undefined,
startParam: undefined,
paramName: undefined,
pageParam: undefined,
noCache: false,
api: {
read: 'data/showWork.php' // just a .php file that reads values from database and shows them on combobox
},
reader: {
type: 'json',
root: 'data',
successProperty: 'success'
},
writer: {
type: 'json',
root: 'data',
encode: true
}
}
});
My Model class :
Ext.define('work.model.Work', {
extend: 'Ext.data.Model',
//idProperty: 'WorkID',
fields: [{
name: 'Bid',
type: 'int'
}, 'Address']
});
My Controller :
Ext.define('work.controller.Work', {
extend: 'Ext.app.Controller',
stores: ['Work'],
models: ['Work'],
views: [
'works.RightPanel' // name comes from view class
],
init: function() {
console.log('Done');
this.control({
'viewport > rightpanel': {
render: this.test
},
'rightpanel combobox[id=Bid]': {
select: this.change
}
});
},
change: function(buttons) {
var values = this.getStore('Work').collect('Address', 'Address', false);
var win = buttons.up('rightpanel'); // gets the needed widget
var form = win.down('combobox'); // gets the needed form
var value = form.getValue(); // gets the value
console.log("value " + value);
}
});
You want to watch for a change on the combobox, and then action a change based off its new value.
this.items = [{
xtype: 'form',
items: [{
xtype: 'combobox',
fieldLabel: 'BuildingID',
queryMode: 'local',
name: 'Bid',
displayField: 'Bid',
valueField: 'Bid',
id: 'Bid',
mode: 'remote',
store: 'Work'
listeners::{
change:function(cbx, newVal,oldVal,e){
var record = cbx.getStore().find("Bid",newVal); // theres prolly a better way to find this, such as to find the active record of the cbx
Ext.getCmp('Address').setValue(record.getValue("Address"))
}
}
},{
xtype: 'textfield',
fieldLabel: 'Address',
name: 'Address',
displayField: 'Address',
valueField: 'Address',
id: 'Address',
store: 'Work'
}]