I am having a problem get mediasoup_v3_example working.
I have created a remote server and deploy the code. From the terminal everything looks fine and I can see the clients connecting. I can load up the "html" pages and start the media, I'm able to hit publish but whenever people subscribed they only received an empty box.
Im testing with A Ubuntu laptop, a Macbook and an Android phone.
Here is the output from only trying to run the broadcast example
$ node mediasoup_v3_broadcast.js
socket.io server start. port=443
Web server start. https://178.128.128.151:443/
client connected. socket id=4LBBs9SvfrcviWiwAAAA , total clients=1
-- mediasoup worker start. --
client connected. socket id=9qXXNU8yctWouTFGAAAB , total clients=2
getRouterRtpCapabilities: {
codecs: [
{
kind: 'audio',
mimeType: 'audio/opus',
clockRate: 48000,
channels: 2,
preferredPayloadType: 100,
parameters: {},
rtcpFeedback: []
},
{
kind: 'video',
mimeType: 'video/VP8',
clockRate: 90000,
rtcpFeedback: [Array],
preferredPayloadType: 101,
parameters: [Object]
},
{
kind: 'video',
mimeType: 'video/rtx',
preferredPayloadType: 102,
clockRate: 90000,
rtcpFeedback: [],
parameters: [Object]
}
],
headerExtensions: [
{
kind: 'audio',
uri: 'urn:ietf:params:rtp-hdrext:sdes:mid',
preferredId: 1,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:mid',
preferredId: 1,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id',
preferredId: 2,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id',
preferredId: 3,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'audio',
uri: 'http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time',
preferredId: 4,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time',
preferredId: 4,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'audio',
uri: 'http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01',
preferredId: 5,
preferredEncrypt: false,
direction: 'inactive'
},
{
kind: 'video',
uri: 'http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01',
preferredId: 5,
preferredEncrypt: false,
direction: 'inactive'
},
{
kind: 'video',
uri: 'http://tools.ietf.org/html/draft-ietf-avtext-framemarking-07',
preferredId: 6,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:framemarking',
preferredId: 7,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'audio',
uri: 'urn:ietf:params:rtp-hdrext:ssrc-audio-level',
preferredId: 10,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:3gpp:video-orientation',
preferredId: 11,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:toffset',
preferredId: 12,
preferredEncrypt: false,
direction: 'sendrecv'
}
],
fecMechanisms: []
}
-- createProducerTransport ---
-- create transport id=ceefb300-f62f-4c81-8420-a3ed26f4368f
-- produce --- kind= video
--broadcast newProducer -- kind= video
-- produce --- kind= audio
--broadcast newProducer -- kind= audio
client connected. socket id=IQUc9QQR6WNRghJFAAAC , total clients=3
getRouterRtpCapabilities: {
codecs: [
{
kind: 'audio',
mimeType: 'audio/opus',
clockRate: 48000,
channels: 2,
preferredPayloadType: 100,
parameters: {},
rtcpFeedback: []
},
{
kind: 'video',
mimeType: 'video/VP8',
clockRate: 90000,
rtcpFeedback: [Array],
preferredPayloadType: 101,
parameters: [Object]
},
{
kind: 'video',
mimeType: 'video/rtx',
preferredPayloadType: 102,
clockRate: 90000,
rtcpFeedback: [],
parameters: [Object]
}
],
headerExtensions: [
{
kind: 'audio',
uri: 'urn:ietf:params:rtp-hdrext:sdes:mid',
preferredId: 1,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:mid',
preferredId: 1,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:rtp-stream-id',
preferredId: 2,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:sdes:repaired-rtp-stream-id',
preferredId: 3,
preferredEncrypt: false,
direction: 'recvonly'
},
{
kind: 'audio',
uri: 'http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time',
preferredId: 4,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'http://www.webrtc.org/experiments/rtp-hdrext/abs-send-time',
preferredId: 4,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'audio',
uri: 'http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01',
preferredId: 5,
preferredEncrypt: false,
direction: 'inactive'
},
{
kind: 'video',
uri: 'http://www.ietf.org/id/draft-holmer-rmcat-transport-wide-cc-extensions-01',
preferredId: 5,
preferredEncrypt: false,
direction: 'inactive'
},
{
kind: 'video',
uri: 'http://tools.ietf.org/html/draft-ietf-avtext-framemarking-07',
preferredId: 6,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:framemarking',
preferredId: 7,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'audio',
uri: 'urn:ietf:params:rtp-hdrext:ssrc-audio-level',
preferredId: 10,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:3gpp:video-orientation',
preferredId: 11,
preferredEncrypt: false,
direction: 'sendrecv'
},
{
kind: 'video',
uri: 'urn:ietf:params:rtp-hdrext:toffset',
preferredId: 12,
preferredEncrypt: false,
direction: 'sendrecv'
}
],
fecMechanisms: []
}
-- createConsumerTransport ---
-- create transport id=0b864841-16bf-41dd-b2e5-d18c1798a167
consumerTransports count=1
-- consume --kind=video
videoConsumers count=1
-- consumer ready ---
-- connectConsumerTransport ---
-- resume -- kind=video
-- consume --kind=audio
audioConsumers count=1
-- consumer ready ---
Here is the client console
=== ready ===
subscribe.html:65 socket.io connected()
subscribe.html:75 socket.io message: {type: "welcome", id: "G2flbGkugzd7U6CJAAAH"}
subscribe.html:82 connected to server. clientId=G2flbGkugzd7U6CJAAAH
subscribe.html:265 getRouterRtpCapabilities: {codecs: Array(3), headerExtensions: Array(13), fecMechanisms: Array(0)}
subscribe.html:272 --- createConsumerTransport --
subscribe.html:274 transport params: {id: "f059ade3-782b-4025-864b-9ffce694634b", iceParameters: {…}, iceCandidates: Array(2), dtlsParameters: {…}}
subscribe.html:276 createConsumerTransport: Transport {_events: {…}, _eventsCount: 0, _maxListeners: Infinity, _logger: Logger, _id: "f059ade3-782b-4025-864b-9ffce694634b", …}
subscribe.html:383 --start of consume --kind=video
subscribe.html:290 --consumer trasnport connect
subscribe.html:301 subscribing...
subscribe.html:411 --end of consume
subscribe.html:327 -- track exist, consumer ready. kind=video
subscribe.html:330 -- resume kind=video
subscribe.html:383 --start of consume --kind=audio
subscribe.html:333 resume OK
subscribe.html:411 --end of consume
subscribe.html:327 -- track exist, consumer ready. kind=audio
subscribe.html:342 -- do not resume kind=audio
subscribe.html:309 failed
I have also changed the top of the server file to
const fs = require('fs');
let serverOptions = {
hostName: "178.128.128.151",
listenPort: 443,
useHttps: true,
httpsKeyFile:"../MyKeyFile",
httpsCertFile:"../MyCertFile",
};
let sslOptions = {};
if (serverOptions.useHttps) {
sslOptions.key = fs.readFileSync(serverOptions.httpsKeyFile).toString();
sslOptions.cert = fs.readFileSync(serverOptions.httpsCertFile).toString();
}
Thanks for any help/ideas
Related
I'm trying to add geoJSON points to my ReactMapGL but it doesn't seem to be rendering...there aren't any errors from console either
my code is as follows
const Map = ({ question, updateCurrent }) => {
const [viewport, setViewport] = useState({
width: 400,
height: 400,
latitude: -41.189,
longitude: 175.309,
zoom: 4.49,
})
const mapData = {
features: [
{
type: 'Feature',
properties: {
name: 'Canterbury',
},
geometry: {
coordinates: [172.479644, -43.475418],
type: 'Point',
},
id: '28682b312c41375af64f65b452c4c32c',
},
{
type: 'Feature',
properties: {
name: 'Southland',
},
geometry: {
coordinates: [167.905597, -45.838703],
type: 'Point',
},
id: '317db867d0fc3c2f629cf4cea1df3077',
},
{
type: 'Feature',
properties: {
name: 'Gisborne',
},
geometry: {
coordinates: [177.926385, -38.53651],
type: 'Point',
},
id: '3b30468c228e2ee576cc1943f86dfe75',
},
{
type: 'Feature',
properties: {
name: 'Manawatu - Wanganui',
},
geometry: {
coordinates: [175.434562, -39.524608],
type: 'Point',
},
id: '79df70a0e4371c7eb0d7db4db9a86b06',
},
{
type: 'Feature',
properties: {
name: 'West Coast',
},
geometry: {
coordinates: [172.185093, -41.514477],
type: 'Point',
},
id: '7f471be1cdfe51a2b5d7ca0c5c826c64',
},
{
type: 'Feature',
properties: {
name: 'Nelson / Tasman / Marlborough',
},
geometry: {
coordinates: [172.981906, -41.267511],
type: 'Point',
},
id: '806c715276e1ef82edd796e5934f8e4a',
},
{
type: 'Feature',
properties: {
name: 'Wellington - Wairarapa',
},
geometry: {
coordinates: [175.486838, -41.197457],
type: 'Point',
},
id: '9768592cef2eee2dc7f6e874e1944084',
},
],
type: 'FeatureCollection',
}
return (
<Container>
<ReactMapGL
{...viewport}
width="80vw"
height="70vh"
mapStyle="mapbox://styles/mapbox/light-v9"
onViewportChange={nextViewport => setViewport(nextViewport)}
mapboxApiAccessToken={MAPBOX_TOKEN}
>
<Source id="New Zealand" type="geojson" data={mapData} />
<Layer
id="anything"
type="fill"
source="New Zealand"
paint={{ 'fill-color': '#228b22', 'fill-opacity': 0.4 }}
/>
</ReactMapGL>
</Container>
)
}
My current output is
And my expected output is this (From mapbox Studio)
Could someone help me out please? I can't seem to find too much info about this
Your source data consists of only points yet in your Layer you've set type="fill". Fill type only applies to polygons not points or lines. You'll want to add either a circle or symbol layer instead for points.
var landcoverLayer = new ol.layer.Tile({
id: 'landcover',
title: 'Landcover 2010',
visible: false,
legendPath:'nepal:Landcover',
source: new ol.source.TileWMS({
url: 'http://db2map.gistemp.com/geoserver/gwc/service/wms',
hidpi: false,
params: { 'VERSION': '1.1.1', 'LAYERS': 'nepal:Landcover' },
serverType: 'geoserver'
})
});
I guess you are requesting GetLegendGraphic from Geoserver. The request is like below:
var landcoverLayer = new ol.layer.Tile({
id: 'landcover',
title: 'Landcover 2010',
visible: false,
legendPath:'http://db2map.gistemp.com/geoserver/gwc/service/wms?REQUEST=GetLegendGraphic&VERSION=1.0.0&FORMAT=image/png&WIDTH=20&HEIGHT=20&LAYER=nepal:Landcover',
source: new ol.source.TileWMS({
url: 'http://db2map.gistemp.com/geoserver/gwc/service/wms',
hidpi: false,
params: { 'VERSION': '1.1.1', 'LAYERS': 'nepal:Landcover' },
serverType: 'geoserver'
})
});
Here is the reference in Geoserver docs:
http://docs.geoserver.org/latest/en/user/services/wms/get_legend_graphic/index.html
To Start, here is my ComboBoxItem field
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
I'm getting very different behavior out of a ComboBoxItem when it is in a ListGrid vs when it's in a DynamicForm.
In a DynamicForm if you were to type in a value that does NOT have a match in the valueMap and then leave the field, it would return to the previous value.
In an editable ListGrid if you were to type in a value that does NOT have a match in the valueMap and then leave the field, it would keep what ever characters you typed and try to save the edits with that string.
Walkthrough
The code used in the walkthrough
isc.VLayout.create({
height: 500,
width: 900,
margin: 100,
members: [
isc.ListGrid.create({
height: "100%",
width: "100%",
canEdit: true,
modalEditing: true,
extraSpace: 5,
fields: [
{ name: "Name", canEdit: true, },
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
//allowEmptyValue: false,
completeOnTab: true
}
],
data: [
{ Name: "Evan", State: "WI" },
{ Name: "Erik", State: "IL" },
{ Name: "Philip", State: "MI" },
]
}),
isc.DynamicForm.create({
height: "100%",
width: "100%",
border: "1px solid #ababab",
canEdit: true,
fields: [
{ name: "Name", canEdit: true, },
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
],
values: { Name: "Evan", State: "WI" }
})
]
});
It would appear that addUnknownValues has a different effect on the two instances.
I solved the issue by moving addUnknownValues to the ListGridField's editorProperties
this is the updated ListGridField item
{
name: "State",
type: "ComboBoxItem",
canEdit: true,
valueMap: {
WI: "Wisconsin",
IL: "Illinois",
MN: "Minnesota",
MI: "Michigan"
},
editorProperties:{
addUnknownValues: false,
allowEmptyValue: false,
completeOnTab: true
}
}
As you might notice, I'm a newbie in extjs; I have managed to do some stuff myself but the truth is that I don't understand certain things.
I have this tree on the left side, and a content panel with a tab panel on the right side. Basically what I want is to load different options (calling different components) on the tab panel when the user clicks on the tree on the left side. Right now, when the user clicks on the first of the options, it displays the components that are related to that option on the content panel. (I'm sure is not the most elegant way of showing this, but at least for now it works) however, my problem is the fact that the components doesn't seem to load in the right tab, once it loads, even if I change tabs the components stay in the same place.
I have tried using the rbac.tabs.doLayout(); after reading some topics here in the forum, with no success.
I really appreciate the help you guys can give me so i can point in the right direction.
Here is my code:
rbac.userPanel = Ext.create('role.formUserRbac');
rbac.grid = Ext.create('role.gridUserRbac');
rbac.tabsShowPanel = Ext.define('mainPanel',{
extend:'Ext.panel.Panel',
border:'false',
initComponent: function() {
this.callParent();
},
items:[rbac.userPanel,rbac.grid]
});
tabsShowPanel = Ext.create('rbac.tabsShowPanel');
function test(nameTab,des){
rbac.addTab(true,nameTab);
console.log(des);
if (des=='users'){
//console.log(rbac.tabs.addDocked(rbac.testPanel));
rbac.tabs.addDocked(tabsShowPanel)
}
}
Ext.define('treeModel', {
extend: 'Ext.data.Model',
fields: [
{mapping: 'id', name: 'id', type: 'string'},
{mapping: 'text', name: 'text', type: 'string'},
{mapping: 'descripcion', name: 'descripcion', type: 'string'},
]
})
rbac.TreeStore = Ext.create('Ext.data.TreeStore', {
proxy: {
type: 'ajax',
url: 'service.php',
extraParams: {
accion:'loadtree'
},
reader: {
type: 'json',
root: 'nodes',
}
},
autoLoad:true,
sorters: [{
property: 'id',
direction: 'ASC'
},{
property: 'id',
direction: 'ASC'
}],
root: {
id: 0,
expanded: true
},
model:'treeModel'
});
rbac.treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Navegaci\u00f3n',
region:'west',
split: true,
height: 360,
width: 180,
minSize: 150,
rootVisible: false,
autoScroll: true,
collapsible: true,
collapseMode: 'mini',
store: rbac.TreeStore
});
var currentItem;
rbac.tabs = Ext.create('Ext.tab.Panel', {
resizeTabs: true,
enableTabScroll: true,
defaults: {
autoScroll:true,
bodyPadding: 10
},
items: [{
title: 'Men\u00FA Principal',
iconCls: 'tabs',
closable: false
}]
});
rbac.addTab = function (closable,tabName) {
rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
}).show();
//rbac.tabs.doLayout();
}
rbac.treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
var des = record.data.descripcion;
var nameTab = record.data.text;
test(nameTab,des);
}
});
rbac.contentPanel = {
id: 'content-panel',
region: 'center',
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: [rbac.tabs],
};
rbac.panel = Ext.create('Ext.Viewport', {
layout: 'border',
title: 'Ext Layout Browser',
items: [{
xtype: 'box',
id: 'header',
region: 'north',
html: '<img src="images/test.png"/>',
height: 70
},{
layout: 'border',
id: 'layout-browser',
region:'center',
border: false,
split:true,
margins: '2 0 5 5',
width: 275,
minSize: 100,
maxSize: 500,
items: [rbac.treePanel, rbac.contentPanel]
}],
renderTo: Ext.getBody()
});
Solved:
rbac.addTab = function (closable,tabName) {
return rbac.tabs.add({
title: tabName,
iconCls: 'tabs',
closable: !!closable
});
}
function test(nameTab,des){
var newTab = rbac.addTab(true,nameTab);
rbac.tabs.setActiveTab(newTab);
if (des=='users'){
newTab.add(tabsShowPanel)
}
}
I'm trying to update my store and then database after using cellediting and a combobox in a gridpanel to update a record. The update operation.action in the ajax proxy is firing correctly, it just that the store and the grid aren't syncronizing, and the post tab in firebug says my json looks like this: 'data []'. How do I get the store record to create the json and update the record? Thanks for looking at this in advance...
Ext.Loader.setConfig({
enabled: true
});
Ext.Loader.setPath('Ext.ux', '/extjs4/examples/ux');
Ext.require([
'Ext.layout.container.Fit',
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.panel.*',
'Ext.selection.CellModel',
'Ext.state.*',
'Ext.form.*',
'Ext.ux.CheckColumn']);
Ext.define('Ext.app.HirePlanGrid', {
extend: 'Ext.panel.Panel',
alias: 'widget.hirePlangrid',
hireplanstoreId: 'hireplanstore',
hiremonthstoreId: 'hiremonthstore'
,
renderMonth: function (value, p, record) {
var fkStore = Ext.getStore(this.up('hirePlangrid').hiremonthstoreId);
var rec = fkStore.findRecord("MONTH_ID", value);
//return rec.get("ABBREVIATED_MONTH");
}
,
initComponent: function () {
var rIdx = '';
var cIdx = '';
this.editing = Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 1,
listeners: {
'beforeedit': function (e) {
var me = this;
var allowed = !! me.isEditAllowed;
if (!me.isEditAllowed) Ext.Msg.confirm('confirm', 'Are you sure?', function (btn) {
if (btn !== 'yes') return;
me.isEditAllowed = true;
me.startEditByPosition({
row: e.rowIdx,
column: e.colIdx
});
});
rIdx = e.rowIdx;
cIdx = e.colIdx;
// alert('rIdx= ' + rIdx + ' cIdx = ' + cIdx);
return allowed;
},
'edit': function (e) {
this.isEditAllowed = true;
}
}
});
var objMonthStore = Ext.getStore(this.hiremonthstoreId);
objMonthStore.load();
var objStore = Ext.getStore(this.hireplanstoreId);
objStore.setProxy({
type: 'ajax',
url: 'hireplan.cfc?method=getEmployees'
});
objStore.load();
var onDeleteClick = function (field, value, options) {
// var objPanel = this.down('gridpanel');
var selection = Ext.getCmp('grid').getSelectionModel().getSelection();
// alert(selection);
//var selection = getView().getSelectionModel().getSelection()[r];
if (value) {
//alert(value);
objStore.remove(value);
objStore.sync();
}
};
var onUpdateClick = function (field, value, options) {
alert('field= ' + field + ' value= ' + value + 'options= ' + options);
objStore.update(this.hireplanstoreId, value, 'update', options);
onSync();
};
var onSync = function () {
objStore.sync();
};
Ext.apply(this, {
layout: 'fit',
width: 800,
//height: 1500,
items: [{
xtype: 'grid',
id: 'gridgrid',
//height: 300,
store: objStore,
selModel: {
selType: 'cellmodel'
},
selType: 'rowmodel',
plugins: [this.editing],
// plugins: [cellEditing],
columnLines: true,
viewConfig: {
stripeRows: true
},
//loadMask: true,
disableSelection: true,
columns: [{
header: 'rowid',
hidden: true,
dataIndex: 'ROWID'
}, {
header: 'Indicator',
id: 'chkcolumn',
xtype: 'checkcolumn',
dataIndex: 'CHK_COL',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
listeners: {
checkchange: function (column, recordIndex, checked) {
alert('checked rindex= ' + recordIndex);
onDeleteClick(column, recordIndex, checked);
//or send a request
}
}
}, {
id: 'employeeid',
header: 'employeeid',
width: 80,
hidden: false,
sortable: true,
dataIndex: 'EMPLOYEEID',
flex: 1
}, {
id: 'NATIONALIDNUMBER',
header: 'NATIONALIDNUMBER',
width: 80,
sortable: true,
dataIndex: 'NATIONALIDNUMBER',
flex: 1
}, {
id: 'MARITALSTATUS',
header: 'MARITALSTATUS',
width: 80,
sortable: true,
dataIndex: 'MARITALSTATUS',
flex: 1
}, {
id: 'PotentialforInsourcingKV',
header: 'Potential for Insourcing',
width: 30,
sortable: true,
dataIndex: 'POTENTIAL_FOR_INSOURCING',
flex: 1,
editor: {
id: 'thiscombo',
xtype: 'combobox',
typeAhead: true,
triggerAction: 'all',
selectOnTab: true,
store: [
['1', 'Yes'],
['0', 'No']
],
lazyRender: true,
listClass: 'x-combo-list-small',
listeners: {
scope: this,
'select': function () {
var selval = Ext.getCmp('thiscombo').getValue();
var row = rIdx;
//alert(selval + ' ' + rIdx);
onUpdateClick('thiscombo', rIdx, selval);
}
}
}
}, {
id: 'ABBREVIATED_MONTH',
header: 'ABBREVIATED_MONTH',
width: 80,
sortable: true,
dataIndex: 'ABBREVIATED_MONTH',
flex: 1,
renderer: this.renderMonth,
field: {
xtype: 'combobox',
store: Ext.getStore(this.hiremonthstoreId),
typeAhead: true,
lazyRender: true,
queryMode: 'local',
displayField: 'ABBREVIATED_MONTH',
valueField: 'MONTH_ID',
listClass: 'x-combo-list-small'
}
}, {
id: 'SALARIEDFLAG',
header: 'SALARIEDFLAG',
width: 80,
sortable: true,
dataIndex: 'SALARIEDFLAG',
flex: 1
}],
features: [{
ftype: 'rowbody'
}]
}]
});
this.callParent(arguments);
}, //initComponent
onSelectChange: function (selModel, selections) {
this.down('#delete').setDisabled(selections.length === 0);
},
viewConfig: {},
});
// JavaScript Document
// JavaScript Document
hireplanstore = Ext.create("Ext.data.Store", {
model: 'HiringPlan',
//autoLoad: true,
//autoSync: true,
buffered: true,
storeId: 'hireplanstore',
remoteFilter: true
,
proxy: {
type: 'ajax',
simpleSortMode: true,
api: {
read: 'hireplan.cfc?method=GetEmployees',
update: 'hireplan.cfc?method=upEmployees',
destroy: 'hireplan.cfc?method=delEmployees'
},
reader: {
type: 'json',
messageProperty: 'message',
successProperty: 'success',
root: 'data'
},
writer: {
type: 'json',
writeAllFields: false,
root: 'data'
},
listeners: {
exception: function (proxy, response, operation) {
Ext.MessageBox.show({
title: 'ERROR from store',
msg: operation.getError(),
icon: Ext.MessageBox.ERROR,
buttons: Ext.Msg.OK
});
}
}
}
});
//hireplanstore.pageSize = 10000;
Ext.define('HiringPlan', {
extend: 'Ext.data.Model',
fields: [{
name: 'ROWID',
type: 'string'
}, {
name: 'EMPLOYEEID',
type: 'string'
}, {
name: 'NATIONALIDNUMBER',
type: 'string'
}, {
name: 'MARITALSTATUS',
type: 'string'
}, {
name: 'GENDER',
type: 'string'
}, {
name: 'POTENTIAL_FOR_INSOURCING',
type: 'integer'
}, {
name: 'ABBREVIATED_MONTH',
type: 'string'
}, {
name: 'SALARIEDFLAG',
type: 'string'
}, {
name: 'CHK_COL',
type: 'bool'
}]
});
In order to update correctly your ajax or rest call have to return an array containing the updated records, even if it's a single record, you have to return it inside an array, a sample json response (for the rest proxy) should be like this:
[{'id': 1, 'name': 'test', 'foo': 'bar'}]