How do I access my treepanel from an event handler inside of an Ext.tree.Panel ?
The following itemClick code does not work. I have tried going both 'up' and 'down'.
Ext.create('Ext.tree.Panel', {
title: 'Example Tree',
width: 200,
height: 450,
store: store,
listeners: {
itemclick: function(dv, record, item, index, e) {
var me = this;
var panel = me.up('treepanel');
var rn = panel.getRootNode(); //panel undefined :(
}
}
}
However if I have a button in a toolbar it works fine :
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
items: [{
text: 'Search',
handler: function () {
var me = this;
var panel = me.up('treepanel');
var rn = panel.getRootNode(); // :)
}
}]
}]
Both these examples are illustrated in this fiddle.
This is how scope works in ExtJS(To be more specific, in Javascript). In the first example, 'this'(me) it self is treepanel. Try following
`listeners: {
itemclick: function(dv, record, item, index, e) {
//var me = this;
//var panel = me.up('treepanel');
var panel = this; //'this' is treepanel
var rn = panel.getRootNode();
}
}`
Coming to the second example, if you observe the config pattern, it is a shortcut pattern to create a button inside the toolbar, hence 'this' becomes the button and you can get tree by component query.
As you are inside the panel Bala's approach should work. If it doesn't try like below. The first parameter of the itemclick function is the view. You can get the panel from it.
listeners: {
itemclick: function(dv, record, item, index, e) {
var panel = dv.up('treepanel');
var rn = panel.getRootNode();
}
}
Related
lets say I have object
var obj = {
xtype: 'panel',
title: 'other panel'
}
And I want to get dynamic panel from it.
I want something like this:
var obj = {
xtype: 'panel',
title: 'other panel'
}
var panel = Ext.create(obj); //not work of course
and then bind event
panel.on('added', function(){console.log('hello world'});
how It possible?
Try using Ext.widget instead, like:
var panel = Ext.widget(obj.xtype, obj);
I am very new to Sencha and I am trying to get a button under a DataView in a Panel. I have tried different scenario's.
The View
Ext.define('MyApp.view.Profile', {
extend : 'Ext.Panel',
xtype : 'profileview',
requires : ['MyApp.store.UserStore', 'Ext.List', 'Ext.DataView', 'Ext.data.Store'],
initialize : function() {
var me = this;
var record = 1;
//Create the instance of the store and load it
var userStore = Ext.create('MyApp.store.UserStore');
userStore.load();
//Create the dataview
var view = Ext.create('Ext.DataView', {
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
//Add the dataview to the panel
me.add(view);
/**
var button = Ext.create('Ext.Button', {
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
});
*/
//me.add(button);
},
config : {
title : 'Profiel',
iconCls : 'user3',
scrollable : true,
styleHtmlContent : true,
items : [{
xtype : 'button',
text : 'Edit',
handler : function() {
Ext.Msg.alert('You clicked the button');
}
}]
}
});
The above view shows only the button but NOT the Dataview. I needed to add
layout : 'fit'
to the config to make it show DataView. But in combination with the button it makes the button fullscreen and the dataview is not shown anymore (???).
I tried both scenario's where I add a Button as config item and by using the handler.
How can I get the button below the dataview ??
Thanks for your help.
Don't use layout fit, it's made to fit one component in your canvas. I'd use a vbox layout. Which automatically puts items vetically under each other.
Try this:
layout: {
type: 'vbox',
align: 'stretch' //this tells to take the full width
}
Flex your dataview
var view = Ext.create('Ext.DataView', {
flex: 1, //Use the remaining space.
store : userStore,
itemTpl : ['<h1>Mijn Profiel</h1>', '<h2>{USERNAME}</h2>', '<p>{EMAIL}</p><br/>', '<img src="http://www.MyApp.nl/{AVATAR_PATH}" />', '<br/>'].join()
});
I am getting problem that how to implement search field on tree store getting data from the server in sencha touch.Any working code will be appreciated.
In Search field You can use key up event and filter a store as type charterer match to store and show filter data in list and on select on item in list you hide list as bellow done
{
xtype: 'searchfield',
name : 'Name',
label: 'Name: ',
id : 'Name',
record:'Details',
placeHolder: 'Name',
listeners: {
focus: function( field, e, eOpts ){
Ext.getCmp('FilterDropDown').show();
},
keyup: function(field) {
var value = field.getValue();
var Store = Ext.getStore('Details');
var FilterStore = Ext.getStore('FilterDetails');
FilterStore.removeAll();
count=0;
var thisRegEx = new RegExp(value, 'i');
for(cnt=0;cnt<Store.getCount();cnt++){
if(thisRegEx.test(Store.data.items[cnt].data.name)){
FilterStore.add({
'id':Store.data.items[cnt].data.id,
'name': Store.data.items[cnt].data.name,
'email': Store.data.items[cnt].data.email
});
}
}
}
}
},
{
xtype:'FilterList',
id: 'FilterDropDown',
height:200,
hidden : true,
listeners: {
itemtap: function( field, index, target, record, e, eOpts ){
Ext.getCmp('Name').setValue(record.data.name);
Ext.getCmp('Email').setValue(record.data.email);
Ext.getCmp('Mobile').setValue(record.data.mobileno);
Ext.getCmp('FilderDropDown').hide();
}
}
},
xtype FilterList code is
Ext.define('appname.view.FilterList', {
extend: 'Ext.dataview.List',
xtype: 'FilterList',
require: ['FilterDetails'],
config:{
store: 'FilterDetails',
scrollable: true,
cls: 'drop_down_list',
ui: 'round',
itemTpl: '<div>{name}</div>'
}
});
It will help you :)
Assuming the data is already in the store when you search this isn't too difficult to implement using the methods referenced by speznaz.
In your view have a xtype "searchfield" or "textfield".
{
xtype: "searchfield",
}
In the controller bind a "keyup" event to this field.
refs: {
searchfield: 'mypanel searchfield'
},
control: {
searchfield: {
keyup: 'doSearch'
}
}
For your function to search something like:
doSearch: function(searchfield, e, eOpts) {
var searchterm = searchfield.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.find(fieldName, value, [startIndex], [anyMatch], [caseSensitive], [exactMatch] );
}
This is assuming you want to search on keyup. You may want to use the "action" event instead.
Assuming you already have data in the store.
Here is the working code:
{
xtype: "searchfield",
name:'searchName'
}
In the controller bind a "keyup" event to this field.
refs: {
searchName: 'searchfield[name=searchName]'
},
control: {
searchName: {
keyup: 'doSearch'
}
}
For your function to search :
doSearch: function(field, e, eOpts) {
var searchterm = field.getValue();
var store = Ext.getStore('myStore');
// Now just customise the search options
store.filter(fieldName,searchterm);
}
Use try.sencha.com it has lot of examples on how to use the framework.
You need to use an Ajax store for getting data from server. I think this guide will be a good start for that, it also implements a tree store.
This example explains how to filter data in a list based on what you type in a searchfield.
Hope it helps
So if I have a gridpanel in ExtJS 4, how do I check for a value in it?
I'm building a pop-up window to add a value to the gridpanel, and I want to make sure that the value the user is trying to add to the gridpanel isn't already listed in the grid panel.
I've been searching the docs for a while and googling around and haven't found anything.
I added the following code to the bottom of the example at http://dev.sencha.com/deploy/ext-4.0.7-gpl/examples/grid/array-grid.html
Hopefully it's a start for you, though you might have additional things to consider such as the following in order to devise the most robust solution:
What if the same value can occur multiple times in the grid?
What if the data in the grid is paginated?
CODE:
dockedItems: [{
xtype: 'toolbar',
items : [ {
xtype: 'button',
text: 'Seek Value',
handler: function() {
Ext.Msg.prompt('Value in Grid?', 'Search:', function(btn, text){
if (btn == 'ok' && text){
var columnNames = Ext.Array.pluck(grid.columns, 'dataIndex');
grid.store.data.each(function(record, index) {
for (var i=0,n=columnNames.length; i<n; i++) {
var columnName = columnNames[i];
if (columnName) { //protects against null dataIndex using pluck above
if (record.get(columnName) == text) {
console.log(index); //row
console.log(columnName);
return;
}
}
}
});
}
});
}
}],
dock: 'bottom'
}]
I'm using ExtJS's GridPanel library to render a list of rows that have a CheckboxModel for selections. There is also a summary row that adds up all of the selected data and displays it in a row at the bottom of the GridPanel. The code for this is:
var sm = Ext.create('Ext.selection.CheckboxModel', {
/////////
// With large number of rows ... this takes forever
/////////
grid.getView().refresh();
/////////
/////////
listeners:{
selectionchange: function(selectionModel, selectedRecords, options){
// Do stuff
}
}
});
var selSumFn = function(column, selModel){
return function(){
var records = selModel.getSelection(),
result = 0;
//console.log("records:" + records.length);
Ext.each(records, function(record){
result += record.get(column) * 1;
});
return result;
};
};
var grid = Ext.create('Ext.grid.Panel', {
autoScroll:true,
features: [{
ftype: 'summary'
}],
store: store,
defaults: {
sortable:true
},
selModel: sm,
columns: [
{header: 'Column 1', width: 100, dataIndex: 'col1', summaryType: selSumFn('col1', sm)},
{header: 'Column 2', width: 100, dataIndex: 'col2', summaryType: selSumFn('col2', sm)}
],
width: 730,
height: 400 ,
title: 'Data',
renderTo: 'data-div',
viewConfig: {
stripeRows: true
},
listeners: {'beforerender' : {fn:function(){this.store.load();}}}
});
Is there any way to only refresh the summaryrow feature and not the entire view? Refreshing the view was the only way I could find to refresh the summary row when updates were made to checkbox selections of the GridPanel.
There is no support for this in Ext 4.0.2a. The grid view builds a single view template with features adding or modifying this template via a multitude of defined hooks. The result is a single template instance that cannot be easily dissected.
The best solution I found is to rebuild the template fragment that renders the summary row mimicking what the grid view is doing during the template construction process. Then overwrite the existing DOM for the summary row with a freshly rendered version.
I have created a patch (as an override) that adds a refresh() method to the Summary feature.
The code turned out to be surprisingly slick.
Ext.require('Ext.grid.feature.Summary', function() {
Ext.override(Ext.grid.feature.Summary, {
refresh: function() {
if(this.view.rendered) {
var tpl = Ext.create(
'Ext.XTemplate',
'{[this.printSummaryRow()]}',
this.getFragmentTpl()
);
tpl.overwrite(this.getRowEl(), {});
}
},
getRowEl: function() {
return this.view.el.down('tr.x-grid-row-summary');
}
});
});
In your selectionchange listener:
selectionchange: function(selectionModel, selectedRecords, options) {
grid.getView().getFeature(0).refresh();
}
See this JsFiddle for a live demo.
Of course this might break in future versions of Ext. However, it could turn out to be quite robust since it delegates most of its work to existing methods.
If you are using GroupingSummary, you need to use this instead:
refresh:function(){
var rowEls = this.view.el.query('tr.x-grid-row-summary');
var i = 1;
Ext.Array.each(this.summaryGroups, function(group){
var tpl = new Ext.XTemplate(
this.printSummaryRow(i),
this.getFragmentTpl()
);
tpl.overwrite(rowEls[i-1], {})
i++;
},this);