Develop Reference

How can I load data for update using the window for adding new record in Ext-Js 3.0?

I have one problem with adding new button for update my records in Ext-Js 3.0.
I have already one window for creating new record and I intend to use the same window for editing one of the records. The question is: how can I load the record what I have choosen from existing records int the columns of the window for creating record?
This code for adding a new record, I would like to load the content of such record in this window if I update it. Is it possible? I think I need something like store.load.record.data['id']?
Thank you in advance for your help.
var winAdd = new Ext.Window({
id: 'winAdd',
renderTo: Ext.getBody(),
layout: 'fit',
width: 400,
autoHeight: true,
closeAction: 'hide',
closable: false,
title: 'add item',
plain: true,
items: {
xtype: 'form',
id: 'frmAdd',
autoHeight: true,
frame: true,
defaultType: 'textfield',
border: false,
dock_id: <?=$_SESSION['user']->getDock()->getId()?>,
defaults: {allowBlank: true, anchor: '95%'},
items: [{
fieldLabel: 'dock',
hiddenName: 'dock',
name: 'dock',
xtype: 'combo',
store: strRamps,
displayField: 'name',
valueField: 'id',
typeAhead: true,
mode: 'local',
triggerAction: 'all',
forceSelection: true
},
This is code for update the record:
new Ext.Toolbar.Button({
text: '<?= $this→translate('edit item') ?>',
handler: function () {
Ext.getCmp('winAdd').show(this);
var conn = new Ext.data.Connection();
conn.request({
url: 'example/updateItem',
method: 'POST',
params: {id: gridPanel.selModel.selection.record.data['id']},
success: function (responseObject) {
store.update(gridPanel.selModel.selection.record);
},
})
}
}

extjs populating a panel with multiple data sources

I Have a Ext.grid.GridPanel that is linked to a Ext.data.JsonStore for data and Ext.grid.ColumnModel for grid specs.
I have 10 columns. 9 of them are being populated by the json store. I am having issues with the last column since its data is dynamic and not able to loaded like the rest.
the column requires that other datastores be loaded first and once they are loaded I need to extract data from those columns and insert that data into a column in my json store to display in the 10 column grid.
`
var JSONSTORE = new Ext.data.JsonStore ({
// Store Configs
autoLoad: true,
url: 'json_data_call.php',
baseParams: {action: 'read'},
// Reader Configs
storeId: 'store1',
idProperty: 'store1',
root: 'data',
sortInfo: {
field: 'field_name',
direction: 'ASC'
},
fields: [
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'string'},
{name : 'field_name', type: 'int'}
],
autoSave: false
});
JsonStore.on('exception',JsonSave,this);
JsonStore.on('load',function(){
autoDiagnosticsJsonStore.warn_err_loaded = true;
if(autoDiagnosticsJsonStore.warn_err_loaded)
{
console.log(autoDiagnosticsJsonStore);
}else{
console.log('ERROR');
}
});
/*
* ColumnModel
*/
var ColumnModel = new Ext.grid.ColumnModel ({
defaults: { menuDisabled: true },
columns: [
{header: 'Type', hideable: false, sortable: false, dataIndex: 'ERR_TYPE',
renderer: function(value, metaData, record, rowIndex, colIndex, store) {
if (record.data.ERR_TYPE == 'WARNING') {
metaData.css = 'cog_bg_orange';
}
if (record.data.ERR_TYPE == 'ERROR') {
metaData.css = 'cog_bg_red';
}
return value;
}
},
{header: 'Item Found', hideable: false, sortable: false, dataIndex: 'ERR_MSG', width: 900, css: 'font-family: lucida console, monospace;'}
]
});
var errorGrid = new Ext.grid.GridPanel({
id: 'nmerrorGrid',
enableColumnMove: false,
autoHeight: true,
xtype: 'grid',
ds: JsonStore,
cm: ColumnModel,
sm: new Ext.grid.RowSelectionModel({singleSelect: true})
});
$error_panel = "
var errorPanel = new Ext.Panel({
title: 'field_name',
collapsible: true,
anchor: '98%',
height: 300,
frame: true,
layout: 'fit',
items: [ errorGrid ]
});`

If I understand this correctly, you're trying to create another field for records in the store, and that field is calculated once the store is populated.
If you create a model for the records of your store, you can create a field that is calculated using the record's values.
Example:
Ext.define('User', {
extend: 'Ext.data.Model',
fields: [{
name: 'firstName',
type: 'string'
},{
name: 'lastName',
type: 'string'
},{
name: 'fullName',
calculate: function (data) {
return data.firstName + ' ' + data.lastName;
}
}]
});
The field 'fullName' is built using the existing records values. You can add your model to the store (model: 'User') in place of the fields config.

How to update a Ext.form.ComboBox store (simple store) once created in a Ext.window (Extjs)

I tried the find a solution of my case on the sencha forms, but no success :(
I'm a beginner on js and Extjs 3.4, I'm trying to use Ext.form.ComboBox in a Ext.window to show the list of js objects (layers). the problem is when I create the window the first time and I click on the ComboBox trigger I get my layers list correctly, but when I remove or add a layer, and I click again on the trigger the store don't update and I find the same list :(((
Can you please help me to find a solution to this problem, for example when I click on the trigger it will update and load the new list store ?
Any suggestion is welcome,
Thank you in advance !
Here is a part of the code :
createWindow: function() {
var FIELD_WIDTH = 250,
base = {
forceSelection: true,
editable: true,
allowBlank: true,
triggerAction: 'all',
mode: 'local',
labelSeparator: OpenLayers.i18n("labelSeparator"),
valueField: 'value',
displayField: 'text',
labelWidth: 300
};
var addComboxFieldItemsWCS = function() {
layer_liste_WCS = [];
var empty = true ;
layerStore.each (function (record) {
var layer = record.get('layer');
var queryable = record.get('queryable');
// var type = record.get('type');
var hasEquivalentWCS = record.hasEquivalentWCS()
if (queryable && hasEquivalentWCS) {
empty = false;
var ObjectRecordType = Ext.data.Record.create(['text', 'value']);
var rec = new ObjectRecordType({ text: layer.name, value:record })
console.log(rec.data.value)
var liste = [rec.data.text, rec.data.value];
layer_liste_WCS.push(liste)
}
}) ;
if (empty) {
var ObjectRecordType = Ext.data.Record.create(['text', 'value']);
var rec = new ObjectRecordType({ text: "No based WCS layer !", value:"" })
var liste = [rec.data.text, rec.data.value];
layer_liste_WCS.push(liste)
disabled: true
}
};
addComboxFieldItemsWCS();
var WCS_store = new Ext.data.SimpleStore({
autoLoad: true,
fields: ['text','value'],
data: layer_liste_WCS
});
ImageField = new Ext.form.ComboBox(Ext.apply({
name: "Image_ref",
fieldLabel: OpenLayers.i18n("Spot Image Input (Required)"),
// fieldLabel: WPS_config.img.title, // From WPS Server
emptyText: OpenLayers.i18n("Select your Image"),
autoDestroy: true,
width: FIELD_WIDTH,
triggerAction: 'all',
queryMode: 'local',
store: WCS_store,
}, base));
return new Ext.Window({
title: OpenLayers.i18n("addon_wpsjussie_title"),
closable: true,
resizable: false,
shadow: false,
closeAction: 'hide',
region: "center", //"north","south","east","west"
width: 480,
height: 190,
iconCls: 'wind_icon',
plain: true,
layout: 'border',
buttonAlign: 'right',
layout: 'fit',
listeners: {
show: function() {
this.el.setStyle('left', '');
this.el.setStyle('top', '');
}
},
items: [{
region: 'center',
xtype: 'tabpanel',
activeTab: 0,
width: 50,
height:20,
items: [{ // we will declare 3 tabs
title: OpenLayers.i18n('Datas Inputs'),
closable:false,
iconCls: 'input_icon',
active: true,
items:[{
xtype: 'form',
autoWidth: true,
labelWidth: 185,
bodyStyle: "padding:10px;",
items: [
ImageField,
]
}]
}]
}],
});
},

first you need to set up a 'click' listener.
Every time it's performed, you have to reload the store 'WCS_store' :
WCS_store.load({ params: { param_1: value_1, param_2: value_2, etc...} });
Let me know if It works.

Here is the solution !
store: myArrayStore,
listeners:
{
beforequery:function() {
addComboboxItemsWFS();
this.store.clearData();
this.store.loadData(my_data);
}
}

Multiple select checkbox is not returning values in Extjs 4.2 grid

I am using Extjs 4.2 grid for my application. In my grid there is an option to select multiple rows and to delete them(via checkbox). But I am but the selected rows not returning any values.
Bellow is my code..
###########################################################################
Ext.Loader.setConfig({enabled: true});
Ext.Loader.setPath('Ext.ux', '../js/extjs_4_2/examples/ux/');
Ext.require([
'Ext.grid.*',
'Ext.data.*',
'Ext.util.*',
'Ext.ux.grid.FiltersFeature',
'Ext.toolbar.Paging',
'Ext.ux.PreviewPlugin',
'Ext.ModelManager',
'Ext.tip.QuickTipManager',
'Ext.selection.CheckboxModel'
]);
Ext.onReady(function(){
Ext.tip.QuickTipManager.init();
Ext.define('ForumThread', {
extend: 'Ext.data.Model',
fields: [
{name: 'patient_name'},
{name: 'referrer_provider'},
{name: 'admit_date'},
{name: 'added_date'},
{name: 'billing_date'},
{name: 'dob'},
{name: 'loc_name'},
{name: 'physician_name'},
{name: 'imploded_diagnosis_name'},
{name: 'imploded_procedure_name'},
{name: 'imploded_optional_name'},
{name: 'imploded_quick_list_name'},
{name: 'med_record_no'},
{name: 'message'}
],
idProperty: 'bill_id'
});
var url = {
remote: '../new_charges_json.php'
};
// configure whether filter query is encoded or not (initially)
var encode = false;
// configure whether filtering is performed locally or remotely (initially)
var local = false;
// create the Data Store
var store = Ext.create('Ext.data.Store', {
pageSize: 10,
model: 'ForumThread',
remoteSort: true,
proxy: {
type: 'jsonp',
url: (local ? url.local : url.remote),
reader: {
root: 'charges_details',
totalProperty: 'total_count'
},
simpleSortMode: true
},
sorters: [{
property: 'patient_name',
direction: 'DESC'
}]
});
var filters = {
ftype: 'filters',
// encode and local configuration options defined previously for easier reuse
encode: encode, // json encode the filter query
local: local, // defaults to false (remote filtering)
// Filters are most naturally placed in the column definition, but can also be
// added here.
filters: [{
type: 'string',
dataIndex: 'patient_name'
}]
};
// use a factory method to reduce code while demonstrating
// that the GridFilter plugin may be configured with or without
// the filter types (the filters may be specified on the column model
var createColumns = function (finish, start) {
var columns = [
{
menuDisabled: true,
sortable: false,
xtype: 'actioncolumn',
width: 50,
items: [{
icon : '../js/extjs_4_2/examples/shared/icons/fam/user_profile.png', // Use a URL in the icon config
tooltip: 'Patient Profile',
renderer: renderTopic,
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
//alert("Bill Id: " + rec.get('bill_id'));
//Ext.Msg.alert('Bill Info', rec.get('patient_name')+ ", Bill Id: " +rec.get('bill_id'));
window.location.href="../newdash/profile.php?bill_id="+rec.get('bill_id');
}
},
]
},
{
dataIndex: 'patient_name',
text: 'Patient Name',
sortable: true,
// instead of specifying filter config just specify filterable=true
// to use store's field's type property (if type property not
// explicitly specified in store config it will be 'auto' which
// GridFilters will assume to be 'StringFilter'
filterable: true
//,filter: {type: 'numeric'}
}, {
dataIndex: 'referrer_provider',
text: 'Referring',
sortable: true
//flex: 1,
}, {
dataIndex: 'admit_date',
text: 'Admit date',
}, {
dataIndex: 'added_date',
text: 'Sign-on date'
}, {
dataIndex: 'billing_date',
text: 'Date Of Service',
filter: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y')
}, {
dataIndex: 'dob',
text: 'DOB'
// this column's filter is defined in the filters feature config
},{
dataIndex: 'loc_name',
text: 'Location',
sortable: true
},{
dataIndex: 'physician_name',
text: 'Physician (BILLED)',
sortable: true
},{
dataIndex: 'imploded_diagnosis_name',
text: 'Diagnosis'
},{
dataIndex: 'imploded_procedure_name',
text: 'Procedure'
},{
dataIndex: 'imploded_optional_name',
text: 'OPT Template'
},{
dataIndex: 'imploded_quick_list_name',
text: 'Quick List'
},{
dataIndex: 'med_record_no',
text: 'Medical Record Number'
},{
dataIndex: 'message',
text: 'TEXT or NOTES'
}
];
return columns.slice(start || 0, finish);
};
var pluginExpanded = true;
var selModel = Ext.create('Ext.selection.CheckboxModel', {
columns: [
{xtype : 'checkcolumn', text : 'Active', dataIndex : 'bill_id'}
],
checkOnly: true,
mode: 'multi',
enableKeyNav: false,
listeners: {
selectionchange: function(sm, selections) {
grid.down('#removeButton').setDisabled(selections.length === 0);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
//width: 1024,
height: 500,
title: 'Charge Information',
store: store,
//disableSelection: true,
loadMask: true,
features: [filters],
forceFit: true,
viewConfig: {
stripeRows: true,
enableTextSelection: true
},
// grid columns
colModel: createColumns(15),
selModel: selModel,
// inline buttons
dockedItems: [
{
xtype: 'toolbar',
items: [{
itemId: 'removeButton',
text:'Charge Batch',
tooltip:'Charge Batch',
disabled: false,
enableToggle: true,
toggleHandler: function() { // Here goes the delete functionality
alert(selModel.getCount());
var selected = selModel.getView().getSelectionModel().getSelections();
alert(selected.length);
var selectedIds;
if(selected.length>0) {
for(var i=0;i<selected.length;i++) {
if(i==0)
{
selectedIds = selected[i].get("bill_id");
}
else
{
selectedIds = selectedIds + "," + selected[i].get("bill_id");
}
}
}
alert("Seleted Id's: "+selectedIds);return false;
}
}]
}],
// paging bar on the bottom
bbar: Ext.create('Ext.PagingToolbar', {
store: store,
displayInfo: true,
displayMsg: 'Displaying charges {0} - {1} of {2}',
emptyMsg: "No charges to display"
}),
renderTo: 'charges-paging-grid'
});
store.loadPage(1);
});
#
It's giving the numbers in alert dialogue of the selected rows,here
alert(selModel.getCount());
But after this it's throwing a javascript error "selModel.getView is not a function" in the line bellow
var selected = selModel.getView().getSelectionModel().getSelections();
I changed it to var selected = grid.getView().getSelectionModel().getSelections(); Still it's throwing same kind of error(grid.getView is not a function).

Try this
var selected = selModel.getSelection();
Instead of this
var selected = selModel.getSelectionModel().getSelections();

You already have the selection model, why are you trying to ask to get the view to go back to the selection model? It's like doing node.parentNode.childNodes[0].innerHTML.
selModel.getSelection(); is sufficient. Also be sure to read the docs, there's no getView method listed there for Ext.selection.CheckboxModel, so you just made that up!

Dynamically add TextAreas to a FormPanel on User Input with ExtJS

I have a FormPanel displaying a pretty basic form, essentially, it just contains a "Name" field, a "Description" field, and multiple "Rules" text areas. What I want is for the user to be able to type text into the first such Rule text area and have another empty TextField appear (when they start typing) for an additional rule.
Currently, I've got a function that should generate new TextAreas when called with a specified name (the newRulesField function), and a function to handle KeyPress events inside my text areas.
What I'm essentially looking for is how I can dynamically modify the number of TextAreas in the form.
Here's the code, in case it helps:
function handleRuleKeypress(a,b) {
Ext.Msg.alert('kp');
}
function newRulesField(name) {
var rulesField = new Ext.form.TextArea({
fieldLabel: 'Rules',
anchor: '100%',
name: name,
allowBlank: false,
grow: false,
enableKeyEvents: true,
listeners: {
keypress: handleRuleKeypress
}
});
return rulesField;
}
function handleNewRuleSetClick(nodes) {
var nameField = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'ruleSetName',
anchor: '100%',
allowBlank: false,
grow: false
});
var descField = new Ext.form.TextField({
fieldLabel: 'Description',
name: 'ruleSetDescription',
anchor: '100%',
allowBlank: false,
grow: false
});
var form = new Ext.FormPanel({
labelWidth: 75,
defaultType: 'textfield',
bodyStyle: 'padding:30px',
id: 'newRuleSetPanel',
name: 'newRuleSetPanel',
title: 'New Rule Set',
buttons: [{
text: 'Save',
id: 'saveBtn',
hidden: false,
handler: function() {
form.getForm().submit({
url: 'server/new-rule-set',
waitMsg: 'Saving...',
success: function(f,a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f,a) {
Ext.Msg.alert('Warning', 'Error');
}
});
}
},{
text: 'Cancel',
id: 'cancelBtn',
hidden: false
}]
});
form.add(nameField);
form.add(descField);
form.add(newRulesField('rules1'));
this.add(form);
this.doLayout();
}

you are very close to doing this already - just call your newRulesField function from your handleRuleKeypress function. something like this:
function handleNewRuleSetClick(nodes) {
var nameField = new Ext.form.TextField({
fieldLabel: 'Name',
name: 'ruleSetName',
anchor: '100%',
allowBlank: false,
grow: false
});
var descField = new Ext.form.TextField({
fieldLabel: 'Description',
name: 'ruleSetDescription',
anchor: '100%',
allowBlank: false,
grow: false
});
var form = new Ext.FormPanel({
labelWidth: 75,
defaultType: 'textfield',
bodyStyle: 'padding:30px',
id: 'newRuleSetPanel',
name: 'newRuleSetPanel',
title: 'New Rule Set',
buttons: [{
text: 'Save',
id: 'saveBtn',
hidden: false,
handler: function() {
form.getForm().submit({
url: 'server/new-rule-set',
waitMsg: 'Saving...',
success: function(f, a) {
Ext.Msg.alert('Success', 'It worked');
},
failure: function(f, a) {
Ext.Msg.alert('Warning', 'Error');
}
});
}
}, {
text: 'Cancel',
id: 'cancelBtn',
hidden: false
}]
});
function handleRuleKeypress(a, b) {
form.add(newRulesField('rules' + Ext.id()));
}
function newRulesField(name) {
var rulesField = new Ext.form.TextArea({
fieldLabel: 'Rules',
anchor: '100%',
name: name,
allowBlank: false,
grow: false,
enableKeyEvents: true,
listeners: {
keypress: handleRuleKeypress
}
});
return rulesField;
}
form.add(nameField);
form.add(descField);
form.add(newRulesField('rules1'));
this.add(form);
this.doLayout();
}
you will want additional logic for checking if you have already added the new text area (or you will get a new one for each key press), perhaps removing the additional text area if the latest rule is emptied later on, and fixing the textarea id's a little prettier (all this is your handleRuleKeypress func).
My general thoughts on your application design is to keep the FormPanel as a class member somewhere instead of a private function member, this will make it easier to access whenever it comes to modifying it after creation - stacking functions like this is not very pretty nor readable.