can we bind static json store with radiogroup in ext?
Radiogroups and Stores are not directly related in ExtJS. It's easy to populate form values from a store, but using a store to actually create the fields requires a slight work around. Specifically, you would have to do something like this (assuming Ext 3.3.1), and that your JsonStore is already set up...
var store = <your predefined store, with records>;
var itemsInGroup = [];
store.each( function(record) {
itemsInGroup.push( {
boxLabel: record.someLabel,
name: record.someName,
inputValue: record.someValue
});
});
var myGroup = {
xtype: 'radiogroup',
fieldLabel: 'My Dynamic Radiogroup',
items: itemsInGroup
};
You can use dataView for this operation. Depending on store value you can add radio buttons.
Suppose your store has 5 items than 5 radio buttons will be displayed.
var tpl = new Ext.XTemplate('<tpl for=".">', '<div class="thumb-wrap" style="width:210px; float: left;">', '<label >', '<tpl>', '<input type=radioField value={fieldId} >', '</tpl>', '{dataViewFieldName}', '</label>', '</div>', '</tpl>', {
});
var me = this;
this.items = new Ext.DataView({
store: this.store,
tpl: tpl,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
autoScroll: true
});
this.callParent();
},
Related
I have an Ext ComboBox where the user should be able to choose no value. ExtJS doen't support that out of the box.
What I've tried:
use a second trigger that clears the value
Works but is not very usable. I want a better solution.
add "fake" null item to store:
While this does kind of work I would have to modify the model for that to allow null value for id. And this looks more like a hack.
set custom tpl like
'<ul class="x-list-plain">',
'<li role="option" unselectable="on" class="x-boundlist">(no selection)</li>',
'<tpl for=".">',
'<li role="option" unselectable="on" class="x-boundlist-item">{name}</li>',
'</tpl>',
'</ul>'
But now it's getting really difficult, now idea how to get that working properly.
jsfiddle:
http://jsfiddle.net/q5e3J/1/
with custom tpl: http://jsfiddle.net/q5e3J/2/
Please refer this link How to add an empty item to ExtJS combobox?
Update: jsfiddle with that solution implemented: http://jsfiddle.net/q5e3J/3/
var combo = Ext.create('Ext.form.field.ComboBox', {
renderTo: Ext.getBody(),
displayField: 'name',
valueField: 'abbr',
value: 'AL',
store: Ext.create('Ext.data.Store', {
model: 'State',
data: states
}),
queryMode: 'local',
editable: false,
emptyText: 'No Selection',
listConfig: {
tpl: '<div class="my-boundlist-item-menu">No Selection</div>'
+ '<tpl for=".">'
+ '<div class="x-boundlist-item">{name}</div></tpl>',
listeners: {
el: {
delegate: '.my-boundlist-item-menu',
click: function() {
combo.clearValue();
}
}
}
}
});
You could use the "change" listener on the combo config and check for null values:
change: function() {
if (this.getValue() === null) {
// Set default Value here
}
};
I wander if there is any ExtJS way that I can load store with data and after it is loaded I can create in master panel other my components (custom panel) to show that data in my specific way?
I want display data from store in panel with my custom components
You have two options:
If you only need to display the data then DataView is tailored for this task.
If your really need a component (ie, something that encapsulates user interaction and not just display), then you need to create this component and as your store loads create a component per record and add it to your master panel.
To copy the docs example of dataview (option 1):
Ext.define('Image', {
extend: 'Ext.data.Model',
fields: [
{ name:'src', type:'string' },
{ name:'caption', type:'string' }
]
});
Ext.create('Ext.data.Store', {
id:'imagesStore',
model: 'Image',
data: [
{ src:'http://www.sencha.com/img/20110215-feat-drawing.png', caption:'Drawing & Charts' },
{ src:'http://www.sencha.com/img/20110215-feat-data.png', caption:'Advanced Data' },
{ src:'http://www.sencha.com/img/20110215-feat-html5.png', caption:'Overhauled Theme' },
{ src:'http://www.sencha.com/img/20110215-feat-perf.png', caption:'Performance Tuned' }
]
});
var imageTpl = new Ext.XTemplate(
'<tpl for=".">',
'<div style="margin-bottom: 10px;" class="thumb-wrap">',
'<img src="{src}" />',
'<br/><span>{caption}</span>',
'</div>',
'</tpl>'
);
Ext.create('Ext.view.View', {
store: Ext.data.StoreManager.lookup('imagesStore'),
tpl: imageTpl,
itemSelector: 'div.thumb-wrap',
emptyText: 'No images available',
renderTo: Ext.getBody()
});
I am having trouble adding a listener to different elements generated from an XTemplate.
var data = {
users: [
{ id: 1, name: 'Ed Spencer' },
{ id: 2, name: 'Abe Elias'}
]
};
var store = new Ext.data.JsonStore({
autoLoad: true,
data : data,
root: 'users',
fields: [
{name: 'id', type: 'int'},
{name: 'name', type: 'string'}
]
});
var template = new Ext.XTemplate(
'<tpl for=".">',
'<div class="holder">',
'<div class="notclicked">foobar</div>',
'<div class="name">{name}</div>',
'<div class="id">{id}</div>',
'</div>',
'</tpl>'
);
var newPanel = new Ext.Panel({
title: "test",
items: new Ext.DataView({
store: store,
tpl: template,
itemSelector: 'div.holder',
emptyText: 'No foo to display'
})
});
newPanel.render('targetDiv');
What I would like do is make a 'click' listener for clicks on the "name" div and a different one for the "id" div. But so far I can only make a 'click' listener for the who "holder" div. As an extention, I'd like the div 'notclicked'... to not respond to clicks. I've been racking against this a while. Can anyone give me a push in the right direction?
I'm using 3.4. I've put a fiddle on jsfiddle: http://jsfiddle.net/tatagatha/7SfCf/6/
use 'delegate' with a tight selector
http://www.sencha.com/blog/event-delegation-in-sencha-touch
Well looks like 3.4 had no delegation of events yet.
So you would have to manually check which node was clicked:
here is your fiddle back with selction working.
http://jsfiddle.net/dbrin/R29U5/
This goes on dataview:
listeners: {
click: {
fn: this.onClick,
scope: this
}
},
onClick: function(event, item, options) {
console.log(arguments);
if (item.className === "id") {
console.log("Id clicked: " + item.innerHTML);
alert("ID clicked: " + item.innerHTML);
}
}
Ext.define('GB.view.DigestList',{
extend: 'Ext.panel.Panel',
alias:'widget.digestlist',
items:[ {
xtype:'dataview',
store: 'GB.store.Digests',
tpl: new Ext.XTemplate(
'<tpl for=".">',
'<div class="container">',
'{name}',
'<div class="davidfun"></div>',
'</div>',
'</tpl>'
),
listeners: {
viewready: function(){
var home_d = Ext.create('GB.view.MyOwnDigest');
home_d.render(Ext.query('.davidfun')[0]);
// home_d.render(Ext.getBody()); <- it'll work fine with this line
},
}
}],
bind: function(record, store) {
this.getComponent(0).bindStore(record);
}
});
Ext.define('GB.store.Digests', {
extend:'Ext.data.Store',
model: 'GB.model.Digest',
data:[
{'name':'name111'},
{'name':'name222'}
]
});
Does someone know why can't i get div class which is "davidfun" that in Xtemplate by Ext.query('.davidfun')[0],
it'll always show 'undefined', thanks for your response first:)
Code UPDATE:
Problem resolved!
You can try the "viewready" event of the dataview.
See my example http://jsfiddle.net/2huvt/
I have the following JS:
http://monobin.com/__m1c171c4e
and the following code:
Code:
var tpl = new Ext.XTemplate(
'<tpl for=".">',
'<div class="thumb-wrap" id="{Name}">',
'<div class="thumb"><img src="{ImageMedium}" title="{Name}"></div>',
'<span class="x-editable">{Name}</span></div>',
'</tpl>',
'<div class="x-clear"></div>'
);
var store = new Ext.data.ArrayStore({
fields: [{ name: 'name' }, { name: 'ImageMedium'}],
data: res.data.SimilarArtists
});
var panel = new Ext.Panel({
frame: true,
width: 535,
autoHeight: true,
collapsible: true,
layout: 'fit',
title: 'Simple DataView (0 items selected)',
items: new Ext.DataView({
store: store,
tpl: tpl,
autoHeight: true,
multiSelect: true,
overClass: 'x-view-over',
itemSelector: 'div.thumb-wrap',
emptyText: 'No images to display',
prepareData: function (data) {
data.Name = Ext.util.Format.ellipsis(data.Name, 15);
return data;
},
plugins: [
new Ext.DataView.DragSelector(),
new Ext.DataView.LabelEditor({ dataIndex: 'name' })
],
listeners: {
selectionchange: {
fn: function (dv, nodes) {
}
}
}
})
});
So binding the DataView to the child array of res.data.SimilarArtists
But nothing seems to happen?
prepareData doesnt even get called?
What am i doing wrong?
w://
The data structure you've linked to is JSON, not array data. Try switching to a JsonStore instead. Note that a JsonStore is preconfigured with a JsonReader and an HttpProxy (remote data source) and is intended for loading the data from a url. If you need JSON loaded from local data, then you'll have to create a generic store with a JsonReader and MemoryProxy.