I am using angular + kendo ui. I have created a tree and added first node as dummy
$scope.treeData = kendo.observableHierarchy({
data: [{ text: "" ,items: [] }]
});
after that when I have the right data , I want to place the right data
function init() {
var query = CSensorGroupRepositoryService.getQueyObject().where("ParentID", "==", 0); // groups with no parent
CSensorGroupRepositoryService.getEntitiesByQuery(query).then(function (results) {
var parent = { text: results[0].GroupName, items: [] };
buildTreeHierarchy(results[0], parent);
$scope.treeData[0].text = results[0].GroupName;
});
}
how ever in the view - the text is empty
Use ObservableObject.set so the change event is triggered and your widget updates its view:
$scope.treeData[0].set("text", results[0].GroupName);
Related
I am trying to add dynamically created contextmenu's to an Ext.tree.TreePanel object. The menus will all be different depending on user selections.
I can create the menu outside the treePanel descriptor but how can I append the dynamically created menu to the Ext.tree.TreePanel? The documentation seems to indicate that treePanel.on(nameOfMenuHere) would append the menu but it returns as undefined.
var menu1 = new Ext.menu.Menu({
id: 'menu1',
items: [{
id: 'menu1-item1',
text: 'Menu 1 - Item 1'
},
{
id: 'menu1-item2',
text: 'Menu 1 - Item 2'
}],
listeners: {
itemclick: function (item) {
switch (item.id) {
case 'menu1-item1':
var n = item.parentMenu.contextNode;
if (n.parentNode) {
alert(n.parentNode.text);
alert("node ID: " + n.id + ", node text: " + n.text); //Ext ID and text of selected node
}
break;
}
}
}
});
userLayerTree.on(menu1);
use the listener itemcontextmenu within the tree panel. something like this should work.
var tpanel = {
xtype : 'treepanel',
width: 250,
.........
..........
listeners : {
itemcontextmenu: showLyrContextMenu
}
}
and then create the function to create and show your menu
function showLyrContextMenu(view, record, item, index, event){
lyrTreeContextMenu = new Ext.menu.Menu({
id : 'lyrcontxtmenu',
.......
items: items
});
lyrTreeContextMenu.showAt(event.getXY());
event.stopEvent();
}
I am using extjs 4.0 and having a combobox with queryMode 'remote'. I fill it with data from server. The problem is that the number of records from server is too large, so I thought it would be better to load them by parts. I know there is a standart paginator tool for combobox, but it is not convinient because needs total number of records.
Is there any way to add dynamic scrolling for combobox? When scrolling to the bottom of the list I want to send request for the next part of records and add them to the list. I can not find appropriate listener to do this.
The following is my solution for infinite scrolling for combobox, Extjs 4.0
Ext.define('TestProject.testselect', {
extend:'Ext.form.field.ComboBox',
alias: ['widget.testselect'],
requires: ['Ext.selection.Model', 'Ext.data.Store'],
/**
* This will contain scroll position when user reaches the bottom of the list
* and the store begins to upload data
*/
beforeRefreshScrollTop: 0,
/**
* This will be changed to true, when there will be no more records to upload
* to combobox
*/
isStoreEndReached : false,
/**
* The main thing. When creating picker, we add scroll listener on list dom element.
* Also add listener on load mask - after load mask is hidden we set scroll into position
* that it was before new items were loaded to list. This prevents 'jumping' of the scroll.
*/
createPicker: function() {
var me = this,
picker = me.callParent(arguments);
me.mon(picker, {
'render' : function() {
Ext.get(picker.getTargetEl().id).on('scroll', me.onScroll, me);
me.mon(picker.loadMask, {
'hide' : function() {
Ext.get(picker.id + '-listEl').scroll("down", me.beforeRefreshScrollTop, false);
},
scope: me
});
},
scope: me
});
return picker;
},
/**
* Method which is called when user scrolls the list. Checks if the bottom of the
* list is reached. If so - sends 'nextPage' request to store and checks if
* any records were received. If not - then there is no more records to load, and
* from now on if user will reach the bottom of the list, no request will be sent.
*/
onScroll: function(){
var me = this,
parentElement = Ext.get(me.picker.getTargetEl().id),
parentElementTop = parentElement.getScroll().top,
scrollingList = Ext.get(me.picker.id+'-items');
if(scrollingList != undefined) {
if(!me.isStoreEndReached && parentElementTop >= scrollingList.getHeight() - parentElement.getHeight()) {
var multiselectStore = me.getStore(),
beforeRequestCount = multiselectStore.getCount();
me.beforeRefreshScrollTop = parentElementTop;
multiselectStore.nextPage({
params: this.getParams(this.lastQuery),
callback: function() {
me.isStoreEndReached = !(multiselectStore.getCount() - beforeRequestCount > 0);
}
});
}
}
},
/**
* Took this method from Ext.form.field.Picker to collapse only if
* loading finished. This solve problem when user scrolls while large data is loading.
* Whithout this the list will close before finishing update.
*/
collapse: function() {
var me = this;
if(!me.getStore().loading) {
me.callParent(arguments);
}
},
/**
* Reset scroll and current page of the store when loading all profiles again (clicking on trigger)
*/
doRawQuery: function() {
var me = this;
me.beforeRefreshScrollTop = 0;
me.getStore().currentPage = 0;
me.isStoreEndReached = false;
me.callParent(arguments);
}
});
When creating element, should be passed id to the listConfig, also I pass template for list, because I need it to be with id. I didn't find out more elegant way to do this. I appreciate any advice.
{
id: 'testcombo-multiselect',
xtype: 'testselect',
store: Ext.create('TestProject.testStore'),
queryMode: 'remote',
queryParam: 'keyword',
valueField: 'profileToken',
displayField: 'profileToken',
tpl: Ext.create('Ext.XTemplate',
'<ul id="ds-profiles-boundlist-items"><tpl for=".">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item' + '">',
'{profileToken}',
'</li>',
'</tpl></ul>'
),
listConfig: {
id: 'testcombo-boundlist'
}
},
And the store:
Ext.define('TestProject.testStore',{
extend: 'Ext.data.Store',
storeId: 'teststore',
model: 'TestProject.testModel',
pageSize: 13, //the bulk of records to receive after each upload
currentPage: 0, //server side works with page numeration starting with zero
proxy: {
type: 'rest',
url: serverurl,
reader: 'json'
},
clearOnPageLoad: false //to prevent replacing list items with new uploaded items
});
Credit to me1111 for showing the way.
Ext.define('utils.fields.BoundList', {
override:'Ext.view.BoundList',
///#function utils.fields.BoundList.loadNextPageOnScroll
///Add scroll listener to load next page if true.
///#since 1.0
loadNextPageOnScroll:true,
///#function utils.fields.BoundList.afterRender
///Add scroll listener to load next page if required.
///#since 1.0
afterRender:function(){
this.callParent(arguments);
//add listener
this.loadNextPageOnScroll
&&this.getTargetEl().on('scroll', function(e, el){
var store=this.getStore();
var top=el.scrollTop;
var count=store.getCount()
if(top>=el.scrollHeight-el.clientHeight//scroll end
&&count<store.getTotalCount()//more data
){
//track state
var page=store.currentPage;
var clearOnPageLoad=store.clearOnPageLoad;
store.clearOnPageLoad=false;
//load next page
store.loadPage(count/store.pageSize+1, {
callback:function(){//restore state
store.currentPage=page;
store.clearOnPageLoad=clearOnPageLoad;
el.scrollTop=top;
}
});
}
}, this);
},
});
You can implement the infinite grid as list of the combobox.
Look at this example to implement another picker:
http://www.sencha.com/forum/showthread.php?132328-CLOSED-ComboBox-using-Grid-instead-of-BoundList
If anyone needs this in ExtJS version 6, here is the code:
Ext.define('Test.InfiniteCombo', {
extend: 'Ext.form.field.ComboBox',
alias: ['widget.infinitecombo'],
/**
* This will contain scroll position when user reaches the bottom of the list
* and the store begins to upload data
*/
beforeRefreshScrollTop: 0,
/**
* This will be changed to true, when there will be no more records to upload
* to combobox
*/
isStoreEndReached: false,
/**
* The main thing. When creating picker, we add scroll listener on list dom element.
* Also add listener on load mask - after load mask is hidden we set scroll into position
* that it was before new items were loaded to list. This prevents 'jumping' of the scroll.
*/
createPicker: function () {
var me = this,
picker = me.callParent(arguments);
me.mon(picker, {
'afterrender': function () {
picker.on('scroll', me.onScroll, me);
me.mon(picker.loadMask, {
'hide': function () {
picker.scrollTo(0, me.beforeRefreshScrollTop,false);
},
scope: me
});
},
scope: me
});
return picker;
},
/**
* Method which is called when user scrolls the list. Checks if the bottom of the
* list is reached. If so - sends 'nextPage' request to store and checks if
* any records were received. If not - then there is no more records to load, and
* from now on if user will reach the bottom of the list, no request will be sent.
*/
onScroll: function () {
var me = this,
parentElement = me.picker.getTargetEl(),
scrollingList = Ext.get(me.picker.id + '-listEl');
if (scrollingList != undefined) {
if (!me.isStoreEndReached && me.picker.getScrollY() + me.picker.getHeight() > parentElement.getHeight()) {
var store = me.getStore(),
beforeRequestCount = store.getCount();
me.beforeRefreshScrollTop = me.picker.getScrollY();
store.nextPage({
params: this.getParams(this.lastQuery),
callback: function () {
me.isStoreEndReached = !(store.getCount() - beforeRequestCount > 0);
}
});
}
}
},
/**
* Took this method from Ext.form.field.Picker to collapse only if
* loading finished. This solve problem when user scrolls while large data is loading.
* Whithout this the list will close before finishing update.
*/
collapse: function () {
var me = this;
if (!me.getStore().loading) {
me.callParent(arguments);
}
},
/**
* Reset scroll and current page of the store when loading all profiles again (clicking on trigger)
*/
doRawQuery: function () {
var me = this;
me.beforeRefreshScrollTop = 0;
me.getStore().currentPage = 1;
me.isStoreEndReached = false;
me.callParent(arguments);
}
});
First of all thanks to #me1111 for posting the code for dynamic rendering on scroll. That code is working for me after doing a small change.
tpl: Ext.create('Ext.XTemplate',
'<ul id="testcombo-boundlist-items"><tpl for=".">',
'<li role="option" class="' + Ext.baseCSSPrefix + 'boundlist-item' + '">',
'{profileToken}',
'</li>',
'</tpl></ul>'
),
listConfig: {
id: 'testcombo-boundlist'
}
in code from <ul id="ds-profiles-boundlist-items"><tpl for="."> i have changed id to "testcombo-boundlist-items". as we defined id as 'testcombo-boundlist' in listConfig.
Before modification, in onScroll method scrollingList = Ext.get(me.picker.id + '-items'); i am getting scrollList as a null. because me.picker.id will return 'testcombo-boundlist' on this we are appending '-items' so it became 'testcombo-boundlist-items' but this id does not exists. so iam getting null.
After modification of id in <ul id="testcombo-boundlist-items"> we have a list object on "testcombo-boundlist-items". so i got a object.
Hope this small change will help.
Since a few days now I try to change an ExtJs ['Grid to Tree Drag and Drop' Example][1] to work in both directions. But all I get is an 'almost' working application.
Now it works as far as I can drag an item from grid to tree, within tree, within grid but if i drag it from tree to grid, it doesn't drop. It just shows the green hook.
I also tried to differ the ddGroup from tree and grid, but then nothing works anymore.
This is too much for an ExtJs beginner.
// Stücklisten Grid
stuecklistengrid = Ext.extend(Ext.grid.GridPanel, {
initComponent:function() {
var config = {
store:itemPartStore
,columns:[{
id:'PART_ITE_ID'
,header:"PART_ITE_ID"
,width:200, sortable:true
,dataIndex:'PART_ITE_ID'
},{
header:"IS_EDITABLE"
,width:100
,sortable:true
,dataIndex:'IS_EDITABLE'
},{
header:"IS_VISIBLE"
,width:100
,sortable:true
,dataIndex:'IS_VISIBLE'
}]
,viewConfig:{forceFit:true}
}; // eo config object
// apply config
Ext.apply(this, Ext.apply(this.initialConfig, config));
this.bbar = new Ext.PagingToolbar({
store:this.store
,displayInfo:true
,pageSize:10
});
// call parent
stuecklistengrid.superclass.initComponent.apply(this, arguments);
} // eo function initComponent
,onRender:function() {
// call parent
stuecklistengrid.superclass.onRender.apply(this, arguments);
// load the store
this.store.load({params:{start:0, limit:10}});
} // eo function onRender
});
Ext.reg('examplegrid', stuecklistengrid);
// Stücklisten Tree
var CheckTree = new Ext.tree.TreePanel({
root:{ text:'root', id:'root', expanded:true, children:[{
text:'Folder 1'
,qtip:'Rows dropped here will be appended to the folder'
,children:[{
text:'Subleaf 1'
,qtip:'Subleaf 1 Quick Tip'
,leaf:true
}]
},{
text:'Folder 2'
,qtip:'Rows dropped here will be appended to the folder'
,children:[{
text:'Subleaf 2'
,qtip:'Subleaf 2 Quick Tip'
,leaf:true
}]
},{
text:'Leaf 1'
,qtip:'Leaf 1 Quick Tip'
,leaf:true
}]},
loader:new Ext.tree.TreeLoader({preloadChildren:true}),
enableDD:true,
ddGroup:'grid2tree',
id:'tree',
region:'east',
title:'Tree',
layout:'fit',
width:300,
split:true,
collapsible:true,
autoScroll:true,
listeners:{
// create nodes based on data from grid
beforenodedrop:{fn:function(e) {
// e.data.selections is the array of selected records
if(Ext.isArray(e.data.selections)) {
// reset cancel flag
e.cancel = false;
// setup dropNode (it can be array of nodes)
e.dropNode = [];
var r;
for(var i = 0; i < e.data.selections.length; i++) {
// get record from selectons
r = e.data.selections[i];
// create node from record data
e.dropNode.push(this.loader.createNode({
text:r.get('PART_ITE_ID')
,leaf:true
,IS_EDITABLE:r.get('IS_EDITABLE')
,IS_VISIBLE:r.get('IS_VISIBLE')
}));
}
// we want Ext to complete the drop, thus return true
return true;
}
// if we get here the drop is automatically cancelled by Ext
}}
}
});
// Stücklisten Container
var itemPartList = new Ext.Container({
id: 'itemPartList',
title: 'Stücklisten',
border:false,
layout:'border',
items:[CheckTree, {
xtype:'examplegrid'
,id:'SLgrid'
,title:'Grid'
,region:'center'
,layout:'fit'
,enableDragDrop:true
,ddGroup:'grid2tree'
,listeners: {
afterrender: {
fn: function() {
// This will make sure we only drop to the view scroller element
SLGridDropTargetEl2 = Ext.getCmp('SLgrid').getView().scroller.dom;
SLGridDropTarget2 = new Ext.dd.DropTarget(SLGridDropTargetEl2, {
ddGroup : 'grid2tree',
notifyDrop : function(ddSource, e, data){
var records = ddSource.dragData.selections;
Ext.each(records, ddSource.grid.store.remove,
ddSource.grid.store);
Ext.getCmp('SLgrid').store.add(records);
return true
}
});
}
}
}
}]
});
You need to implement the onNodeDrop event of the grid. See http://docs.sencha.com/ext-js/4-1/#!/api/Ext.grid.header.DropZone-method-onNodeDrop
I am working with Sencha Touch 2 and I need to create a TitleBar which is sucked into a set of screens. The TitleBar elements are drop-down lists. The items within the drop-down lists must be dynamic and must be loaded from a data file.
I've managed to load the data but I cannot pass the data back to the TitleBar. In other words, I need somehow to create a reference to the titlebar.
Code:
Ext.define('CustomerToolbar', {
extend: 'Ext.TitleBar',
xtype: 'customer-toolbar',
initialize: function() {
this.callParent(arguments);
this.loadItems();
console.info("end of init");
},
config: {
layout: 'hbox',
defaults: {
}
},
loadItems: function (titleBar) {
var itemList = [];
var itemOptionList = [];
Ext.getStore('OrganizationStore').load(function(organizationList) {
console.info("getOptionList inside the store load function");
Ext.each(organizationList, function(organization) {
console.info("organizations: " + organization.get("name") + "," + organization.get("id"));
itemOptionList.push({text: organization.get("name"), value: organization.get("id")});
});
console.info("itemList - about to populate");
itemList.push(
{
xtype: 'selectfield',
name: 'customerOptions',
id :'organizationId',
options: itemOptionList,
action :'selectOrganizationAction'
}
);
console.info("itemList - populated");
console.info("itemList within the store block: " + itemList);
console.info("this: " + this);
//THIS IS WHERE I AM HAVING THE PROBLEM.
//The variable this points to the store and not to the TitleBar
//this.setItems(itemList);
});
console.info("itemList outside the store block: " + itemList);
}
});
You can add a listener to your selectfield and do
listeners:{
change:function(){
title = Ext.getCmp('organizationId').getValue();
Ext.getCmp('TitlBarID').setTitle(title);
}
}
I know Ext.getCmp is not fashionable but it works
I have followed the tutorial over at http://www.sencha.com/learn/Tutorial:Custom_Drag_and_Drop_Part_1
It is great, however now I need pointers on how to add functionally of being to be able reorder a single list. At the moment when I drop a item on the list it is appended at the end. However I wish to be able to drag a item between two others or to the front then drop it there.
Any advice appreciated, thanks.
I found Ext.GridPanel row sorting by drag and drop working example in blog http://hamisageek.blogspot.com/2009/02/extjs-tip-sortable-grid-rows-via-drag.html
It worked fine for me. Here my js code:
app.grid = new Ext.grid.GridPanel({
store: app.store,
sm: new Ext.grid.RowSelectionModel({singleSelect:false}),
cm: new Ext.grid.ColumnModel({
columns: app.colmodel
}),
ddGroup: 'dd',
enableDragDrop: true,
listeners: {
"render": {
scope: this,
fn: function(grid) {
// Enable sorting Rows via Drag & Drop
// this drop target listens for a row drop
// and handles rearranging the rows
var ddrow = new Ext.dd.DropTarget(grid.container, {
ddGroup : 'dd',
copy:false,
notifyDrop : function(dd, e, data){
var ds = grid.store;
// NOTE:
// you may need to make an ajax call
// here
// to send the new order
// and then reload the store
// alternatively, you can handle the
// changes
// in the order of the row as
// demonstrated below
// ***************************************
var sm = grid.getSelectionModel();
var rows = sm.getSelections();
if(dd.getDragData(e)) {
var cindex=dd.getDragData(e).rowIndex;
if(typeof(cindex) != "undefined") {
for(i = 0; i < rows.length; i++) {
ds.remove(ds.getById(rows[i].id));
}
ds.insert(cindex,data.selections);
sm.clearSelections();
}
}
// ************************************
}
})
// load the grid store
// after the grid has been rendered
this.store.load();
}
}
}
});
If you had hbox layout with 3 Grid side by side
new Ext.Panel(
{
layout: "hbox",
anchor: '100% 100%',
layoutConfig:
{
align: 'stretch',
pack: 'start'
},
items: [GridPanel1, GridPanel2, GridPanel3
})
then you must juse grid El instead of container
var ddrow = new Ext.dd.DropTarget(grid.getEl(), { ....