My new in extjs and working on ExtJS 3.2.
In that my data is not loading but if comment data column is displaying can anyone please help me.
My code is
{
xtype: 'panel',
title: "Search Result",
items: [{
xtype: 'grid',
store: new Ext.data.Store({
autoDestroy: true,
fields: ['Name', 'Roll', 'Class'],
root: 'records',
// proxy: proxy,
data: [{
Name: false,
Roll: 'a',
Class: 20
}, {
Name: true,
Roll: 'b',
Class: 25
}]
}),
columns: [{
text: 'Name',
id: 'company',
header: 'Name',
width: 130,
sortable: false,
hideable: false,
dataIndex: 'Name'
}, {
text: 'Roll',
width: 130,
header: 'Name',
dataIndex: 'Roll',
hidden: false
}, {
text: 'Class',
width: 130,
header: 'Class',
dataIndex: 'Class',
hidden: false
}]
}]
}
Inside panel I am taking grid.
Can anybody please help me.?
I am writing data outside the scope and now its working fine.
My complete code is.
var myData = [
['FFPE Slide',2,'eSample'],
['Plasma',2,'eSample'],
['Whole Blood',2,'eSample'] ];
// create the data store
var store = new Ext.data.ArrayStore({
fields: [
{name: 'stype'},
{name: 'scnt'},
{name: 'src'}
]
});
store.loadData(myData);
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{id:'company',header: "Sample Type", width: 75, sortable: true, dataIndex: 'stype'},
{header: "Subjects Count", width: 75, sortable: true, dataIndex: 'scnt'},
{header: "Source", width: 75, sortable: true, dataIndex: 'src'}
],
stripeRows: true,
autoExpandColumn: 'company',
height:150,
width:150,
title:'Detailed Counts'
});
This is working fine.
Remove the root config (root:'records') in the store.. or try to add records property to the data object. Remove the reader as well
Related
I'm facing issue of firing edit event using cell editor in Ext Js 3.4.
I'm trying to achieve triggering an ajax call upon a cell edited after pressing 'Enter'.
For now, I just replaced with console.log('hi') but it doesn't show anything after I pressed 'Enter'.
I'm not sure what's wrong in my code. Appreciate if someone can point it out. Thanks.
var grid = new Ext.grid.EditorGridPanel({
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false,
listener: {
edit: function (el) {
console.log('hi');
}
}
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
Solution:
Use EditorGridPanel afteredit event:
afteredit(e)
Fires after a cell is edited. The edit event object has the following
properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index
Parameters:
e : Object An edit event (see above for description)
Example:
Ext.onReady(function () {
var api_store = new Ext.data.ArrayStore({
fields: ['key', 'name'],
data: [
['1', 'Name1'],
['2', 'Name2'],
['3', 'Name3']
]
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
listeners: {
afteredit: function(e) {
console.log('After edit. Column: ' + e.field);
}
},
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
});
I'm using Ext Js v6.2, In my application table constructed with ext js grid, I want to add combobox to specific cell [DEMO IMAGE ATTACHED], when I try to add combobox entire cell changes to combobox, But I need specific cell to be combobox. Here my code, I've searched in documentation and other stuff it doesn't help.please solve the problem.
Ext.define('OtherCharges1', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', mapping: 'name'},
{name: 'age', mapping: 'age'},
{name: 'marks', mapping: 'marks'},
{name: 'rate', mapping: 'rate'}
]
});
var newData1 = [
{name: "Freight"},
{name: "Insurance" },
{name: " Addl Chrg(High Sea)"},
{name: "Revenue Deposit on"}
]
var gridStore3 = Ext.create('Ext.data.Store', {
model: 'OtherCharges1',
data: newData1
});
var otherStore1 = Ext.create('Ext.grid.Panel', {
cls: 'custom-grid',
id: 'OtherId',
store: gridStore3,
stripeRows: true,
width: '100%',
collapsible: false,
enableColumnMove: false,
columnLines: true,
sortableColumns: false,
enableColumnHide: false,
enableColumnResize: false,
enableRowHeightSync: true,
columns:
[
{
header: "",
dataIndex: 'name',
flex: 1
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: '',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'age',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'marks',
flex: .5,
sortable: true,
hideable: false,
},
{
editor: {
xtype: 'textfield',
selectOnFocus: true
},
dataIndex: 'rate',
flex: .5,
sortable: true,
hideable: false,
}],
selType: 'cellmodel',
plugins: [
Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1
})]
});
To enable editing the grid in a specific cell you need to edit the beforeedit event. Create a validation to make sure you are editing the cell you want.
In this case you will only edit the cell in column 1 and row 1.
grid.on('beforeedit', function(editor, e) {
if (e.colIdx === 1 && e.rowIdx === 1)
{
return true;
}
else
{
return false;
}
});
Remember that the ExtJS grid starts at 0.
See this example fidlle.
Im tiro in Extjs.
That is my model:
Ext.define('CatModel', {
extend: 'Ext.data.Model',
idProperty: 'id',
fields: [{
name: "name",
convert: undefined
}, {
name: "id",
convert: undefined
}]
});
store:
var store = Ext.create('Ext.data.TreeStore', {
model:'CatModel',
root: {
expanded: true
},
proxy: {
type: 'ajax',
reader: 'json',
url: 'item_access.jsp?fullpage=true&show_cat=1'
}
});
and treePanel:
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Sample Layouts',
region:'north',
split: true,
height: 560,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
columns: [
{
xtype: 'treecolumn',
text: 'name',
flex: 2.5,
sortable: true,
dataIndex: 'name'
},
{
text: 'id',//I want to get this id
flex: 1,
dataIndex: 'id',
sortable: true
}
, {
xtype: 'checkcolumn',
text: 'Done',
dataIndex: 'done',
width: 55,
stopSelection: false,
menuDisabled: true,
listeners:{
checkchange:function(cc,ix,isChecked){
//alert(isChecked);
//I want to get this row id in here
}
}
}]
});
In checkchange function there are three parameter one unknown,two is index, and three is check status ...
So how can I get the the same row id where I check the checkbox??
Can I find that id number by checkbox row index??
You should be able to get the record from the TreeView with the row index, and then get the id property from it:
listeners:{
checkchange: function(col, idx, isChecked) {
var view = treePanel.getView(),
record = view.getRecord(view.getNode(idx));
console.log(record.get('id'));
}
}
I am using this to output a query from a database which outputs my data as I expect.
We are now wanting to filter that data by passing the the 'color' column if we want.
<script type="text/javascript">
Ext.onReady(function(){
var events_ds = new Ext.data.JsonStore({
autoLoad: true,
autoDestroy: true,
url: '<% $base %>json/events/WWN.json',
storeId: 'events_ds',
idProperty: 'id',
fields: [ 'id', 'precedence', 'affectedWWN', 'eventType', 'color', 'CollectTime' ]
});
var event_grid = new Ext.grid.GridPanel({
title: 'Events',
ds: events_ds,
height: 300,
columns: [
{
header: "ID",
dataIndex: 'id',
},
{
header: "Priority",
dataIndex: 'precedence',
sortable: true
},
{
header: "affectedWWN",
dataIndex: 'affectedWWN',
width:150,
sortable: true
},
{
header: "eventType",
dataIndex: 'eventType',
width:300,
sortable: true
},
{
header: "color",
dataIndex: 'color',
sortable: true
},
{
header: "CollectTime",
dataIndex: 'CollectTime',
width:150,
sortable: true
}]
});
var main_panel = new Ext.Panel({
autoScroll: true,
renderTo: 'main_panel',
items: [event_grid]
});
});
</script>
I am new at this and what I am seeing is to use something similar to this:
store.filter("color", "yellow");
but the filtering doesn't work like I am expecting.
What am I missing?
var event_grid = new Ext.grid.GridPanel({
title: 'Events',
//ds: events_ds, ???
store: events_ds,
I'm trying to adopt Ext for one of my small projects and got bit lost trying to implement the following: I have Orders and each will contain 1 or more PurchaseItem elements. I have built a grip that shows list of Orders and has a detailed view. How do I show details for each Order's PurchaseItem in detailed view?
Is there a way to loop through each in the OrderDetailsMarkup?
Here is my code below:
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price'
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: '/shopmng/json/list_of_orders/',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{Date: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 400,
split: true,
region: 'north'
});
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
Ext.create('Ext.Panel', {
renderTo: 'management_panel',
frame: true,
title: 'Manage Orders',
width: 1000,
height: 550,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});
Here is a sample of json that the grid deals with:
[
{
"status": "Новый заказ",
"delivery_type": "zazap",
"name": "Alexander Bolotnov",
"staff_comments": "",
"notes": "notes",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "1972",
"price": "1972",
"quantity": 1,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "2072.00",
"address": "Moscow, Tvardovsky somewhere",
"date_created": "2011-04-17T00:12:33.048000",
"user_name": null,
"id": 1
},
{
"status": "Новый заказ",
"delivery_type": "boo!",
"name": "бишон",
"staff_comments": "",
"notes": "",
"external_order_ref": "",
"purchase_items": [
{
"picture_name": "Трава-мурава",
"printSize": "60 x 90 (без полей)",
"picture_id": 1,
"cost": "3944",
"price": "1972",
"quantity": 2,
"paperType": "Акварельная бумага"
}
],
"phone": "79264961710",
"order_price": "4044.00",
"address": "аааааааааааааааап, вапвапвап",
"date_created": "2011-04-18T23:13:27.652000",
"user_name": null,
"id": 2
}
]
i think your problem is your understanding about XTemplate. more info
in docs, there are some example how to use XTemplate (also how to use nested template)..
this is works for me...
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.panel.*',
'Ext.layout.container.Border'
]);
var myDateFormat = "d/m/Y H:i";
Ext.onReady(function(){
Ext.define('Order',{
extend: 'Ext.data.Model',
fields: [
'date_created',
'status',
'name',
'phone',
'delivery_type',
'address',
'order_price',
'purchase_items' //add this if you try to manipulate it,
]
});
var store = Ext.create('Ext.data.Store',{
model: 'Order',
proxy: {
type: 'ajax',
url: 'order.json',
reader: 'json'
}
});
var grid = Ext.create('Ext.grid.Panel',{
store: store,
columns: [
{text: 'Date posted', width: 100, dataIndex: 'date_created', sortable: true, format: myDateFormat},
{text: 'Status', width: 120, dataIndex: 'status', sortable: true},
{text: 'Name', width: 120, dataIndex: 'name', sortable: false},
{text: 'Phone', width: 100, dataIndex: 'phone', sortable: false},
{text: 'Delivery Type', width: 160, dataIndex: 'delivery_type', sortable: true},
{text: 'Delivery Address', width: 220, dataIndex: 'address', sortable: false},
{text: 'Price', width: 100, dataIndex: 'order_price', sortable: true}
],
viewConfig: {
forceFit: true
},
height: 150,
split: true,
region: 'north'
});
/* i got error if use Ext.create
var OrderDetailsMarkup = [
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">', //looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
];
var OrderTpl = Ext.create('Ext.Template',OrderDetailsMarkup);
*/
var OrderTpl = new Ext.XTemplate(
'Some details<br />',
'status: {status}<br>',
'<tpl for="purchase_items">',// this is how to looping
'<hr>',
'{#}. {picture_name}',
'</tpl>'
);
Ext.create('Ext.Panel', {
renderTo: Ext.getBody(),
frame: true,
title: 'Manage Orders',
width: 600,
height: 500,
layout: 'border',
items: [grid, {
id: 'detailPanel',
region: 'center',
bodyPadding: 7,
bodyStyle: 'background: #FFFFFF;',
html: 'select order to view details'
}]
});
grid.getSelectionModel().on('selectionchange',function(sm, selectedRecord){
if (selectedRecord.length){
var detailPanel = Ext.getCmp('detailPanel');
OrderTpl.overwrite(detailPanel.body, selectedRecord[0].data);
}
});
store.load();
});