Extjs 3.3 grid paging - javascript

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

How to change the format of a date field in a jsgrid table

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;
}
});

How to load grid data with json data on ajax sucess

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.

display dynamic data in JQgrid in Codeigniter

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",

How to get scope of store in grid

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.

Couldnt read and set Json data with extjs4

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'
});
});

Categories

Resources