Develop Reference

enable/disable 'add new' button in jquery jtable

I am using jquery jtable to display tables from mysql db. In one of the tables, I want user to be allowed to insert only one row. i.e. disable add new record button once first row is inserted.
Is it possible to do this?
I have following structure defined for jtable:
$('#SchoolTableContainer').jtable({
title : 'Schools List',
paging: true, //Enable paging
pageSize: 10, //Set page size (default: 10)
sorting: true, //Enable sorting
defaultSorting: 'name ASC', //Set default sorting
actions : {
listAction : 'ControllerAdminSchool?action=list',
createAction : 'ControllerAdminSchool?action=create',
updateAction : 'ControllerAdminSchool?action=update',
deleteAction : 'ControllerAdminSchool?action=delete'
},
fields : {
id : {
title : 'School Id',
key : true,
list : false
},
name : {
title : 'Name'
},
address : {
title : 'Address'
},
email : {
title : 'Email'
},
phone : {
title : 'Phone'
},
website : {
title : 'Website'
},
remark : {
title : 'remark'
}
}
});
$('#SchoolTableContainer').jtable('load');
Similarly can enable/disable edit & delete buttons individually for each row depending upon some condition (e.g. if name has some particular value say admin then disable delete)?
Also how to add custom button in each row (e.g. to view details I can click on a view button and can view full details of corresponding row)?

To dynamically disable the "add new record" functionality you can remove the button by defining a function handling the recordsLoaded event:
recordsLoaded: function(event, data) {
var rowCount = data.records.length;
if (rowCount>=1){
$('#tableContainer').find('.jtable-toolbar-item.jtable-toolbar-item-add-record').remove();
}
}
similarly, to keep the behavior of your table coherent you should implement the same kind of logic for the events rowInserted and rowsRemoved.
I'm aware that it's a DOM fiddling rather than controlling the behavior of jtable to stop offering the action, however hikalkan's (jtable's author) answer here leads me to believe it's the preferred approach.
For the custom buttons on each row i normally implement the first solution described here.

show/hide panel in ExtJS

I have a panel in user-interface called Code, I dont want to display that panel to specific users when they log in based on their roles. I am new to ExtJS. I have the algorithm/condition to block user's , but I am unsure where to apply it in this code. The .js file is:
analysisCodePanel = new Ext.Panel( {
id : 'analysisCodePanel',
title : 'Code',
region : 'center',
split : true,
height : 90,
layout : 'fit',
listeners :
{
activate : function( p ) {
GLOBAL.IDs[1] = null;
GLOBAL.IDs[2] = null;
p.body.mask("Loading...", 'mask-loading');
runAll(Data, p);}
return;
},
deactivate: function(){
},
collapsible : true
});
My condition is check whether user is Admin so I can do GLOBAL.IsCodeAdmin() then show the above panel else hide it from the user logged in.

if this panel is a child of viewport then you have to use your controller to show and hide the panel.
In your controller put listener for viewport rendering like below. Make sure your read docs and getting started carefully. Then I'll understand how to control elements using different events. This link is a good start http://docs.sencha.com/extjs/4.2.1/#!/guide/getting_started
// ExtJs controller
Ext.define('app.controller.ViewPortController', {
extend: 'Ext.app.Controller',
refs: [
{
ref: 'myPanel', // this elemenet can be referred as getMyPanel()
selector: 'panel[id=analysisCodePanel]' // selector to get panel reference
}
],
init: function () {
this.control({
'viewport': {
'render': this.viewPortRender // on viewport render this function will be called
}
})
},
viewPortRender: function () {
if (GLOBAL.IsCodeAdmin()) {
this.getMyPanel().show(); // show panel
} else {
this.getMyPanel().hide(); // hide panel
}
}
}
);

I solved the problem by using an attribute for panel called disabled and setting it to true.

ExtJS 3: form load with several items with identical names

I have an ExtJS form which contains several items that have the same name. I expect that when the form is loaded with the values from server-side all of those equally named components will get assigned the same relevant value.
Apparently, what happens is that only the first element from the group of equally named gets the value, others are skipped.
Is there an easy way to alter this observed behavior?
UPDATE
Below is the code of the form:
var productionRunAdvancedParametersForm = new Ext.form.FormPanel({
region : 'center',
name : 'productionRunAdvancedParametersCommand',
border : false,
autoScroll : true,
buttonAlign : 'left',
defaults : {
msgTarget : 'side'
},
layoutConfig : {
trackLabels : true
},
labelWidth : 200,
items : [
{
xtype : 'fieldset',
title : 'ASE',
collapsible : true,
autoHeight : true,
items : [ {
xtype : 'hidden',
name : 'genScens'
}, {
xtype : 'checkbox',
name : 'genScens',
fieldLabel : 'GEN_SCENS',
disabled : true
}]
}]
,
listeners : {
beforerender : function(formPanel) {
formPanel.getForm().load({
url : BASE_URL + 'get-data-from-server.json',
method : 'GET',
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
},
failure : function(form, action) {
Ext.Msg.alert("Error", Ext.util.JSON.decode(action.response.responseText).errorMessage);
}
});
}
}
});
The server response is:
{"data":{"genScens":true},"success":true}
What happens is only the hidden component gets value 'true', the disabled checkbox doesn't get checked. If I swap them in the items arrays, then the checkbox is checked but the hidden doesn't get any value.

The behaviour you see is exactly what I'd expect.
Inside a form, using the same field name multiple times -unless you use it for radiobuttons, which is not the case- is an error. Just think about what the form submit function should do in this case: should it send the same key (input name) twice, possibly with different values?
(Obviously, in the case of radiobuttons the answer is simple: sent the input name as key, and the checked radiobutton's value as value).
What Ext does here is, scan the form seaching for the input field matching the name, and then assign the value to the first matching input (since it assumes no duplicate names).
You can work it around simply by:
using two different names in the form (eg. genScens and genScens_chk )
sending the same value under two different keys in the server-side response, e.g.
{"data":{"genScens":true,"genScens_chk":true},"success":true}
Please note: if you cannot alter the server response, still use two different names, just add a callback to the success function, setting the genScens_chk value accordingly, like that:
success : function(form, action) {
var responseData = Ext.util.JSON.decode(action.response.responseText);
if (!responseData.success) {
Screen.errorMessage('Error', responseData.errorMessage);
}
else{
formPanel.getForm().findField("genScens_chk").
setValue(responseData.data.genScens);
}
},

Smart file component(html5smartfile) not working

I have been working on developing a custom extjs console to enable author drop an asset using html5smartfile component. But somehow, the html5smartfile component is not working the way it should. The Area where an author can drop an asset is not displaying. The same is working fine if I am creating a CQ5 dialog. But in my case where i have created a window it's not working.
I have declared my smartfile component like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false
};
But this is rendering like this:
After a lot of work, I found out that the CQ5 dialog updates the view for the component but in case of my window, I have to update it myself. Thus, with a slight manipulation, i just succeeded in displaying the drag area by tweaking the declaration like this:
var assetLinkDropField = {
xtype: 'html5smartfile',
fieldLabel: 'Asset Link',
ddAccept: 'video/.*',
ddGroups: 'media',
fileReferenceParameter: './linkUrl',
name: './linkUrl',
allowUpload: false,
allowFileNameEditing: false,
allowFileReference: true,
transferFileName: false,
listeners: {
afterlayout: function () {
this.updateView();
}
}
}
So now the panel looks like:
But still the Drag and Drop is not working. My Window declaration is like this:
win = new CQ.Ext.Window({
height : 750,
width : 700,
layout : 'anchor',
// animateTarget : btn.el,
closeAction : 'close', // Prevent destruction on Close
id : 'manageLinkWindow',
title : '<b>Multi Link Widget Dialog</b>',
frame : true,
draggable : false,
modal : false, //Mask entire page
constrain : true,
buttonAlign : 'center',
items : [assetLinkDropField]
});
}

I think you should not use
ddAccept: 'video/.*',
This allows only videos from the content finder to be dragged and dropped. It should be "image/".
Verify your other extjs properties / configs for html5smartfile if the above doesn't resolves your problem.

Extjs 4 gridrow draws blank after model save

I have a couple of grids, divided in an accordion layout. They basicly show the same kind of data so an grouped grid should do the trick, however it looks really good this way and so far it works good too.
Left of the grids there is a form panel which is used to edit grid records, when I click on a record in the grid the appropriate data shows up in the form. I can edit the data, but when I click the save button, which triggers an 'model'.save() action, the related grid row draws blank and a dirty flag appears. I checked the model and the 'data' attribute doesn't contain any data but the id, the data is present in the 'modified' attribute.
I read that the red dirty flag means that the data isn't persisted in the back-end, but in this case it is. The request returns with a 200 status code and success : true.
The onSave method from the controller:
onSave : function() {
// Get reference to the form
var stepForm = this.getStepForm();
this.activeRecord.set( stepForm.getForm().getValues() );
this.activeRecord.save();
console.log( this.activeRecord );
}
The step store:
Ext.define( 'Bedrijfsplan.store.Steps', {
extend : 'Ext.data.Store',
require : 'Bedrijfsplan.model.Step',
model : 'Bedrijfsplan.model.Step',
autoSync : true,
proxy : {
type : 'rest',
url : 'steps',
reader : {
type : 'json',
root : 'steps'
},
writer : {
type : 'json',
writeAllFields : false,
root : 'steps'
}
}
} );
Step model:
Ext.define( 'Bedrijfsplan.model.Step', {
extend : 'Ext.data.Model',
fields : [ 'id', 'section_id', 'title', 'information', 'content', 'feedback' ],
proxy : {
type : 'rest',
url : 'steps',
successProperty : 'success'
}
} );
Step grid
Ext.define( 'Bedrijfsplan.view.step.Grid', {
extend : 'Ext.grid.Panel',
alias : 'widget.stepsgrid',
hideHeaders : true,
border : false,
columns : [ {
header : 'Titel',
dataIndex : 'title',
flex : 1
} ]
} );
I spend a couple of hours searching and trying, but I still haven't found the solution. Some help on this matter would be appreciated :)

Your model updating code:
this.activeRecord.set( stepForm.getForm().getValues() );
Should work, but I might try splitting it into two lines and setting a breakpoint to verify that getValues() is returning what you're expecting.
Also ensure that you have the name attribute set for each field in your form and that it matches exactly to the names of fields in your model.
Finally, it's better to call .sync() on the store rather than .save() on the model when you're working with a model that belongs to a store. They option autoSync: true on the store will make this happen automatically each time you make a valid update to one of its models.
The BasicForm.loadRecord and BasicForm.updateRecord methods provide a nice wrapper around the functionality you're seeking that may work better:
onRowSelected: function(activeRecord) {
stepForm.getForm().loadRecord(activeRecord);
}
onSaveClick: function() {
var activeRecord = stepForm.getForm().getRecord();
stepForm.getForm().updateRecord(activeRecord);
activeRecord.store.sync();
}

The only oddity I see is with your: this.activeRecord.set( stepForm.getForm().getValues() );
I've always used .set() on the store never on the record. e.g.:
myDataStore.set( stepForm.getForm().getValues() );