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"));
});
Related
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'
}
}, {
...
}]
});
Let's start off with my store:
var newstore = Ext.create('Ext.data.Store', {
fields: ['id', 'table_name', 'name', 'description']
proxy: {
type: 'memory'
}
});
I have some example data here, which comes from a dynamic json response:
{
"elements":[
{
"element":{
"name":"Element Name", <---- This is the value I need**
"id":"Element ID",
"attributes":[
{
"attrname":"id",
"attrvalue":"This is the ID"
},
{
"attrname":"name",
"attrvalue":"This is the name"
},
{
"attrname":"description",
"attrvalue":"This is the description"
},
{
"attrname":"table_name",
"attrvalue":"This is the table"
}
]
}
}
}
And I decode my json here, which places it neatly into my store:
for( var i=0; i < decoded.elements.length; i++ ) {
var element = decoded.elements[ i ].element;
var element_name = element.name; <---- THIS retrieves that value I need
var model = {};
// loop over attributes
for( var x=0; x < element.attributes.length; x++ ) {
var attribute = element.attributes[ x ];
model[ attribute.attrname ] = attribute.attrvalue;
}
// implicitly cast data as Model
newstore.add( model );
}
And lastly, my grid - ResponseList.js:
var grid = Ext.define('MyApp.view.ResponseList' ,{
initComponent: function(columns) {
//config
this.columns = [
{header: 'Element Name', dataIndex: 'What goes here ???'},
{header: 'ID', dataIndex: 'id'},
{header: 'View Name', dataIndex: 'name'},
{header: 'Description', dataIndex: 'description'},
{header: 'Table Name', dataIndex: 'table_name'},
etc...
My question is, how do I place that first name value, Element Name into the first row of my grid? The name name is already taken for the attributes.attrname field, so I'm not sure how to proceed. Everything except Element Name displays just fine.
[Edit]: This is how I want my grid to look:
Any help is appreciated thanks!
In your fields in the store or in a model you can specify mapping which allows for nested json data:
var model = Ext.define('myModel', {
extend: 'Ext.data.Model',
fields: [{
name: 'id',
mapping: 'element.id',
type: 'auto'
}],
proxy: {
type: 'ajax',
url: 'data.json',
reader: {
type: 'json',
root: 'elements',
successProperty: ''
}
}
});
var store = Ext.create('Ext.data.Store', {
model: model,
autoLoad: true,
listeners: {
load: function() {
console.log(store);
}
}
});
var grid = Ext.create('Ext.grid.Panel', {
renderTo:Ext.getBody(),
store:store,
columns: {
defaults: {},
items: [{
header: "Id",
dataIndex: "id",
hidden: false
}]
}
});
Here is a fiddle demonstrating working code.
You can probably use the renderer on the grid to get the value you actually need.
{header: 'Element Name', dataIndex: 'What goes here ???',
renderer: function(value, metaData, record, row, col, store, gridView){
return record.someAttribute;
}
},
I'm not sure of the structure of your record, but I think you can guess how to go on from here.
Also, I don't think all that manual decoding is necessary, I can't figure out how you want your grid to look, but if you post a sketch of it or something maybe we can make all that decoding look cleaner.
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 have list of items, while click the particular list item it will show the details of that item.. i have problem, for the first item click it shows the correct result but while click the next item i am getting that particular item details but it showing the old item details.this is my code
RadMobApp.views.patPanel = Ext.extend(Ext.Panel, {
id: 'pathView',
layout : 'fit',
initComponent: function() {
this.titleTxtc = new Ext.Component({
cls : 'top_title_text',
html: 'History'
});
this.backButton = new Ext.Button({
text: 'back',
height:15,
ui:'back',
handler: function () {
controller.showPanel();
},
scope: this
});
this.titleBar = new Ext.Toolbar({
dock: 'top',
cls: "top_tool_bar2",
height: 42,
items: [this.backButton, {xtype: 'spacer'}, this.titleTxtc, {xtype: 'spacer'}]
});
var tabs = new Ext.TabPanel({
xtype:"tabpanel",
id: 'tabpanel',
renderTo: Ext.getBody(),
width:400,
height: 150,
activeTab: 0,
layoutOnTabChange: true,
tabBar: {
cls: "top_tab_panel1",
height: 42,
style: 'padding-left:2px;'
},
items: [{
xtype: 'Panel1',
id: 'panel1',
title: 'Panel1',
height: 100
},{
xtype: 'Panel2',
id: 'panel2',
title: 'Panel2',
height: 100
},{
xtype: 'panel3',
id: 'panel3',
title: 'Panel3',
height: 100,
listeners: {
beforeshow: function(p) {
scope: this;
/* var tabPanel = p.ownerCt;
var tabEl = tabPanel.getTabEl(prmPanel);
Ext.fly(tabEl).child('span.x-tab-strip-text',
true).qtip = 'Tab is now enabled';
Ext.getCmp('panel2').enable(); */
}
}
}]
});
this.dockedItems = [this.titleBar];
this.items = [tabs];
RadMobApp.views.patPanel.superclass.initComponent.call(this);
}
});
how to clear the tab panel? Thanks in advance
try putting the config option
remoteFilter : true
to your store from which you are loading the data to the list.ie
new Ext.data.Store({
model: 'Test',
sortOnLoad: true,
remoteFilter : true,
autoLoad: true,
getGroupString : function(record) {
return record.get('FullName_FirstLast')[0];
},
proxy: {
type: 'ajax',
url : testUrl,
reader: {
type: 'json',
root: 'test'
}
}
})
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.