Related
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [
{name:'type', type:'String'}
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Form',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type : 'json',
root: 'types'
}
}
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout : 'auto',
autoScroll : true,
items: [{
xtype:'selectcombo',
queryMode:'local',
emptyText: 'Select Condition',
store:store,
displayField: 'type',
valueField: 'type',
width : 200,
typeAhead : true
}],
});
When this loads, the selectcombo is empty, nothing gets loaded, i have searched through many sites, and can't find anything to help. Any suggestions would be great
The xtype you look for is combo, the store type is JsonStore because the ArrayStore will not interpret the json from the types root as you might expect. I can not simulate the ajax request here though.
Ext.onReady(function() {
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [{
name: 'type',
type: 'String'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Form',
data: [{
type: 'Aaaaaaa'
}, {
type: 'Bbbbbb'
}, {
type: 'Ccccccccccc'
}, {
type: 'Ddddddd'
}]
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout: 'auto',
autoScroll: true,
items: [{
xtype: 'combo',
queryMode: 'local',
emptyText: 'Select Condition',
store: store,
displayField: 'type',
valueField: 'type',
width: 200,
typeAhead: true
}],
});
Ext.create('DForms', {
renderTo: Ext.getBody()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" />
I think type in fields is case-sensitive. So try
fields :[{name : 'type', type : 'string'}]
If still not working, as Tejas1991 pointed out check the content of your json.
I am trying to use Jsonstore. I am not able to display the data in the grid, lot of empty rows are being displayed.
I want to display the data in testString variable in the grid.
Help me with this?
var testString = new String();
testString = Ext.util.JSON.encode(data);
this is the value in testString
//value Of testString: //[{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];
Store and grid
var dcStore = new Ext.data.JsonStore({
autoLoad: true,
fields: ['dc1','dc2','dc3','dc4'],
data : testString
});
this.dcGrid = new Ext.grid.GridPanel({
title: 'View',
store: dcStore,
columns:[
{header: 'dc1',dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc3'},
{header: 'dc4',dataIndex: 'dc4'}
]
});
If i assign the value to testString directly like this, data will be displayed in grid
var testString = [{"dc1":"abcd","dc2":"efg","dc3":"abc","dc4":"abc"}];
Fiddle Update:
Ext.application({
name : 'Fiddle',
launch : function() {
var testData = {"data":[{"dc1":"re","dc2":"we","dc3":"qw","dc4":"qwe"}]};
var testDataJson = Ext.util.JSON.decode(testData);
var testDataString = Ext.util.JSON.encode(testDataJson);
var dcStore = new Ext.data.JsonStore({
fields: ['dc1','dc2','dc3','dc4'],
data : testDataString
});
var dcGrid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
title: 'View',
store: dcStore,
columns:[
{header: 'dc1',dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc3'},
{header: 'dc4',dataIndex: 'dc4'}
]
});
}
});
JsonStores are usually used to pull in data from a remote source in JSON format, This could be from an AJAX request or directly to a JSON file, Then the reader parses this information into the store. If you already have the data locally then you are probably better using an ArrayStore. Also your local data is likely to be in JSON format already as its a JS object.
Also your grid was not configured correctly and only shown the first row for me, I've used the example code for a GridPanel from the API documentation here.
I can't give a direct fix for your issue above without knowing what is in the data variable in this line of code testString = Ext.util.JSON.encode(data); so I've put an example of using both an array store and a remote JSON store below for your reference which should help.
// app.js
Ext.onReady(function(){
Ext.BLANK_IMAGE_URL = '/js/ext-3.4.0/resources/images/default/s.gif';
var arrayData = [
["abc", "abc", "abc", "abc"],
["abc1", "abc1", "abc1", "abc1"],
["abc2", "abc2", "abc2", "abc2"],
["abc3", "abc3", "abc3", "abc3"],
["abc4", "abc4", "abc4", "abc4"]
];
var arrayStore = new Ext.data.ArrayStore({
// store configs
autoDestroy: true,
storeId: 'myStore',
fields: ['dc1', 'dc2', 'dc3', 'dc4'],
data: arrayData
});
var grid = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: arrayStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc2'},
{header: 'dc4', dataIndex: 'dc2'}
]
}),
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
var jsonStore = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad: true,
url: 'data/data.json',
storeId: 'myStore',
// reader configs
root: 'rows',
idProperty: 'dc1',
fields: ['dc1', 'dc2', 'dc3', 'dc4'],
});
var grid2 = new Ext.grid.GridPanel({
renderTo: Ext.getBody(),
store: jsonStore,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{id: 'dc1', header: 'dc1', width: 200, sortable: true, dataIndex: 'dc1'},
{header: 'dc2', dataIndex: 'dc2'},
{header: 'dc3', dataIndex: 'dc2'},
{header: 'dc4', dataIndex: 'dc2'}
]
}),
viewConfig: {
forceFit: true
},
sm: new Ext.grid.RowSelectionModel({singleSelect:true}),
width: 600,
height: 300,
frame: true,
title: 'Framed with Row Selection and Horizontal Scrolling',
iconCls: 'icon-grid'
});
});
// data.json
{
"rows": [{
"dc1": "abc",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}, {
"dc1": "test1",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}, {
"dc1": "test 2",
"dc2": "abc",
"dc3": "abc",
"dc4": "abc"
}]
}
I design the grid in extjs with editor option. I need the combo box as a column and also need combo box when i edit the grid. The i need delete column as the check box column for both edit and normal grid. Its not working. can any one please help me
Here is the snippet:
this.mcmGridPanel = new Ext.grid.GridPanel({
height: 300,
width: 690,
title: 'Results',
store: store,
multiSelect: true,
x: 0,
y: 170,
columns: [
{ xtype: 'gridcolumn', text: 'FlightNumber', sortable: true, flex: 1, width: 150, dataIndex: 'FlightNumber', hidden: true,
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small'
})
},
{ xtype: 'gridcolumn', text: 'Origin', sortable: true, width: 150, dataIndex: 'Origin',
editor: {
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small'
})
}
},
{ xtype: 'gridcolumn', text: 'Destination', sortable: true, width: 150, dataIndex: 'Destination',
editor: {
editor: new Ext.form.field.ComboBox({
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
lazyRender: true,
listClass: 'x-combo-list-small'
})
}
},
{ xtype: 'datecolumn', text: 'StartDate', width: 80, dataIndex: 'StartAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'StartTime', text: 'StartTime', width: 60, dataIndex: 'StartAvailabilityTime',
editor: {
xtype: 'timefield',
format: 'H:i',
increment: 15,
allowBlank: false
}
},
{ xtype: 'datecolumn', text: 'EndDate', width: 80, dataIndex: 'EndAvailability', format: 'Y-m-d',
editor: {
xtype: 'datefield',
allowBlank: false,
format: 'Y-m-d'
}
},
{ header: 'EndTime', text: 'EndTime', width: 60, dataIndex: 'EndAvailabilityTime',
editor: {
xtype: 'timefield',
format: 'H:i',
increment: 15,
allowBlank: false
}
},
{
xtype: 'gridcolumn',
text: 'Delete?',
header: 'Delete?',
dataIndex: 'delete',
width: 60,
renderer: function (value, meta, record, rowIndex, colIndex) {
return '<center><input type="checkbox" id="Delete-' + rowIndex + '"/></center>';
},
handler: function() {
},
//disabled: true,
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor',
}
}
]
});
I use the following code but Its not working. can any one please help me
I don't see the function that should display the combobox. In order to get this to work automatically, you shoud add the RowEditing plugin.
Try to add this
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
clicksToMoveEditor: 1,
autoCancel: false
})
],
Look at this example in the doc. This will help you to get row editing work.
Is your column definition OK?
I got a combobox using this, but I'm aware this is not the full configuration needed:
{
dataIndex: 'name',
flex: 1,
text: 'Name',
field: {
xtype: 'combobox'
},
}
Update
I experienced today a similar problem: my textfields were not rendering.
The culprit was unexpected:
I use a custom template, and the css rules needed for the display were missing. All I had to do was rebuilding the app using sencha cmd sencha app build. This completed the files of the template, and the field of the roweditor displayed correctly.
Chances are that this is also the case with you...
I have a jqGrid inside of a div orderForm that can have a verifying number of rows added to it by a user.
What I would like to do is: whenever a user adds a row to the jqGrid, the totals in the TOTAL_LINE_AMOUNT column are added together and inserted into the label Subtotal
$('#orderForm).jqGrid({
data: details,
datatype: 'local',
colNames: ['ID', 'QUANTITY', 'MODEL_ORDER_NUM', 'DESCRIPTION', 'PRICE_EACH', 'TOTAL_LINE_AMOUNT'],
colModel: [
{ name: 'DETAIL_RECORD_ID', index: 'DETAIL_RECORD_ID', sorttype: 'string' },
{ name: 'QUANTITY', index: 'QUANTITY', sorttype: 'string' },
{ name: 'MODEL_ORDER_NUM', index: 'MODEL_ORDER_NUM', sorttype: 'string' },
{ name: 'DESCRIPTION', index: 'DESCRIPTION', sorttype: 'string' },
{ name: 'PRICE_EACH', index: 'PRICE_EACH', sorttype: 'string' },
{ name: 'TOTAL_LINE_AMOUNT', index: 'TOTAL_LINE_AMOUNT', sorttype: 'string' }
],
search: true,
onSelectRow: LoadInput,
loadonce: false,
jsonReader: { cell: '' },
sortname: 'DETAIL_RECORD_ID',
sortorder: 'asc',
sortable: true,
ignoreCase: true,
viewrecords: true,
height: 'auto',
width: 'auto',
shrinkToFit: false,
hiddengrid: false,
caption: 'Detail Records'
});
UPDATE: Here is how I load data into my grid
Form.Controller.orderForm = new function () {
var _detailRecordId = 1;
this.Create = function () {
var requestData = Controller.GetRequestData();
requestData.orderForm.push({
DETAIL_RECORD_ID: "T" + _detailRecordId++,
REQUEST_RECORD_ID: requestData.REQUEST_RECORD_ID,
QUANTITY: $('#orderForm_QUANTITY_INPUT').val(),
MODEL_ORDER_NUM: $('#orderForm_MODEL_ORDER_NUM_INPUT').val(),
DESCRIPTION: $('#orderForm_DESCRIPTION_INPUT').val(),
PRICE_EACH: $('#orderForm_PRICE_EACH_INPUT').val(),
TOTAL_LINE_AMOUNT: $('#orderForm_TOTAL_LINE_AMOUNT_INPUT').text()
});
Form.View.orderFrom.LoadGrid(requestData.orderForm);
};
Your code doesn't show which editing mechanism your are using with jqGrid so it is hard to say on which event you should subscribe (most porobably it should be either jqGridInlineAfterSaveRow or jqGridAddEditAfterComplete).
Getting the sum of column is very simple as jqGrid has a ready to use method for this:
var subTotal = $('#orderForm').jqGrid('getCol', 'TOTAL_LINE_AMOUNT', false, 'sum');
Depending of what kinf of HTML element your label is you should be able to set its text with one of following:
$('#Subtotal').text(subTotal);
or
$('#Subtotal').val(subTotal);
I have this problem on ExtJS. I created a grid that display on a window, it will get json data from an external server side script. It is rougly working but the firebug keeps telling me that store is undefined everything I click on the columns in the grid. Can you please help me solve this. Here is my code:
var fields = [{
name: "Name",
type: "text"
}, {
name: "NSId",
type: "number"
}, {
name: "Id",
type: "number"
}, {
name: "Version",
type: "number"
}];
var columns = [{
header: 'Name',
id: 'Name',
width: 160,
sortable: true,
dataIndex: 'Name'
}, {
header: 'NSId',
id: 'NSId',
width: 45,
sortable: true,
hidden: true,
dataIndex: 'NSId'
}, {
header: 'Id',
id: 'Id',
width: 30,
sortable: true,
hidden: true,
dataIndex: 'Id'
}, {
header: 'Version',
id: 'Version',
width: 50,
sortable: true,
hidden: true,
dataIndex: 'Version'
}];
var searchAndPickUrl = OcsConfig.url.refto;
var pickerUrl = '?picker=' + config.picker;
var createRefTo = searchAndPickUrl + pickerUrl;
var jsonstore = {
xtype: 'jsonstore',
autoDestroy: true,
fields: fields,
root: 'candidates',
idProperty: 'Name',
url: createRefTo,
autoLoad: true
};
var cmpGrid = null;
var clickCell = function (trigger) {
var record = cmpGrid.getSelectionModel().getSelected();
var selValues = record.data['name'] + ',' + record.data['nsid'] + ',' + record.data['id'] + ',' + record.data['version'];
Ext.Msg.alert('Name', selValues);
};
var refToGrid = {
id: Ext.id(),
xtype: 'grid',
store: jsonstore,
columns: columns,
stripeRows: true,
defaults: {
anchor: '100%'
},
autoExpandColumn: 'Name',
height: 350,
width: 600,
title: '',
stateful: true,
stateId: 'grid',
listener: {
rowdblclick: clickCell
}
};
var refToWin = function refToInputVal(trigger) {
var values = config.options || [];
var cmpWin = null;
var genId = Ext.id();
var win = null;
if (cmpWin === null) {
win = {
xtype: 'window',
title: config.caption || '',
modal: true,
items: [{
xtype: 'form',
id: genId,
padding: 5,
defaults: {
anchor: '100%'
},
items: [refToGrid]
}],
bbar: [{
xtype: 'button',
text: 'OK',
handler: function () {
returnValue(trigger, cmpGrid);
cmpWin.hide();
}
}, {
xtype: 'button',
text: 'Cancel',
handler: function () {
cmpWin.hide();
}
}],
Thanks.
Change your store declaration...
var jsonstore = new Ext.data.JsonStore({
autoDestroy: true,
fields: fields,
root: 'candidates',
idProperty: 'Name',
url: createRefTo,
autoLoad: true
});