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
Related
I'm trying to implement a tpl within a displayfield to display a list of data sent to the server from a textarea.
The same data is displayed in a grid with rowexpander plugin (display values in XTemplate like textarea format)
Fiddle: https://fiddle.sencha.com/#fiddle/14sf
I tried something like this:
FIDDLE: https://fiddle.sencha.com/#fiddle/14t7
without sucess...
I tried every way I found to render a tpl unsuccessfully.
Display has a config tpl but it seems not work in my case...
I appreciate suggestions for resolving this issue
The displayfield also has renderer function. You can use it as in your grid:
//var is just for illustration of the issue
var vegetables_types = 'potatos\ncarrots\npumpkins';
Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
width: 450,
height: 200,
bodyPadding: 10,
title: 'Template',
items: [{
xtype: 'displayfield',
fieldLabel: 'TPL',
name: 'vegetables_types',
renderer: function(value, field) {
this.rndTpl = this.rndTpl || new Ext.XTemplate('<div><div>' + '<b>Vegetables: </b><ul><li>{[values.vegetables_types.replace(/\\n/g, "<li/>")]}</li><ul>' + '</div></div>');
return this.rndTpl.apply({
vegetables_types: value
});
},
listeners: {
render: function(field, eOpts) {
field.setValue('potatos\ncarrots\npumpkins')
}
}
}],
});
https://fiddle.sencha.com/#fiddle/14il
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.
I got a extjs 4 combobox within a form bound to a model. I am binding data from grid to combo using form.loadRecord(record). The combobox is showing the valueField coming from the model assigned to the form instead of the displayField. The store of the combobox is preloaded. How can I achieve that the combobox shows the displayValue loading a record in the form?
{xtype:'combobox',
fieldLabel: 'category',
name: 'categorySelId',
store: 'Categories',
queryMode: 'local',
displayField: 'label',
valueField: 'id',
anchor:'96%',
loadMask: true,
typeAhead: true,
forceselection: true,
valueNotFoundText: 'Nothing found'}
The store is already used in the grid to show the column category
{ header: 'Category', dataIndex: 'categorySelectedId', flex:5,
renderer: function(value,metaData,record) {
if(value) {
var Categories = Ext.getStore('Categories');
var catRecord = Categories.findRecord('id', value);
return catRecord ? catRecord.get('label'): record.get('categorySelected');
} else return "";
}
},
Thx for your help!
The problem was that I have not had configured the correct types in the model. Setting the right type in the model solved the problem. Thx sha for helping!
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
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)