I have a simple combo box with some values in it, populated by a json store. The problem is that when I click the drop down and select a value, all the other values disappear so that I cannot select another value. Heres my code:
Ext.onReady(function() {
var dropDownStore = new Ext.data.JsonStore({
autoDestroy: false,
fields: ['graph', 'displayText'],
data: [{
graph: 'all',
displayText: 'All Posts'
},
{
graph: 'other',
displayText: 'Other Posts'
}
],
autoLoad: false
});
var dropDown = new Ext.form.ComboBox({
disable: false,
mode: 'local',
store: dropDownStore,
valueField: 'graph',
displayField: 'displayText',
editable: false,
listeners: {
select: function(combo, record) {
//alert(combo.getValue());
}
}
});
});
Try adding triggerAction:'all' to your combo config. See my answer to a similar question for more details.
Related
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [
{name:'type', type:'String'}
]
});
var store = Ext.create('Ext.data.ArrayStore', {
model: 'Form',
autoLoad: true,
proxy: {
type: 'ajax',
url: '/test.json',
reader: {
type : 'json',
root: 'types'
}
}
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout : 'auto',
autoScroll : true,
items: [{
xtype:'selectcombo',
queryMode:'local',
emptyText: 'Select Condition',
store:store,
displayField: 'type',
valueField: 'type',
width : 200,
typeAhead : true
}],
});
When this loads, the selectcombo is empty, nothing gets loaded, i have searched through many sites, and can't find anything to help. Any suggestions would be great
The xtype you look for is combo, the store type is JsonStore because the ArrayStore will not interpret the json from the types root as you might expect. I can not simulate the ajax request here though.
Ext.onReady(function() {
Ext.define('Form', {
extend: 'Ext.data.Model',
fields: [{
name: 'type',
type: 'String'
}]
});
var store = Ext.create('Ext.data.Store', {
model: 'Form',
data: [{
type: 'Aaaaaaa'
}, {
type: 'Bbbbbb'
}, {
type: 'Ccccccccccc'
}, {
type: 'Ddddddd'
}]
});
Ext.define('DForms', {
extend: 'Ext.panel.Panel',
bodyPadding: 12,
layout: 'auto',
autoScroll: true,
items: [{
xtype: 'combo',
queryMode: 'local',
emptyText: 'Select Condition',
store: store,
displayField: 'type',
valueField: 'type',
width: 200,
typeAhead: true
}],
});
Ext.create('DForms', {
renderTo: Ext.getBody()
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/ext-all-debug.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/extjs/4.2.1/resources/css/ext-all.css" />
I think type in fields is case-sensitive. So try
fields :[{name : 'type', type : 'string'}]
If still not working, as Tejas1991 pointed out check the content of your json.
I have a grid that is generated dynamically
I build the columns array and store, then call reconfigure on my grid
Next I create a filter array. Now filters have to be applied to the columns in my grid.
But the filters are not reflected in my grid. How can ths be achieved?
myView.js
Ext.define('myView.view.myView', {
extend: 'Ext.grid.Panel',
plugins: 'gridfilters',
store: 'myStore.store.myStore',
pageSize:10,
dockedItems: [{
xtype: 'pagingtoolbar',
store: 'WhiskerPlot.store.settingStore', // same store GridPanel is using
dock: 'bottom',
displayInfo: true
}],
filters :[]
});
myController.js
var colFilters = [];
colFilters.push({
type : 'list',
dataIndex : dummyDataIndex,
options : [small,large]
});
var filters = {
ftype : 'filters',
filters : colFilters
};
var gridview = Ext.ComponentQuery.query('myView')[0];
gridview.reconfigure(store,columnarr);
gridview.filters.addFilters(filters);
Add the filters to the column array itself.
Copied from: Filters Doc
var grid = Ext.create('Ext.grid.Panel', {
store: {
url: 'path/to/data'
},
plugins: 'gridfilters',
columns: [{
dataIndex: 'id',
text: 'Id',
filter: 'number'
}, {
dataIndex: 'name'
text: 'Name',
filter: {
type: 'string',
value: 'Ben'
}
}, {
...
}]
});
I've got a grid getting data through a json store. I want to display the total number of rows in the grid. The problem is that the store.count() function is running before the store loads so it is returning 0. How can I get my count function to run only once the store has loaded? I'm working in MVC, here is my app.js which has my counting logic in it.
Thank you for any help
Ext.application({
name: 'AM',
appFolder: 'app',
controllers: [
'Users'
],
launch: function(){
Ext.state.Manager.setProvider(Ext.create('Ext.state.CookieProvider'));
Ext.create('Ext.container.Viewport', {
resizable: 'true',
forceFit: 'true',
layout: 'fit',
items:[{
xtype: 'userpanel',
}]
});
var port = Ext.ComponentQuery.query('viewport')[0],
panel = port.down('userpanel'),
grid = panel.down('userlist'),
label = panel.down('label');
var count = grid.store.getCount();
var labelText = "Number of people in list: " + count;
label.setText(labelText);
}
});
store code:
Ext.define('AM.store.Users', {
extend: 'Ext.data.Store',
model: 'AM.model.User',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'queue',
successProperty: 'success'
}
},
sortOnLoad: true,
//autoLoad: true,
sorters: [
{
property: 'PreReq',
direction: 'DESC'
},
{
property: 'Major1',
direction: 'ASC'
},
{
property: 'UnitsCompleted',
direction: 'DESC'
}
],
listeners:{
onload: function(){
var port = button.up('viewport'),
grid = port.down('userlist'),
panel = port.down('userpanel'),
label = panel.down('label'),
count = grid.store.getCount(),
labelText = "Number of people in list: " + count;
label.setText(labelText);
},
scope: this
}
});
grid code:
Ext.define('AM.view.user.List' , {
extend: 'Ext.grid.Panel',
alias: 'widget.userlist',
store: 'Users',
height: 'auto',
width: 'auto',
//resizable: 'true',
features:[{
ftype: 'grouping'
}],
autoFill: 'true',
layout: 'fit',
autoScroll: 'true',
initComponent: function() {
function renderTip(value, metaData, record, rowIdx, colIdx, store) {
metaData.tdAttr = 'data-qtip="' + value + '"';
return value;
};
var dateRender = Ext.util.Format.dateRenderer('m/d/Y');
this.columns=[
//code for all my columns
]
];
this.callParent(arguments);
}
});
Try putting a listener on the store then listen for the onload event get the count and update the field that way. Though there are many ways to do this that is just one.
But in the example above you never load the store you just create it, which is why you see zero.
figured it out, needed to add a listener for the "load" event, not "onLoad". Code below...
Ext.define('APP.store.Store', {
extend: 'Ext.data.Store',
model: 'APP.model.Model',
autoLoad: true,
autoSync: true,
purgePageCount: 0,
proxy: {
type: 'rest',
url: 'json.php',
reader: {
type: 'json',
root: 'users',
successProperty: 'success'
}
},
sortOnLoad:true,
sorters: [{
property: 'last',
direction: 'ASC'
}],
listeners: {
load:{
fn:function(){
var label = Ext.ComponentQuery.query('#countlabel')[0];
label.setText(this.count()+ ' Total Participants);
}
}
}
});
I'm trying to use Sencha Touch 2 to load a local json file into a dataview.
When checking with Firebug - the file is being loaded by Sencha, but it is not being shown for some reason.
any ideas why?
Here is my code (the HTML is the basic Sencha html):
Ext.require([
'Ext.Panel',
'Ext.tab.Panel',
'Ext.Ajax'
]);
new Ext.application({
name: 'MyApp',
useLoadMask: true,
launch: function () {
Ext.regModel('City', {
fields: [
{name:'ID', type:'string'},
{name:'Name', type:'string'}
]
});
var CitiesStore = new Ext.create('Ext.data.Store',{
autoLoad: true,
storeId: 'CitiesStore',
model: 'City',
proxy: {
type: 'ajax', // ajax is for same domain, jsonp for cross-domain
url: 'cities.json',
reader: {
type: 'json',
root: 'cities'
}
}
});
Ext.create('Ext.TabPanel',{
fullscreen: true,
tabBarPosition: 'bottom',
scrollable: true,
items: [
{
title: 'Home',
iconCls: 'home',
html: 'Welcome to my app',
style: 'text-align: center;'
},
{
title: 'Search',
iconCls: 'search',
items: [
Ext.create('Ext.DataView', {
store: 'CitiesStore',
itemConfig: {
tpl: '<h2>{Name}</h2>'
}
})
]
},
{
xtype: 'toolbar',
title: 'My App',
dock: 'top'
}
]
}).setActiveItem(1); // this is set for debugging only
}
});
any the json is dead simple
{"cities":[{"ID":1,"Name":"new york"},{"ID":2,"Name":"las vegas"},{"ID":3,"Name":"los angeles"}]}
Many thanks!
I have had issues with lists or dataviews not showing unless the parent container had a width set to a value or a layout set to 'fit'. In case it makes any difference, try:
title: 'Search',
iconCls: 'search',
layout: 'fit',
Having had a very quick glance... Few things - but firstly your reference to the store is incorrect.
In your DataView you should don't need the quotes:
store: CitiesStore,
Also you don't need the new keyword on the store as you're using Ext.Create.
This should get you a bit further at least.
are you using Firefox? Firefox and IE sometimes make problems when viewing
ply use Chrome or Safari.
I have a JSON store:
var jsonstore = new Ext.data.ArrayStore({
fields: ['bla', 'blubb'],
data: [ ['bla', 'blubb'],
['blabla', 'blublu'],
['blass', 'hallo'],
['bam', 'guckt'] ]
});
and an extjs listview:
....
,{
xtype: 'listview',
name: 'abrufliste',
store: jsonstore,
id:"ladebereich",
multiSelect: false,
emptyText: 'nix da',
reserveScrollOffset: true,
columns: [ { header: 'Name',
width: .5,
dataIndex: 'NAME' }
....
and a click event:
Ext.ComponentMgr.get('ladebereich').on("click",function (sthis,index,node,e ){
alert("node: "+node.childNodes[0].childNodes[0].innerHTML);});
I want to get the clicked node's value.
I do get the value with
node.childNodes[0].childNodes[0].innerHTML
, however thats a crappy solution.
I want to get the clicked Element from my jsonstore,
any suggestions?
Another way is to add a listener to your listview to respond to any click events on the listview:
,{
xtype: 'listview',
name: 'abrufliste',
store: jsonstore,
id:"ladebereich",
multiSelect: false,
emptyText: 'nix da',
reserveScrollOffset: true,
listeners:
{
click: function(object, selectedIndex, node, event) {
// Get the name corresponding to the selected row.
var rowName = object.store.getAt(selectedIndex).get("Name");
}
},
columns: [ { header: 'Name',
width: .5,
dataIndex: 'NAME' }
it works with
Ext.ComponentMgr.get('ladebereich').on("click",function (sthis,index,node,e ){
var rec = jsonstore.getAt(index);
alert(rec.get("NAME"));
});