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 combobox triger only after text type but not on click

here is my code
{
xtype: 'combobox',
minChars: 3,
anchor: '100%',
fieldLabel: 'Type',
name: 'typeName',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Type',
valueField: 'id',
bind: {
store: '{type}'
}
},
so I have combobox whos store is autoLoad:true,
but when i click on the combobox button, it resend the request to server. i dont want that , i want to send the request to server only when someone type something in it.

{
xtype: 'combobox',
minChars: 3,
anchor: '100%',
fieldLabel: 'Type',
name: 'typeName',
typeAhead: true,
mode: 'remote',
emptyText: 'Select Type',
valueField: 'id',
bind: {
store: '{type}'
},
triggerAction : 'all',
queryMode : 'local',
listeners: {
change: function (field, newValue, oldValue) {
var store = field.getStore(),
rec =store.findRecord('id',newValue);
if(Ext.isEmpty(rec)){
// You can write the code to send the request to server.
}
}
}
}
I have added two config property in you combobox:
triggerAction : 'all',
queryMode : 'local'
Now when you will write something in your combobox then change event fired.
change event also fired when you select any dropdown item. So you can check it that changed value is new written value or already selected from dorpdown items.

extjs 3.4 add tool tip in from field

Hi I have some form fields and I'm trying to add tool tip. But it is not working. This is my fields,
var importForm = new Ext.form.FormPanel({
//html: "<p>Imgae source: <b>img</b> folder in root directory</p>",
url: '/plugin/ImageImport/admin/import',
monitorValid: true,
labelWidth: 175,
frame: true,
title: 'Image Import',
width: 250,
defaultType: 'textfield',
defaults: { allowBlank: false },
items:[
{ fieldLabel: 'Source Folder Path', name: 'imgSourcePath', id:'imgSourcePath' },
{
xtype: 'combo',
name: 'folderId',
fieldLabel: 'Target Folder',
mode: 'local',
store: valuesDir,
displayField:'key',
valueField: 'id',
width: 'auto',
triggerAction: 'all',
emptyText:'Select Folder...',
id:'folderId',
selectOnFocus:true,
allowBlank: false,
editable: false,
},
{
xtype: 'combo',
name: 'transformation',
fieldLabel: 'Image Transformations',
mode: 'local',
store: values,
displayField:'name',
valueField: 'name',
width: 'auto',
triggerAction: 'all',
emptyText:'Select Transformation...',
id:'transformation',
selectOnFocus:true,
allowBlank: false,
editable: false,
},
],
And at the end of my code I'm trying to add tool tip,
Ext.onReady(function(){
new Ext.ToolTip({
target: 'imgSourcePath',
html: 'A very simple tooltip'
});
new Ext.ToolTip({
target: 'folderId',
html: 'A very simple tooltip'
});
new Ext.ToolTip({
target: 'transformation',
html: 'A very simple tooltip'
});
Ext.QuickTips.init();
});
I tried qtip as well but that also not working.like,
{ fieldLabel: 'Source Folder Path', name: 'imgSourcePath', id:'imgSourcePath', qtip: 'This is tool tip' },
Please help me someone ...

Take a look on this issue to know how to put it on comboBox ExtJs 3.4 : Set tool tip for combo box
Hope this help.

ExtJS v3 - access data from grid panel inside a form panel

I have a GridPanel that I am using inside a Form.
When I submit the form, I have no problem grabbing the data from the form elements but cannot read/see the data that is placed inside the grid.
(Bascially, I am giving them an area to add email addresses in the grid).
I'm thinking I can just set the grid panel data as a hidden value in the form but that didn't work as I thought.
What direction should I take here so when someone submits the form I can see the main 'reason' field (which I can right now) and also each of the Email addresses that they are entering.
(I am submitting the form via a button that uses POST).
var projection_record = Ext.data.Record.create([
{ name: 'Email'}
]);
var projections_store = new Ext.data.Store({
reader: new Ext.data.ArrayReader({
idIndex: 0
}, projection_record)
});
var projections_grid = new Ext.grid.EditorGridPanel({
store: projections_store,
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'Email',
header: 'Approval Email',
sortable: false,
width: 250,
editor: new Ext.form.TextField({
valueField: 'displayText',
displayField: 'displayText'
})
},
{
xtype: 'actioncolumn',
header: "Delete",
width: 150,
items: [{
icon: 'images/delete.png',
handler: function(grid, rowIndex, colIndex) {
var rec = store.getAt(rowIndex);
alert("Delete " + rec.get('Email') + " ?");
}
//handler: function(grid, rowIndex, colindex) {
//var record = grid.getStore().getAt(rowIndex);
//var id = record.get("Email");
//window.location = '<% $base %>storage_approval_delete/' + id;
//}
}]
}
],
tbar: [{
text: 'Approvers',
icon: 'images/Add.png',
handler: function(){
var projection = projections_grid.getStore().recordType;
var p = new projection({
Email: ''
});
projections_grid.stopEditing();
projections_store.insert(0,p);
projections_grid.startEditing(0,0);
}
}],
autoHeight: true,
autoWidth: true,
trackMouseOver: true,
stripeRows: true
});
var simpleForm = new Ext.FormPanel ({
labelWidth: 175,
id: 'simpleForm',
url:'./manager_approvals',
method: 'POST',
frame:true,
title: 'Ada a New Project',
bodyStyle:'padding:5px 5px 0',
width: 850,
defaultType: 'textfield',
items: [
{
fieldLabel: 'Request Information',
name: 'Description',
xtype: 'textarea',
allowBlank: true,
anchor:'100%'
},
{
xtype: 'fieldset',
title: 'Approving Managers',
autoHeight: true,
autoWidth: true,
collapsible: false,
collapsed: false,
items: [projections_grid]
},
{
xtype: 'hidden',
name: 'hidden1',
value: projections_store
}
]
});

Hmmm.... I would seriously think about adding a comma separated field for a list of emails ....
If you are hell bent on letting them submit a form and edit a grid at the same time (good luck getting your users to understand what they need to do) what you need to do is on submit: lookup the store backing your grid, get the data values from the store records (iterate), extract the values you need, join with a comma, and finally either set a hidden field or just include as a parameter.
Good luck.

ExtJS 4.1 : issue in establishing a reference to an object

Good day everybody,
I have a recurrent problem when I work with ExtJS 4.1: I do a lot of effort every time I have to establish a reference to an object and often, when I call up a method on an object, I get an error like this:
Uncaught TypeError: Cannot call method 'destroy' of undefined
For instance, consider the following situation where I have a fieldset which contains two items: a fieldcontainer and a button.
My purpose is writing a proper handler function for the button, so that when I hit the button the fieldcontainer will be destroyed. To do that, I need to establish a correct reference to the fieldcontainer.
Here's my code:
xtype: 'fieldset',
id: 'product_fieldset',
title: 'Prodotti tempi e quantita',
defaultType: 'textfield',
layout: 'anchor',
items: [{
xtype: 'fieldcontainer',
layout: 'hbox',
defaultType: 'textfield',
defaults: {
labelAlign: 'top'
},
items: [{
xtype: 'combo',
name: 'product',
fieldLabel: 'Product',
forceSelection: true,
editable: false,
store: products,
queryMode: 'local',
displayField: 'name',
valueField: 'name',
allowBlank: false,
afterLabelTextTpl: required
},{
xtype: 'numberfield',
name: 'p_on_weight',
fieldLabel: '% on weight',
value: 0,
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'numberfield',
name: 'time',
fieldLabel: 'Time (minutes)',
value: 0,
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'numberfield',
name: 'ph',
fieldLabel: 'Ph',
minValue: 0,
allowBlank: false,
afterLabelTextTpl: required,
hideTrigger: true,
keyNavEnabled: false,
mouseWheelEnabled: false
},{
xtype: 'textareafield',
name: 'remarks',
fieldLabel: 'Remarks'
}]
},{
xtype: 'button',
text: 'Delete this product',
handler: function() {
proper_reference_to_fieldcontainer.destroy();
//need help for previous line
}
}]
Well, Can anyone suggest me a way to refer to fieldcontainer, possibly without using fieldcontainer's id ? (Sencha architects suggest not to use id to establish references).
Thanks in advance.
Enrico.

You can define the container as a standalone object:
var myFieldContainer = Ext.Create('Ext.form.FieldContainer', {
layout: 'hbox',
defaultType: 'textfield',
defaults: {
labelAlign: 'top'
},
items: [{
xtype: 'combo',
(...)
});
...and then use it in your button's configuration:
{
xtype: 'button',
text: 'Delete this product',
handler: function () {
myFieldContainer.destroy();
}
}

Use first define an id value for fieldcontainer,
xtype: 'fieldcontainer',
id: 'my_id',
layout: 'hbox',
Now use Ext.getCmp('my_id') to retrieve a reference to it.