We Keep Coding

Creating store instance in Extjs 2.3.0

I have a combobox and I want to create a new store instance of that combo.
I can see a store instance can be created by Ext.create('My.Store')
but this is not availabel in Extjs 2.3.0
I tried
var comb= new this.combobox1.store; // Gives error store is not a constructor
and
var comb= new this.combobox1.getStore(); // com is undefined here
Any ides.

I know this is a year late, but better late than never, since I came across it as unanswered, try this:
First create your store:
var myComboStore = Ext.create('Ext.data.Store', {
storeId:'myComboStore',
fields: ['name', 'value'],
data: [
{'name':'shelf1', 'value':'shelf1 val'},
{'name':'shelf2', 'value':'shelf2 val'},
{'name':'shelf3', 'value':'shelf3 val'},
{'name':'shelf4', 'value':'shelf4 val'}
]
});
Then in your combo config, assign the store. This panel (fp) is a simple form to hold the example combo.
var fp = {
xtype : 'form',
frame : true,
labelWidth : 110,
items:
{
xtype: 'combobox',
fieldLabel: 'My Combo',
displayField: 'name',
width: 320,
store: myComboStore, // ASSIGN STORE TO COMBO
queryMode: 'local',
typeAhead: true,
emptyText : '-none-',
listeners : {
//click events for item selection goes here
}
}
}
create a window for the panel to go in
new Ext.Window({
title : '',
layout : 'fit',
height : 180,
width : 320,
border : false,
items : fp
}).show();
Working Fiddle: https://fiddle.sencha.com/#fiddle/1cta

celldblclick does not fired if the cell contains HTML extjs 3.4.0

I have the following EditorGridPanel on extJS:
http://jsfiddle.net/VDFsq/1/
Ext.onReady(function () {
var myData = [[ '<SPAN STYLE=\"text-align:Left;font-family:Segoe UI;font-style:normal;font-weight:normal;font-size:12;color:#000000;\"><P STYLE=\"font-family:Arial;font-size:16;margin:0 0 0 0;\"><SPAN><SPAN>HTML </SPAN></SPAN><SPAN STYLE=\"font-weight:bold;color:#FF0000;\"><SPAN>FORMAT</SPAN></SPAN><SPAN><SPAN> TEST<BR />TEST</SPAN></SPAN></P></SPAN>', "lisa#simpsons.com", "555-111-1224"],
[ 'Bart', "bart#simpsons.com", "555-222-1234"],
[ 'Homer', "home#simpsons.com", "555-222-1244"],
[ 'Marge', "marge#simpsons.com", "555-222-1254"]];
var store = new Ext.data.SimpleStore({
fields:[ {
name: 'name'
},
{
name: 'email'
},
{
name: 'phone'
}],
data: myData
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: 'grid-container',
columns:[ {
header: 'Name',
dataIndex: 'name',
width:200
}
],
store: store,
frame: true,
height: 240,
width: 500,
enableColumnMove :false,
stripeRows: true,
enableHdMenu: false,
border: true,
autoScroll:true,
clicksToEdit: true,
title: 'HTML in Grid Cell',
iconCls: 'icon-grid',
sm: new Ext.grid.RowSelectionModel({
singleSelect: true
})
});
grid.on({
celldblclick: function() {alert(1);}
});
});
the problem is, when the gridCell contains HTML data (which is my situation) when you double click on the cell with html the grid does not fire the event celldblclick.
in my application I need to display that kind of html in the grid.
how can fix this problem? anyway to bubble the event from the html to the grid?
Thanks

It seems that there is some limits to dom tree deep inside your structure. I think it is not good idea to put html into grid - if you can unify it structure - may be templates would be more useful.
Try this instead of your HTML:
"<div ondblclick=\"alert('1!')\">1<div ondblclick=\"alert('2!')\">2<div ondblclick=\"alert('3!')\">3<div ondblclick=\"alert('4!')\">4</div>3</div>2</div>1</div>"
Event inheritance works fine in this HTML, but works only 2 levels deep in your EXt example.
NOTE: if you try
grid.on('rowdblclick', function(eventGrid, rowIndex, e) {
console.log('double click');
}, this);
you will not get problem (but, obviously, you can dblclick only rows in this way)

ExtJS 4.1.1a: Item in grid is deselected after record has been modified with set-method

Hy there,
I have a very basic example with a grid with only 1 item and a button which updates this entry with the set-method of the underlying record.
The problem is, that if the item is selected at the time the record gets updated by pressing the button, the selection gets removed and it's not possible to select it anymore afterwards.
Working example: http://jsfiddle.net/fu2Xq/2/
Ext.onReady(function() {
var personsGrid = Ext.create('Ext.grid.Panel', {
width: 150,
height: 100,
renderTo: Ext.getBody(),
store: Ext.create('Ext.data.Store', {
fields: [ 'name' ],
data: [{ name: 'Stephen' }]
}),
columns: [{ text: 'Name', dataIndex: 'name', flex: 1 }],
});
var txtField = Ext.create('Ext.form.field.Text', {
fieldLabel: 'New name',
labelWidth: 70,
width: 150,
value: 'Alex',
renderTo: Ext.getBody()
});
Ext.create('Ext.button.Button', {
text: 'Rename person',
width: 150,
renderTo: Ext.getBody(),
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
}
});
});
Seems like a bug to me because after reordering the name-column the selection reappears...
I'd really appreciate some comment on this!
Thanks
edit: reformated some code...

It's a bug in ExtJS 4.1.1 which seems to be solved in 4.1.3 and can be worked around by calling the refresh-method of the grid's view after updating the record:
http://jsfiddle.net/fu2Xq/7/
handler: function() {
var rec = personsGrid.getStore().getAt(0);
rec.set('name', txtField.getValue());
personsGrid.getView().refresh();
}
I got this answer from the Sencha forum:
http://www.sencha.com/forum/showthread.php?253287-Item-in-grid-is-deselected-after-record-has-been-modified-with-set-method&p=928197&viewfull=1#post928197

On headerclick event of column headers, old selections from grid view have remembered and after rendering sorted view these records are getting selected again.
While in case of rec.set(), Instead of datachanged, 'update' event of Ext.data.store is getting fired. But there is no implementation related to select old records as same as headerclick on 'update' event.
So you have to implemet selection of records on after rec.set().
Here is discussion about similar issue.

Column layout in EXTJS

I am new to ExtJs. I need to create an entry form in 2 columns using column layout.
My code is as follows:
Ext.onReady(function(){
var patientForm = new Ext.FormPanel({
renderTo: "patientCreation",
frame: true,
title: 'Search Criteria',
labelAlign: 'left',
labelStyle: 'font-weight:bold;',
labelWidth: 85,
width: 900,
items: [
{
layout:'column',
items:[
{ // column #1
columnWidth: .33,
layout: 'form',
items: [
{ xtype: 'textfield',
fieldLabel: 'FirstName',
name: 'firstName',
vtype : 'alpha',
allowBlank:false
},{
xtype: 'textfield',
fieldLabel: 'MiddleName',
name: 'middleName',
vtype : 'alpha'
}
] // close items for first column
}]
}]
});
var win = new Ext.Window({
layout:'form',
closable: false,
resizable: false,
plain: true,
border: false,
items: [patientForm]
});
win.show();
});
But when I run the code, I got h is undefined error. How to design a form in column layout? Is there any procedure, steps or links which give a clear idea?

I have run the same code with ExtJs 3.2.2 and got a similar error. But when I removed renderTo: "patientCreation"
code worked:
That part is not necessary 'cause you are placing the form in a the window.

I do not know anything about ExtJS 3. If you are using ExtJS 4, then you have specified layout config at wrong place. You have specified it inside items config, it should not be inside items config.
Layout can be specified as follows in ExtJS 4:
Ext.define('your_domain_name.viewName', {
extend : 'Ext.panel.Panel',
alias : 'widget.any_name_you_want',
layout : 'column',
initComponent : function() {
this.items = [
// all items inside form/panel will go here
];
this.callParent(arguments);
}
});
You can get sample code about all the panels here

try applying renderTo config to window instead of form
check example

ExtJS ComboBox not displaying elements

I am having trouble getting a ComboBox in ExtJS to display the dropdown items. I originally was using an XmlStore to load the data dynamically, but to make sure that wasn't the problem, I took an existing ComboBox that uses a simple ArrayStore (and currently works elsewhere in my application) to see if it would work, still with no luck.
When using Chrome's developer tools, when I click on the ComboBox element, I get ext-all-debug.js:41166 - Uncaught TypeError: Cannot call method 'getStyle' of undefined and nothing shows up for a dropdown.
Here is my code:
EventForm = Ext.extend(Ext.form.FormPanel, {
constructor: function(config) {
config = Ext.apply({
items: [
{
layout: 'column',
xtype: 'container',
items: [
{
layout: 'form',
xtype: 'container',
columnWidth: 0.5,
items: [
{
fieldLabel: 'My Combo Box'
name: 'mycombobox',
xtype: 'combo',
store: new Ext.data.ArrayStore({
fields: ['size'],
data: [
['50'],
['100'],
['150'],
['200']
]
}),
displayField: 'size',
valueField: 'size',
forceSelection: true,
editable: false,
triggerAction: 'all',
mode: 'local',
listWidth: 60,
width: 60
}
]
}, {
// another column here similar to above
}
]
}
]
}, config);
EventForm.superclass.constructor(config);
}
});

You are not calling the constructor of EventForm's superclass correctly. Change the last line of your constructor function to read:
EventForm.superclass.constructor.call(this, config);

Your data array must contain a list of objects, and the keys you provided by fields must be the keys your data refers to in those objects. The correct syntax for your data array could be:
data: [
{'size':'50'},
{'size':'100'},
{'size':'150'},
{'size':'200'}
]
(could be, because I have no chance right now to verify)