I am new in Extjs 6 but I want to pass parameter to php when grid row is clicked. Here is my code and its is complaining on php that the parameter is undefined. Please assist...
xtype: 'grid',
store: {
type: 'myComment',
autoLoad: true,
autoDestroy: true,
extraParams:{
employee: record.get("employee")
}
},
columns: [
....
]
Please help I've been working on this one for days
extraParams belong to the proxy configuration from your store.
In your case you should do something like this:
{
xtype: 'grid',
store: {
type: 'myComment',
autoLoad: true,
autoDestroy: true,
proxy: {
type: 'ajax',
extraParams:{
employee: record.get("employee")
}
}
},
columns: [....]
}
Here are some more informationen on this:
http://docs.sencha.com/extjs/6.5.0/classic/Ext.data.proxy.Ajax.html#cfg-extraParams
Since you are using ExtJs 6, it is recommended to use the MVVM architecture.
If you do not already know, I would recommend following instructions from Sencha:
http://docs.sencha.com/extjs/6.5.0/guides/application_architecture/application_architecture.html
In your case you can separate the definition of the store from the view. Furthermore it would then be possible to change simple parameters in the view or also in the store using binding.
Related
I have a Hotel Model, which hasMany Guests, which in turn has two dynamic attributes as follows.
public function getNameAttribute(){
return $this->user->name;
}
public function getEmailAttribute(){
return $this->user->email;
}
Now I prefer to fetch them as $hotel->guests()->with('user'). Now when I use it for Datatable, I am not able to get the name & email in the view, for obvious reasons. So my question is, Can I eager-load the name & email attributes, so that whenever the guest model gets fetched, the said attributes are available.
Please note, I don't return it asArray or asJson, hence the concept of $attributes array doesn't apply (at-least as far as I know).
The Controller has the following code:
return Datatables::of($guests)
->addColumn('email',function($guest){
return $guest->email;
})
->addColumn('name',function($guest){
return $guest->name;
})->make(true);
However, the datatable cannot search for name or email because they are not available in database.
The jquery datatable code I use is
$(function() {
$('#guest-table').DataTable({
processing: true,
serverSide: true,
ajax: '{!! route('guests.data') !!}',
columns: [
{ data: 'name', name: 'name', orderable: false },
{ data: 'email', name: 'email', orderable: false},
{ data: 'mobile', name: 'mobile', orderable: false}
]
});
});
I use Laravel 5 and yajra/laravel-datatables package
as per the Yajra, Laravel document, you have to call the property of the related model in this way,
{data: 'relation_name.column', name: 'relationName.column'}
so in your case it will be like this,
{data: 'user.name', name: 'user.name'}
{data: 'user.email', name: 'user.email'}
User double quotes here, I will work if this code is inside blade file
ajax: "{!! route('guests.data') !!}",
If you have external js file then use like this
Create a hidden field in blade file
<input type="hidden" id="route_url" value="{!! route('guests.data') !!}">
And in js file take route url by id
ajax: $("#route_url").val(),
I am building a small application. I have a PHP code which inside has a creation of jqGrid and also I have a servlet which sends a string of an array with JSONs inside.
The string looks like this:
[
{"id":1,"firstName":"Amishay","lastName":"Vaturi"},
{"id":2,"firstName":"Amir","lastName":"Bilu"},
{"id":3,"firstName":"Michael","lastName":"Keidar"},
{"id":4,"firstName":"Mika","lastName":"Spivak"},
{"id":5,"firstName":"Ksenia","lastName":"Mosorov"},
{"id":6,"firstName":"Rose","lastName":"Wahlem"}
]
The problem is I don't see it in the grid I made...
the grid code is this :
$("#jqGrid").jqGrid({
url: 'http://10.0.0.4:8080/api/students/all',
mtype: "GET",
datatype: "jsonstring",
colModel: [
{ label: 'ID', name: 'id', key: true, width: 75 , height: 50 },
{ label: 'First Name', name: 'firstName', width: 150 , height: 50},
{ label: 'Last Name', name: 'lastName', width: 150 , height: 50}
],
viewrecords: true,
width: 780,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
I looked here and in the entire net to search for an answer.
I saw I might need to send a different json from the server. perhaps with more info such as records,number of page etc. I also saw I might need to declare a json reader in the jqGrid properties.
I did both.. still didn't work. It's like I didn't find a solution which meets my problem in a 100%.
I will be very happy to get an answer which works (:
Thanks a lot!
The error in your code is the usage of datatype: "jsonstring" instead of
datatype: "json"
By the way you don't need to create hidden column id, because jqGrid assign the value of id property to id attribute of rows (<tr> elements). Additionally I would recommend you to use loadonce: true option, because the format of data which you use don't means server side paging.
I create the demo https://jsfiddle.net/OlegKi/oc7uuh9q/, which used your data to demonstrate that all should work. I just modified your code a little to use new features implemented in free jqGrid, the fork of jqGrid, which I develop.
I have a page containing a ExtJS 4.2.2 dataStore and gridPanel showing items created using information from various tables in a MySQL database.
The purpose of the generated grid is to provide a "confirmation" to the user before any information is actually generated in the database in a table separate to those that originated the initial information, as some items can be flagged to be imported; unflagged items are not imported. The page uses HTML, PHP (with CodeIgniter MVC framework) and ExtJS (which implies Javascript and JQuery).
With my current understanding of ExtJS, I would perform the necessary database insert or update by:
Saving all the changes in the grid to the store
Packaging the store's data into a multidimensional array, which is then assigned into a POST variable in some similar manner to a form
Perform a POST to the same page, picking up the POST variable
Loop through the POST information, passing each row's data to the model to perform the SQL query and INSERT/UPDATE as necessary.
I'm thinking this is a long-winded and most likely inefficient method for doing this; having previously worked with Kendo UI, I would have thought there is some form of "save" action on the store that simply calls a controller/model function that would act on the data in fewer steps.
Having looked at Ext.data.Store's numerous potential candidates (the commitChanges method, update event, the write event, store.sync etc.), I have to say I'm completely bewildered by how I could perform the kind of action I'm thinking of; I need to write the information to a table separate from those that generated the initial information, and none of the above seem to do that.
I would appreciate a "simple words" play-by-play of how to get the "dirty" data from the grid saved to the store, then the store data being passed to a MVC Controller-then-Model function that allows for update/insert to the DB (if that is the best way to do this) - I also appreciate that I will have to modify aspects of my ExtJS code, but what about my current setup isn't helping, if anything?
ExtJS code below renders the grid with data, and not much else:
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '../ux');
Ext.require([
'Ext.ux.CheckColumn'
]);
Ext.onReady(function(){
Ext.define('ConfirmationModel', {
extend: 'Ext.data.Model',
fields: [
'GroupName', // generated if not a member of a group, will eventually be retrieved if already existing in group by checking import table for JobNo, ItemNo and ItemTypeId
'ItemType',
'ItemTypeId',
'JobNo',
'ItemNo',
'ThicknessDepth',
'Cutter',
'CutterId',
'Source',
'Qty',
'Material',
'MaterialId',
'Type',
'TypeId',
'Work',
'WorkId',
'PaintInternal',
'PaintExternal',
'Notes',
'Documented',
'ImportDate', // fetched by checking import table for jobNo, itemNo and itemTypeId
'ImportCheck' // usually automatically checked if not yet imported
]
});
confirmationStore = Ext.create('Ext.data.Store',{
model: 'ConfirmationModel',
autoLoad: true,
proxy: {
// load using HTTP
type: 'ajax',
url: '<?= $site_url ?>Production/ConfirmationJSON/<?php echo $job_no ?>', // currently pulls all the information from three separate tables, pushes to object arrays then converts to and returns as JSON; will also check import table for existing entries as further work
pageParam: false, //to remove param "page"
startParam: false, //to remove param "start"
limitParam: false, //to remove param "limit"
noCache: false, //to remove param "_dc"
reader: {
type: 'json',
model: 'ConfirmationModel'
}
},
groupField: 'GroupName'
});
confirmationGrid = Ext.create('Ext.grid.Panel', {
width: 1200,
store: confirmationStore,
title: 'Import Confirmation',
tbar: [
{
xtype: 'button',
text: 'Update',
handler: function(){
// function to handle the save/update of information goes here?
document.location.href = '<?php echo site_url() ?>Production/Schedule'; // redirect to next page in steps
}
},
{
xtype: 'button',
text: 'Cancel',
handler: function(){
window.history.back();
}
}
],
columns: [
{ text: 'Item<br />No.', width:50, dataIndex: 'ItemNo' },
{ text: 'Job<br />No.', width: 65, dataIndex: 'JobNo' },
{ text: 'Item Type', width: 70, dataIndex: 'ItemType' },
{ text: 'Thickness<br />Depth', width: 65, dataIndex: 'ThicknessDepth' },
{ text: 'Cutter', width: 65, dataIndex: 'Cutter' },
{ text: 'Source', width: 65, dataIndex: 'Source' },
{ text: 'Qty', width: 40, dataIndex: 'Qty' },
{ text: 'Material', flex: 1, dataIndex: 'Material' },
{ text: 'Type', flex: 2, dataIndex: 'Type' },
{ text: 'Work', flex: 2, dataIndex: 'Work' },
{ text: 'Paint - Internal', flex: 2, dataIndex: 'PaintInternal' },
{ text: 'Paint - External', flex: 2, dataIndex: 'PaintExternal' },
{ text: 'Notes', flex: 2, dataIndex: 'Notes' },
{ text: 'Documented?', width: 75, dataIndex: 'Documented' },
{ text: 'Import<br />Date', width: 60, dataIndex: 'ImportDate' },
{
xtype: 'checkcolumn',
sortable: false,
header: 'Import?',
width: 50,
dataIndex:'ImportCheck'
}
],
features: [{
id: 'group',
ftype: 'groupingsummary',
groupHeaderTpl: '{name}',
enableGroupingMenu: false
}],
renderTo: Ext.get('sencha_confirmation')
});
});
There's no need to save data from the grid to the store, since the content you're seeing in the grid is there because it is already in the store (given that the store is the data provider for the grid).
To send the data in this format, you simply need to configure your proxy's writer's allowSingle: false. This will force the proxy to send through the records it is persisting as an array always, even if there is only one record.
Example:
proxy: {
writer: {
allowSingle: false
},
...
}
This can be accomplished by calling sync() on your store. Sync will automatically create a request to the url specified on your proxy, and will batch together new records, updated records, and deleted records. You can call this manually, or add autoSync: true to your store (I prefer controlling when it's called, but that's up to you).
Re: the MVC side of things, that's dependent on how your application is structured. For example, if you have a "save" button on the grid, you could bind to the button's click event, and in your controller listen for this click event and call your store's sync() method there. Of course, this is just an example: there are an number of events/conditions you could respond to and do the same thing.
I have this simple code:
var store = {
"(name)": "My Object",
"Created": Ext.Date.parse('10/15/2006', 'm/d/Y'),
"Available": false,
"Version": 0.01,
"Description": "A test object"
}
Ext.create('Ext.grid.property.Grid', {
title: 'Properties Grid',
width: 300,
renderTo: Ext.getBody(),
source: store,
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
ui: 'footer',
items: ['->', {
//iconCls: 'icon-save',
text: 'Sync',
scope: this,
// handler: this.onSync
}]
}]
});
The panel looks like this:
My app uses similar grid, the only difference is that the store variable is created dynamically (but has similar structure) and I also have a sync button that should save any changes to the grid's value field.
As of now, value field can be edited but not saved anywhere of course. I have been trying to add an event on sync button click, that would get all the rows from value and update the database.
Can anyone tell me step-by-step what to add in property.Grid's code, so that when I click sync
it would send all the values via AJAX to my php file, that would do the sync with database?
Thanks
Something like this should do the trick:
{
text: 'Sync',
handler: function() {
// get values
var gridvalues = this.up( 'propertygrid' ).getSource();
// send AJAX request
Ext.Ajax.request({
url: 'somephpurl...',
params: gridvalues
});
}
}
The docs, BTW, for these are as follows:
Get property grid values: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.grid.property.Grid-method-getSource
Create AJAX request: http://docs.sencha.com/extjs/4.2.1/#!/api/Ext.Ajax-method-request
I have one question about passing strings from one Ext.formPanel textfield to another part of the code. The thing is that I have two "textfield" in the formPanel and I want the words I enter there as part of the "url" I have in the code. Probably you may ask, why does this guy want that?? this is because the "url" I'm using has a PHP script that generates features stored in a postgis db table as GeoJSON.
This the code:
[CODE]
// define the data source
var protocol = new OpenLayers.Protocol.HTTP({
url: "http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom¶meters=" + "column" + ilike '%"string"%',
format: new OpenLayers.Format.GeoJSON({
ignoreExtraDims: true,
'internalProjection': new OpenLayers.Projection("EPSG:900913"),
'externalProjection': new OpenLayers.Projection("EPSG:4326")
})
});
formPanel = new GeoExt.form.FormPanel({
title: "Place Name Search",
height: 150,
region: "north",
protocol: protocol,
items: [{
xtype: "textfield",
id: "column",
emptyText: "Choose table column",
fieldLabel: "Choose table column",
width: 200,
allowBlank: false
}, {
xtype: "textfield",
id: "string",
emptyText: "Search inside table",
fieldLabel: "Enter a word to search",
width: 200,
allowBlank: false
}],
listeners: {
actioncomplete: function(form, action) {
features = action.response.features;
store.loadData(features);
vm=map.getLayersByName("Results");
if(vm.length===0){
vecLayer = new OpenLayers.Layer.Vector("Results");
map.addLayer(vecLayer);
store.bind(vecLayer);
select.bind(vecLayer);
}
}
},
buttons: [{text: 'search',
handler: function(){
formPanel.search();
}
}],
keys: [{ key: [Ext.EventObject.ENTER],
handler: function() {
formPanel.search();
}
}]
});
[/CODE]
These are the cases I already tested:
url: http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom: this generates the whole table "boreholes_point_wgs84" as GeoJSON.
url: http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom¶meters=station ilike '%llena%': this generates only one feature, the feature that has "llena" in the "station" column. So, in this way I can find the feature through the search form.
What I was thinking is if I can pass these two strings I enter in "textfield" and modify the "url" in the way that it can catch these two words and form, for example, the second case I put above. I was playing with this:
url: http://localhost/postgis_geojson.php?geotable=boreholes_point_wgs84&geomfield=geom¶meters=" + "column" + ilike '%"string"%', so using the "id" I specified below each xtype, but it doesn't work.
I appreciate any support on this, thanks in advance,
Best regards,
Gery
The correct way to this is a simple form submission. The text input values will be sent to the server in a form post. Server side should parse the submitted values and do what's necessary. This isn't any different from the use of plain HTML and any server side frameworks.
Alternatively you can force your form to submit using HTTP GET method instead of POST and then your input values will be part of your URL. In ExtJS you use 'method' config. See API docs: http://docs.sencha.com/ext-js/4-1/#!/api/Ext.form.Basic-cfg-method
EDIT: if you are not at all interested in actually 'submitting' the form you can get your field values like this: form.findField('myField').value
I'm pretty sure that this solution will help to understand how to solve this problem, I solved myself.