I could not paginate on the grid. I looked through their examples but encountered proxy errors. I share my own code. I will be glad if you help.
I share my codes below
Ext.QuickTips.init();
Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
var grid_data_veri;
var grid_array = [];
$.ajax({
type: 'GET',
url: 'ajaxQueryData?_qid=4146&xirsaliye_dt_k='+baslangic_tarih+'&xirsaliye_dt_b='+bitis_tarih,
data: { get_param: 'value' },
dataType: 'json',
async: false,
success: function (kat, data) {
var kat_sayisi = kat.browseInfo.totalCount;
for(var i_kat = 0; i_kat < kat_sayisi; i_kat++) {
var json = {
"sira_no":sira_no ,
"branch_id":kat.data[i_kat].branch_id_qw_,
"firma": kat.data[i_kat].firma
};
grid_array.push(json);
}
grid_data_veri = JSON.stringify(grid_array);
var store = new Ext.data.JsonStore({
fields: [
{name: "sira_no", type: "int"},
{name: "branch_id"},
{name: "firma"}
]
});
// manually load local data
store.loadData(Ext.decode(grid_data_veri));
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'sira_no',
header : 'Sıra No',
width : 50,
sortable : true,
dataIndex: 'sira_no'
},
{
header : 'Şube',
width :150,
sortable : true,
dataIndex: 'branch_id'
}
,
{
header : 'Firma',
width :250,
sortable : true,
dataIndex: 'firma'
}
],
stripeRows: true,
height:395,
width: 650,
stateful: true,
stateId: 'grid'
});
grid.render('grid');
}
});
Related
Good afternoon, I have this data in a jsgrid table, the fact is that when the database returns the date when displaying it on the page it looks like this: / Date (1614232800000) / what I need is to convert it to DD format / MM / YYYY
Reading the official documentation, there is by default a type of date field as such, but it is possible to modify parameters at will, that being the case, how can I convert the date?
I read all from this, any idea, thank you.
http://js-grid.com/docs/#custom-field
First of all, Thanks.
var MyDateField = function (config) {
jsGrid.Field.call(this, config);
};
MyDateField.prototype = new jsGrid.Field({
css: "date-field", // redefine general property 'css'
align: "center", // redefine general property 'align'
myCustomProperty: "itemTemplate", // custom property
itemTemplate: function (value) {
return new Date(value).toDateString();
}
});
jsGrid.fields.date = MyDateField;
$('#dgrecordsfound').jsGrid({
width: "100%",
height: "350px",
filtering: false,
inserting: false,
editing: false,
sorting: true,
paging: true,
autoload:true,
pageButtonCount: 5,
noDataContent:"No records!",
loadIndication: true,
loadMessage: "Loading, Please wait",
pagercontainer:null,
pageIndex: 1,
pageSize: 6,
pageButtonCount: 15,
pagerFormat: "Pages: {first} {prev} {pages} {next} {last} {pageIndex} de {pageCount}",
pagePrevText: "Prev",
pageNextText: "Next",
pageFirstText: "First",
pageLastText: "Last",
pageNavigatorNextText: "...",
pageNavigatorPrevText: "...",
controller: {
loadData: function () {
return $.ajax({
type: "GET",
datatype: "json",
data: { parname: "#ViewBag.name" , parlastname: "#ViewBag.lastname"},
url: "/asoc/getbyname"
});
},
},
fields: [
{
name: "cod",
title: "Code",
type: "text",
width: 30
},
{
name:"firstname",
title: "firstname",
type: "text",
width: 100
},
{
name: "date",
title: "Date",
type: "date",
myCustomProperty: "itemTemplate",
width: 30
}
],
rowClick: function (itemselected) {
var getdata = itemselected.item;
var fields = Object.keys(getdata);
var textarray = [];
$.each(fields, function (idx, value) {
textarray.push(getdata[value])
});
var url = '#Url.Action("index", "request")' + '/id=1?parCod='+ textarray[1];
window.location.href = url;
}
});
In my ajax sucess i am calling this funcction and there from response I am extracting the data which I need to load.
success: function(response){
StoreloadData(this,response);
},
In StoreloadData function i am trying to load data in my grid like this but not getting data.
StoreloadData(me,response){
var myGrid = Ext.getCmp('#myGrid');
var myGridStore = myGrid.getStore();
var gridData = response.myData.data;
var total = gridData[0].recordsCount;
myGridStore.load(gridData); // Not loading
myGridStore.loadData(gridData); // Not loading
myGrid.refresh(); // Error.
}
Here I have myJSon data in this line var gridData = response.myData.data; this is a simple json object like this.
[{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"},
{dataIndex1: "Value1",dataIndex2: "Value2"}]
Can anyone please suggest me how to overcome from this.
I suggest you this solution. Just define the empty store with fields definitions, then load data using Ext.JSON.decode() and store.loadData().
Working example:
File grid_json_load.json:
{
"data": [
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
},
{
"dataIndex1": "Value1",
"dataIndex2": "Value2"
}
],
"success": true
}
File grid_json_load.html:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css">
<script type="text/javascript" src="../ext/ext-all-debug.js"></script>
<script type="text/javascript">
Ext.define('Test.TestWindow', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.store = Ext.create('Ext.data.ArrayStore', {
data: [],
fields: [
{name: "dataIndex1", type: "string"},
{name: "dataIndex2", type: "string"}
]
});
me.grid = Ext.create('Ext.grid.Panel', {
autoScroll: true,
stripeRows: true,
width: 420,
height: 200,
store: me.store,
columnLines: false,
columns : [
{header : 'Data Index 1', width: 100, dataIndex : 'dataIndex1'},
{header : 'Data Index 2', width: 100, dataIndex : 'dataIndex2'}
]
});
me.add(me.grid);
}
});
Ext.onReady(function(){
var win = Ext.create('Test.TestWindow', {
});
Ext.Ajax.request({
url: 'grid_json_load.json',
method: 'POST',
timeout: 1200000,
params: {
},
success: function (response, opts) {
var win = new Test.TestWindow({
});
var r = Ext.JSON.decode(response.responseText);
if (r.success == true) {
win.show();
win.store.loadData(r.data);
} else {
Ext.Msg.alert('Attention', 'Error');
};
}
});
});
</script>
<title>Test</title>
</head>
<body>
</body>
</html>
Notes:
Tested with ExtJS 4.2 and ExtJS 6.6.
I am working on a CodeIgniter project. In the project I am using a JQgrid table. I want to display data using JQgrid. I get the data from a database, but I am not able to display the data in JQgrid, but I can display the data in a TextArea.
Model file
public function getmodeldata()
{
$query=$this->db->get('model');
$data = json_encode($query->result());
return $data;
}
Controller file
public function model()
{
$data['brand']=$this->Admin_model->getbranddata();
$data['getmodel']=$this->Admin_model->getmodeldata();
$this->load->view('layouts/header');
$this->load->view('Admin/model',$data);
$this->load->view('layouts/footer');
}
View file
<textarea id="data"><?php echo $getmodel?></textarea>
<script src="assets/js/jquery-2.1.4.min.js"></script>
<script src="assets/js/jquery.jqGrid.min.js"></script>
<script src="assets/js/grid.locale-en.js"></script>
<script type="text/javascript">
var grid_data = jQuery('#data').val();
var subgrid_data = [];
jQuery(function($) {
var grid_selector = "#grid-table";
var pager_selector = "#grid-pager";
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
})
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
//setTimeout is for webkit only to give time for DOM changes and then redraw!!!
setTimeout(function() {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}, 20);
}
})
jQuery(grid_selector).jqGrid({
subGrid : false,
subGridOptions : {
plusicon : "ace-icon fa fa-plus center bigger-110 blue",
minusicon : "ace-icon fa fa-minus center bigger-110 blue",
openicon : "ace-icon fa fa-chevron-right center orange"
},
subGridRowExpanded: function (subgridDivId, rowId) {
var subgridTableId = subgridDivId + "_t";
$("#" + subgridDivId).html("<table id='" + subgridTableId + "'></table>");
$("#" + subgridTableId).jqGrid({
datatype: 'local',
data: subgrid_data,
colNames: ['No','Item Name','Qty'],
colModel: [
{ name: 'id', width: 50 },
{ name: 'name', width: 150 },
{ name: 'qty', width: 50 }
]
});
},
data: grid_data,
datatype: "json",
height: 250,
colNames:['Action', 'ID','Name', 'Created Date'],
colModel:[
{name:'myac',index:'', width:80, fixed:true, sortable:false, resize:false,
formatter:'actions',
formatoptions:{
keys:true,
delOptions:{recreateForm: true, beforeShowForm:beforeDeleteCallback},
}
},
{name:'id',index:'id', width:60, sorttype:"int", editable: false},
{name:'model_name',index:'model_name', width:150,editable: true,editoptions:{size:"20",maxlength:"30"}},
{name:'created_at',index:'created_at', width:150, sortable:false,editable: false}
],
viewrecords : true,
rowNum:10,
rowList:[10,20,30],
pager : pager_selector,
altRows: true,
multiselect: true,
multiboxonly: true,
loadComplete : function() {
var table = this;
setTimeout(function(){
styleCheckbox(table);
updateActionIcons(table);
updatePagerIcons(table);
enableTooltips(table);
}, 0);
},
editurl: "./dummy.php",
caption: "jqGrid with inline editing"
});
$(window).triggerHandler('resize.jqGrid');//trigger window resize to make the grid get the correct size
</script>
If your data comes as json string like you do, you will need to replace
data: grid_data,
datatype: "json",
with
datastr: grid_data,
datatype: "jsonstring",
I wrote my Ajax in init component and I am getting all the require data in this.store.
But I am not getting scope of store in grid where i defined. Since I am closing the bracket of Ajax Success I am not. what is the correct way to do.
My Code is :
initComponent: function() {
this.fields = [];
this.columns = [];
this.data = [];
this.store = [];
Ext.Ajax.request({
url: 'XML/1Cohart.xml',
scope: this,
timeout: global_constants.TIMEOUT,
method: "GET",
disableCaching: true,
failure: function(response) {
utils.showOKErrorMsg(sdisMsg.ajaxRequestFailed);
},
success: function(response) {
var datas = response.responseXML;
Ext.each(datas.getElementsByTagName("HEADER"), function(header) {
this.buildField(header);
this.buildColumn(header);
}, this);
Ext.each(datas.getElementsByTagName("G"), function (columnData) {
this.buildData(columnData);
this.fieldLength = this.fields.length;
this.record = [];
for (i = 0; i < this.fieldLength; i++) {
//debugger;
var fieldName = this.fields[i].name
this.record[i] = columnData.getAttribute(fieldName);
}
this.data.push(this.record);
}, this);
this.store = new Ext.data.ArrayStore({
fields : this.fields
});
this.store.loadData(this.data); // Getting correct data in this.store
},
});
In same init component in east panel i defined grid. for which column is coming but store is not getting.
Grid code is
{
xtype: 'panel',
region: "east",
header: true,
collapsible: true,
autoScroll: true,
//columnWidth: 0.5,
width: "30%",
hideBorders: true,
split: true,
items: [{
xtype: 'panel',
title: "Search Result",
height:500,
items: [{
xtype: 'grid',
itemid: 'ABC_GRID',
store : this.store,
autoHeight: true,
sm: new Ext.grid.CheckboxSelectionModel({singleSelect:true}),
frame: true,
columns : this.columns,
}]
}]
After loading the data in this.store get the grid and reconfigure its store
Ext.ComponentQuery.query("#ABC_GRID")[0].reconfigure(this.store);
For ExtJs 3
We need use Ext.getCmp() as Ext.ComponentQuery.query is not supported. Need to define id property of grid as id:ABC_GRID.
Ext.getCmp("ABC_GRID").reconfigure(this.store)
Rather than calling This.store you can call grid.getview().getStore(), you will get the store of the grid where you want to load the data.
I want to read json data in extjs here is my code below.
What i'm doing wrong ? I'm pretty new at Extjs.
I think i couldn't get the json value, or couldn't properly write it down on panel.
Thanks in advance.
Ext.require([ 'Ext.grid.*', 'Ext.data.*', 'Ext.dd.*' ]);
var urlGetName = '${ctx}/main/list';
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ]
});
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad : false,
proxy : {
type : 'ajax',
actionMethods: {
read: 'GET'
},
reader : {
type : 'json',
root: 'data',
},
api : {
read: urlGetName
}
},listeners: {
load: function(store, records) {
dataa =store.getAt(0).get('data');
}
}
});
Ext.onReady(function() {
var firstGridStore = Ext.create('Ext.data.Store', {
model : 'DataObject',
data : dataa
});
var columns = [ {
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
} ];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : firstGridStore,
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});
You shouldn't use two stores to fill the one with the other. Delete the FirstGridStore and use the predefined remote store instead:
// Model
Ext.define('DataObject', {
extend : 'Ext.data.Model',
fields : [ 'name' ],
idProperty: 'name'
});
// Store
var storeName = Ext.create('Ext.data.Store',{
model:'DataObject',
autoLoad: true,
queryMode: local,
proxy: {
type: 'ajax',
actionMethods: {
read: 'GET'
},
reader: {
type : 'json',
root: 'data',
},
api: {
read: urlGetName
}
}
});
// Grid
var columns = [{
text : "Name",
flex : 1,
sortable : true,
dataIndex : 'name'
}];
// declare the source Grid
var firstGrid = Ext.create('Ext.grid.Panel', {
multiSelect : true,
viewConfig : {
plugins : {
ptype : 'gridviewdragdrop',
dragGroup : 'firstGridDDGroup',
dropGroup : 'secondGridDDGroup'
},
listeners : {
drop : function(node, data, dropRec, dropPosition) {
var urlL = '${ctx}/main/list';
var param = data;
postDataAsParamsINN({param:param},urlL,function(resp){
var success=resp.success;
if(success){
Ext.MessageBox.alert('succes', 'bravaa');
}else{
Ext.MessageBox.alert('error','eroross' );
}
});
}
}
},
store : storeName, // defined store
columns : columns,
stripeRows : true,
title : 'First Grid',
margins : '0 2 0 0'
});
});