I am trying to implement drag-n-drop feature in treepanel of ExtJS 4. Basically I want to drag some nodes from treepanel into an text box. I am pretty confused with the way drag-n-drop is implemented in ExtJS 4 but then also I have tried to write some code. I am not sure whether its correct or not.
My code is as follows :
CustomChart.js file contents
Ext.define('dd.view.CustomChart', {
extend : 'Ext.panel.Panel',
alias : 'widget.customChart',
layout : {
type : 'vbox',
align : 'stretch'
},
initComponent : function() {
this.items = [
{
xtype : 'textfield',
name : 'values',
fieldLabel : 'Drop values here'
}
];
this.callParent(arguments);
}
});
I am using this CustomChart panel inside AttritionViewer file as follows :
Ext.define('dd.view.AttritionViewer', {
extend : 'Ext.panel.Panel',
alias : 'widget.attritionViewer',
title : 'View attrition by dimensions',
layout : 'border',
initComponent : function() {
this.items = [
{
xtype : 'treepanel',
title : 'Select dimensions',
store : 'Dimensions',
rootVisible : false,
region : 'west',
height : '100%',
width : '20%',
viewConfig : {
plugins : {
ptype : 'treeviewdragdrop',
ddGroup: 'GridExample'
}
}
},
{
xtype : 'panel',
region : 'center',
layout : {
type : 'vbox',
align : 'stretch'
},
items : [
{
xtype : 'customChart',
flex : 1
}
]
}
];
this.callParent(arguments);
}
});
As you can see in code above, I have set ViewConfig and ddGroup for treepanel. Now I am not sure where to put following code so I have put it in init() method of controller. init() method of my controller looks as follows :
var customChartEl = Ext.widget('customChart');
var formPanelDropTarget = Ext.create('Ext.dd.DropTarget', customChartEl, {
ddGroup: 'GridExample',
notifyEnter: function(ddSource, e, data) {
console.log('inside notifyEnter() method');
//Add some flare to invite drop.
/* formPanel.body.stopAnimation();
formPanel.body.highlight(); */
},
notifyDrop : function(ddSource, e, data){
console.log('inside notifyDrop() method');
return true;
}
});
After this code, I am getting this.el is null error at ext-debug.js (line 7859). I dont know what to do next.
Please guide me on how to drag an node from treepanel inside text field.
Thanks in advance !!!
check this link,
http://examples.extjs.eu/?ex=tree2divdrag
i am also trying one similar task. i can help you if i get some output.
if you solve your problem, just make a note here, that will help me too.
check the source of this sample too. http://docs.sencha.com/ext-js/4-0/#!/example/dd/dragdropzones.html.
Best wishes.
Related
Can anyone confirm whether this works as it seems to have no effect on my tree config (default icons are always displayed):
"themes": {
"icons": false
}
in jstree v3 the theme part is in the core part so it should be written in it.i am writing
a sample code hope it helps.
$('#treeloaddiv').jstree({
'core' : {
'data' : {
"url" : "/jstreedemo/JSTreeDemoServlet",
"type":"post",
"dataType" : "json", // needed only if you do not supply JSON headers
"data" : function (node) {
return { "id" : node.id };
}
},
"themes" : {
"icons" : false
}
}
});
Hi I have a combo box which have a store that is based on rest call and populate data from data base, its working fine but i need a value 'All' with all the values coming from data base so how can i do this please suggest
var wardName = Ext.create('Ext.data.Store', {
id : 'visittype',
fields : [
{
name : 'id',
type : 'integer',
},
{
name : 'wardName',
}
],
remoteGroup : true,
remoteSort : true,
proxy : {
type : 'rest',
url : 'pmsRest/wards',
reader : {
root : "wardMaster",
idProperty : 'id'
}
},
autoLoad : true,
});
{
xtype : 'combo',
name : 'wardName',
labelStyle : 'color:black;font-weight:bold;width:250px;padding:10;',
labelSeparator : "",
id : 'wardName',
width:'33%',
fieldLabel : 'Ward',
triggerAction : 'all',
store : wardName,
displayField : 'wardName',
valueField : 'id',
multiSelect : false,
typeAhead : true,
//disabled: true,
listeners : {
change : function(combo) {
Ext.getCmp('bedName').bindStore(loadBedName());
}
},
allowBlank : false,
//enableKeyEvents : true,
},
Once the data from the proxy is loaded successfully you can use the insert method of store to add the static data in store.
insert method inserts Model instances into the Store at the given index.
The syntax is store.insert( index, records ) where index is the position at which you want to insert the instance, in this case it would be 0.
hope it helps you. :-)
Add a listener to the store and a load event. In that event you can add a new item to the store when the store is loaded.
listeners: {
load: function(){
this.add({
id: 0,
name: 'All'
});
}
}
On touch screen, I can close the fancybox only by using the close button from the top helper-bar, or by clicking outside the image. but not from the single close button.
sample link -
http://vasterad.com/themes/nevia/single-project.html
(click\touch the large image)
JS code - (Using fancyBox.min v2.1.3)
$('[rel=fancybox-gallery]').fancybox({
openEffect : 'elastic',
closeEffect : 'elastic',
nextEffect : 'elastic',
prevEffect : 'elastic',
helpers : {
title : {
type : 'inside'
},
buttons : {},
overlay : {
css : {
'background' : 'rgba(0, 0, 0, 0.85)'
}
}
},
});
Upgrading to the latest fancy-box v2.1.5 solved the problem!
I am trying to post data from front-end to RESTful. I'm a backbone beginner, so my problems are probably easy to solve. But have struggled with this all day - so now I'm asking for guidance.
I have a button that use to add data to REST. So in my view I use object.save(); to save an object to model.
Here is my model:
define(["underscore" , "backbone"],function(_ , Backbone){
var Test = Backbone.Model.extend({
url:'http://mysite.com/Test/Test.svc/AddTest',
idAttribute: 'ID'
});
return Test;
});
View :
define(["jquery" ,
"underscore" ,
"backbone" ,
'models/Test',
'views/Test',
],function($ , _ , Backbone , Test, TestView){
var HomeView = Backbone.View.extend({
initialize: function() {
//....
},
events : {
"click #byn" : function(){
//....
},
'click #test' : 'addTest'
},
addTest : function(){
var object = new Test();
object.set({
"ID" : 0,
"Name" : "",
"CustomerID" : 106,
"Type" : 0,
"LastUpdated" : "\/Date(1383152400000+0700)\/",
"Detail" : [
{
"ID" : 0,
"TID" : 0,
"ItemID" : 22776,
"Quantity" : 2,
"LastUpdated" : "\/Date(1383152400000+0700)\/"
}
]
});
object.save();
var _wlView = new TestView({model:object});
},
render : function(){
//....
}
});
return HomeView;
});
To be truth, I really don't know how could I post the object that I have saved in my view object.save(); to the restful throw the rest url like http://mysite.com/Test/Test.svc/AddTest.
Url of model should be declared as urlRoot value and it is better to have it relative (e.g. "/AddTest").
Then the backend route for save action will be "actual url" + "urlRoot".
I am trying to draw an chart inside panel. Chart bars are getting drawn correctly but x and y axis labels are not shown when chart is drawn. Code to draw chart is as follows :
Ext.require([
'Ext.form.*',
'Ext.chart.*',
'Ext.layout.container.*'
]);
Ext.define('ilp.view.EmployeeCountControl', {
extend : 'Ext.panel.Panel',
alias : 'widget.employeeCountControl',
require : [
'ilp.store.Employees',
'ilp.store.Dimensions'
],
layout : {
type : 'vbox',
align : 'stretch',
pack : 'start'
},
title : 'Select dimension to view chart',
initComponent : function() {
this.items = [
{
xtype : 'combobox',
fieldLabel : 'Select Dimension',
store : 'Dimensions',
queryMode : 'local',
displayField : 'name',
valueField : 'dimension',
flex : 1
},
{
xtype : 'chart',
title : 'selected dimension',
store : 'Employees',
flex : 2,
width: 150,
height: 200,
legend : {
position : 'right'
},
axes : [
{
title : 'Emp Count',
type : 'Numeric',
position : 'left',
fields : ['hpCount', 'nonhpCount'],
minimum : 0,
grid : true
},
{
title : 'selected dimension',
type : 'Category',
position : 'bottom',
fields : ['dimension']
}
],
series : [
{
type : 'bar',
column :true,
stacked : true,
highlight: true,
axis : 'left',
xField : ['dimension'],
yField : ['hpCount', 'nonhpCount'],
yPadding : 10
}
]
}
];
this.callParent(arguments);
}
});
and what gets drawn is as follows :
As you can see, title and axis values are not being displayed on chart.
Can anyone please tell me why this is happening??
Thanks in advance !!
EDIT 1
After moving legend to bottom, I got x axis values but now those values are getting hidden behind legend and also those values are going out of panel. Does anyone knows how to decrease the size of actual chart and bars to fit axis values properly? My chart now looks as follows :
Set Width and/or Padding to your Layout and/or Panel and see the changes. I think it's about the chart parent container not the chart itself.