I'm using a jquery script called jTable (www.jtable.org) to implement dynamic tables in my web application. In order to include a table on a particular page, you must include the following code to declare its properties:
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: {
//Field definitions comes here
}
});
});
</script>
An example of what might go into the fields property:
fields: {
StudentId: {
key: true,
create: false,
edit: false,
list: false
},
Name: {
title: 'Name',
width: '23%'
},
EmailAddress: {
title: 'Email address',
list: false
},
Password: {
title: 'User Password',
type: 'password',
list: false
},
Gender: {
title: 'Gender',
width: '13%',
options: { 'M': 'Male', 'F': 'Female' }
},
BirthDate: {
title: 'Birth date',
width: '15%',
type: 'date',
displayFormat: 'yy-mm-dd'
}
}
The problem is I use the same table (or very similar tables) throughout my web application. I would like to be able to implement a way to store the fields in an external .js file and then refer to it on each page, thus avoiding copying and pasting. On some pages, I may only include some of the above fields (ex. I may want to exclude Password and EmailAddress) or make slight variations to the fields when I load them (ie. use a different displayFormat (for BirthDate) than the default in the external .js file on a particular page.
Thanks!
You can do this in several ways. Here's a simple one:
main.js
//should be modularized/namespaced
var defaultStudentTableFieldsCfg = {
...
};
other-file.js
$(function () {
var tableFieldsCfg = $.extend({}, defaultStudentTableFieldsCfg);
//define new column
tableFieldsCfg.someNewCol = {
//...
};
//remove some column
delete tableFieldsCfg.Password;
//override config
tableFieldsCfg.Gender.title = 'GENDER';
//it would be better not to hard-code #MyTableContainer here
$('#MyTableContainer').jtable({ fields: tableFieldsCfg });
});
You could create functions that you put in external JS files. Then those functions could return the JSON objects needed to construct your jTable.
The problem is the fact that you have a JSON object and that can not be just referenced in a JavaScript file. If you want to load the file, you would need to use something like getJSON and than use that with jQuery.
function createTable(fields) {
$('#MyTableContainer').jtable({
//General options comes here
actions: {
//Action definitions comes here
},
fields: fields
});
}
$(function(){
$.getJSON("YourFields.json", createTable);
});
Now what you are trying to do is reference a global variable.
Place the file before and reference the global variable.
<script type="text/javascript" src="YourFields.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#MyTableContainer').jtable({
actions: {
},
fields: fields
});
});
</script>
The YourFields.js file should look more like
if (!window.appDefaults) {
window.appDefaults = {}
}
window.appDefaults.fields = {
StudentId: {
key: true,
...
};
Related
Im using this tool here http://craftpip.github.io/jquery-confirm/#dialog and i wanted to have a popup that has a variable amount of buttons based on a piece of data used to construct pop up.
Here is an example of what a very simple/empty one looks like.
$.confirm({
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
});
What i want is to be able to put a foreach loop in side of "buttons: { ... }".
Is there a way to do so or a way to achieve what i am trying to do?
Just build your options object before :
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {},
};
$.each( variable_name, function(){
options.buttons[ this.btn_name ] = this.fn;
} );
$.confirm( options );
Of course, everything depends on how the object you loop looks like, but the logic is here.
Your logic is inverted. The following is an object:
{
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
}
So you could do:
var options = {
title: 'testing',
content: 'this has two static buttons',
buttons: {
confirm: function () {
},
cancel: function () {
},
}
};
$.confirm(options);
You then can add items by
options.buttons["mybutton"] = function() { };
You can place the previous code in a loop and change the string "mybutton" to whatever you want for whatever functions you have. You're basically asking how to add a property to and existing javascript object.
I want to do something like this jsfiddle example, I need to put some custom attributes on left panel properties. Below I tried to make similarly but I can't drag the field
YUI().use('aui-form-builder',function (Y) {
Y.MyFormCustom = Y.Component.create({
NAME: 'form-node',
ATTRS: {
type: {
value: 'custom'
},
customAttr: {
validator: Y.Lang.isString,
value: 'A Custom default'
}
},
EXTENDS: Y.FormBuilderFieldBase,
prototype: {
getPropertyModel: function () {
var instance = this;
var model = Y.FormBuilderFieldBase.superclass.getPropertyModel.apply(instance, arguments);
model.push({
attributeName: 'customAttr',
name: 'Custom Attribute'
});
return model;
}
}
});
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
var availableFields = [
{
iconClass: 'form-builder-field-icon-button',
label: 'Button',
type: 'custom'
}
];
myform= new Y.FormBuilder({
availableFields: availableFields,
boundingBox: '#myHolder'
}).render();
I don't know why the form is not appearing. Any help will be appreciated.
Your example has been very helpful to me because I also needed to extend the Form Builder fields.
The fix to the above is simple.
Replace the line:
Y.FormBuilder.types['custom'] = Y.MyFormCustom;
by
Y.FormBuilderField.types['custom'] = Y.MyFormCustom;
This solution is inspired from the source code found in the Alloy UI API.
See link:
AlloyUI Form Builder
Cheers
I'm using JTable and JQuery for an html page, adding the records manually in JTable using jtable addRecord option. I want to delete the added record based on user selection locally i.e., on client side only. Hence, I use the below code, the record contains TeamName & TeamDescription.
$.fn.deleteTeamRow = function() {
var $selectedRows = $('#TeamContainer').jtable('selectedRows');
$selectedRows.each(function () {
var record = $(this).data('record');
var teamname = record.TeamName;
$('#TeamContainer').jtable('deleteRecord', {
key: teamname,
clientOnly: true,
success: (function() {
alert("record deleted");
}),
error: (function() {
alert("record deletion error!");
})
});
});
};
Unable to either get the success or error alert.
Kindly, let me know how to delete a record on client side only.
I was able to resolve the issue the 'key' was missed while defining the columns in the Table.
$('#TeamContainer').jtable({
selecting: true,
columnResizable: false,
selecting: true, //Enable selecting
multiselect: true, //Allow multiple selecting
selectingCheckboxes: true,
actions: {
},
fields: {
TeamName: {
title: 'Team Name',
**key: true,**
sorting: true
},
TeamDescription: {
title: 'Team Description',
create: false
}
}
});
Having a really hard time figuring this out. I need to submit a form in an ExtJS application and then download the data in a .CSV file. The problem is, the way ExtJS has me submitting the form with "isUpload" the parameters I'm POSTing are being sent as "mulitpart/form-data" and I can't consume them or parse them. I have multiple values of the same input field name.
field: A
field: B
field: C
When I submit for my grids they go over as multiple instances like above. As soon as I introduce "isUpload" to the form they go overs as:
field: A,B,C
My program reads field as "A,B,C" and not three separate instances of field!
Here's my code. Interesting that when I examine in Firebug the Params tab looks correct, but the POST tab has then all in one value.
I just recently added the parameters to the url to try and fake it out!
Ext.Ajax.request({
url : '/cgi-bin/cgijson007.pgm' + '?' + parameters,
form : myForm,
params : parameters,
standardSubmit : true,
isUpload : true
});
isUpload: true only defines that you want to upload a file along with fields, so multipart is correct. To download I recommend you to use a hidden frame. For that use a helper defined within a Namespace.
helper.util.HiddenForm = function(url,fields){
if (!Ext.isArray(fields))
return;
var body = Ext.getBody(),
frame = body.createChild({
tag:'iframe',
cls:'x-hidden',
id:'hiddenform-iframe',
name:'iframe'
}),
form = body.createChild({
tag:'form',
cls:'x-hidden',
id:'hiddenform-form',
action: url,
target:'iframe'
});
Ext.each(fields, function(el,i){
if (!Ext.isArray(el))
return false;
form.createChild({
tag:'input',
type:'text',
cls:'x-hidden',
id: 'hiddenform-' + el[0],
name: el[0],
value: el[1]
});
});
form.dom.submit();
return frame;
}
// Use it like
helper.util.HiddenForm('my/realtive/path', [["fieldname","fieldValue"]]);
If the server answer with a download the save window will popup.
Below is how I handler a post download on a grid listing:
First, I create html form container with hidden filed contains the parameters to post, and also a submit function.
var txtFileId = Ext.create('Ext.form.field.Hidden', { name: 'fid', value: 0 });
var dwFrm = Ext.create('Ext.container.Container', {
autoEl: { tag: 'form', method: 'POST', target: '_BLANK',
action: '/download/files' }, style: { hidden: true },
items: [txtFileId, {
xtype: 'hidden', name: 'userId', value: '1111'
}],
submit: function (fid) {
if (fid) {
txtFileId.setValue(fid);
this.el.dom.submit();
}
}
});
Second, I dock the above component into grid's toolbar
var grid = Ext.create('Ext.grid.Panel', {
.....
dockedItems: [Ext.create("Ext.Toolbar", {
dock: "top", items: [
dwFrm,
{ text: "Download Selected",
handler: function () {
var sm = grid.getSelectionModel();
if (!sm.hasSelection()) return null;
var recs = sm.getSelection();
dwFrm.submit(recs.data.id);
}
}
]
})]
.....
});
This works perfectly. Arrays included.
downloadFile: function (url, params) {
debugger;
var body = Ext.getBody(),
frame = body.createChild({
tag: 'iframe',
cls: 'x-hidden',
id: 'hiddenform-iframe',
name: 'iframe'
}),
form = body.createChild({
tag: 'form',
method: 'POST',
cls: 'x-hidden',
id: 'hiddenform-form',
action: url,
target: 'iframe'
});
for (var i in params) {
if (Ext.isArray(params[i])) {
for (var j = 0; j < params[i].length; j++) {
form.createChild({
tag: 'input',
type: 'hidden',
cls: 'x-hidden',
id: 'hiddenform-' + i,
name: i,
value: params[i][j]
});
}
} else {
form.createChild({
tag: 'input',
type: 'hidden',
cls: 'x-hidden',
id: 'hiddenform-' + i,
name: i,
value: params[i]
});
}
}
form.dom.submit();
return frame;
}
I am trying to get working a simple (noob) examle of Combo loaded with data from Xml file.
Here is my xml:
<?xml version="1.0" encoding="UTF-8"?>
<accounts>
<account>
<name>Savings Account</name>
<id>1</id>
</account>
<account>
<name>Current Account</name>
<id>2</id>
</account>
</accounts>
When I configure and add XmlStore, it reports 2 records found.
Here is the code for the XmlStore:
cteo = Ext.extend(Ext.data.XmlStore, {
constructor: function(cfg) {
cfg = cfg || {};
cteo.superclass.constructor.call(this, Ext.apply({
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
}, cfg));
}
});
new cteo();
finally, this is the code for the combo:
MyPanelUi = Ext.extend(Ext.Panel, {
title: 'My Panel',
width: 400,
height: 250,
initComponent: function() {
this.items = [
{
xtype: 'label',
text: 'Cuenta Origen'
},
{
xtype: 'combo',
store: 'cteo',
displayField: 'name',
valueField: 'id'
}
];
MyPanelUi.superclass.initComponent.call(this);
}
});
It must be something simple, but I am stuck...
This will not do anything:
store: 'cteo',
You need to pass in the object reference that you assigned earlier, not a string:
store: cteo,
Alternately, you could call Ext.StoreMgr.lookup('cteo'), but judging by your code I assume that the variable reference was your intention.
One comment on your code. Doing this:
cteo = Ext.extend(Ext.data.XmlStore, {
...
cteo();
...is a bit strange, and is most likely creating a global variable in the window scope (assuming that cteo is not defined as a var somewhere earlier). Think of it as defining a custom class, then creating a new instance of the class you defined. Also, think about your naming -- a store subclass should be a specific type of store, which should be evident in the name. Typically, your code should look more like this:
Ext.ns('MyNamespace');
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
...
});
var cteoStore = new CteoStore();
Oh yeah, one other thing. You do not need to override the constructor for the sole purpose of providing default configs. Just do this:
MyNamespace.CteoStore = Ext.extend(Ext.data.XmlStore, {
storeId: 'cteo',
url: 'cteo.xml',
record: 'account',
data: '',
fields: [
{
name: 'name',
mapping: 'name'
},
{
name: 'id',
mapping: 'name'
}
]
});
This is also more useful since these configs are overrideable, unlike in your example. This makes it more reusable (like if you ever wanted to assign a different id to another instance).
Check out this thread at sencha site:
http://www.sencha.com/forum/showthread.php?105818-(noob)-Populating-combo-from-XmlStore-with-Ext-js-designer