I have a custom 'class' which extends Ext.grid.GridPanel. I would like to have a column of checkboxes (example which uses Ext.ux.grid.CheckboxColumn - just the thing i need).
My goal is to use it with pre-generated configuration object, including column model (it's generated by a PHP script), so I overloaded initComponent method to add column inside it:
MyGrid = Ext.extend
(
Ext.grid.GridPanel
,{
initComponent : function()
{
this.columns.push({
xtype : 'checkcolumn'
,header : 'Show on map ?'
,dataIndex : 'showonmap'
,width : 130
});
Ext.apply(this, {columns:this.columns});
MyGrid.superclass.initComponent.apply(this, arguments);
}
}
);
Such thing worked with ActionColumn component, but this code fails, because it can't find constructor (probably for CheckColumn).
How should I modify my code or CheckColumn to make this thing work?
Thanks in advance!
If the constructor can't be found, you must not have imported the CheckColumn class properly. Try this to see if the constructor can be found directly:
MyGrid = Ext.extend
(
Ext.grid.GridPanel
,{
initComponent : function()
{
this.columns.push(new Ext.ux.grid.CheckColumn({
,header : 'Show on map ?'
,dataIndex : 'showonmap'
,width : 130
}));
Ext.apply(this, {columns:this.columns});
MyGrid.superclass.initComponent.apply(this, arguments);
}
}
);
If you get an exception that Ext.ux.grid.CheckColumn is not a constructor, then you know for sure the classes isn't avaiable. Make sure that you have included the class properly, and you can verify using Firebug that the source was actually included and is available.
Related
I am trying to pass values from one view to another view, Below is the code what I have tried so far but no luck,
view1.js
var newWindow = Ext.create( 'newView', {"clickedRule" : clickedvalue} );
signerWindow.show();
newView.js
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
constructor : function (clickedRule){
Ext.applyIf(this, clickedRule);
this.callParent();
},
requires : ['Ext.form.Panel'],
title : 'Title Selection'+ this.clickedRule
});
I am getting undefined, your help is greatly appreciated.
Thanks in advance.
Do it in Ext.create:
var newWindow = Ext.create( 'newView', {
clickedRule : clickedvalue,
title : 'Title Selection ' + clickedValue
});
newWindow.show();
and lose the title config on the class:
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
constructor : function (clickedRule){
Ext.applyIf(this, clickedRule);
this.callParent();
},
requires : ['Ext.form.Panel']
});
Edit from comment:
You will have to put it in the initComponent function in that case:
this refers to an instance of your window class so won't be available in the class definition (config statements) but you can access it after the class has been initialized using the initComponent function:
Ext.define('newView', {
extend : 'Ext.window.Window',
id : 'newWindow',
initComponent: function (){
var clickedRule = this.clickedRule;
// title can also be defined here
this.title = 'Title Selection ' + clickedRule;
this.callParent();
},
requires : ['Ext.form.Panel']
});
initComponent is the normal way of adding constructor logic to ExtJS components. See this in the docs.
Keep your original create statement:
var newWindow = Ext.create( 'newView', {clickedRule : clickedvalue} );
You can access the clickedRule property after the create statement:
console.log(newWindow.clickedRule);
How to apply conditions in bind?
In view let
{
xtype : 'label',
bind : {
text : '{//--- set text as per the condition }',
hidden : '{//should be true if 'param' in VM is 1 or 2 else should
be false}'
}
}
in view model, 'param' is a data variable. If value of
param=1, text should be one,
param=2, text should be two,
param=3, text should be three.
Is this possible without formula by applying conditions directly in view?
{
xtype : 'label',
bind :
{
text : '{textVal}'==0?'Test':'TEST1234',
hidden : ('{param}'==1 || '{param}'==2)?true:false
}
}
In the associated viewModel, if one has the property param in data config, then one can use it for binding along with condition checks as mentioned above. If the param value is being changed dynamically, (i.e, this.getViewModel().setData('param', 1)) then still the code will work in hiding the component dynamically. The same applies with the other config, viewModel -> data:{textVal:0,param:1}. If one has an object inside the data, like data:{ config:{ textVal:0 }, param:1 }, One can use bind:{ text:'{config.textVal}' //along with ur condition check }
Im' using EXT 4.2.0.
I have 2 views : view 1 and view 2.
In view 1 i have a Ext.grid.Panel which (in his associated controller) contains a selectionchange event lisetner .
After selectionchange is triggred, i go the the view 2 in which i have a form.
My need is to have control on the from of the view 2 from view 1.
I mean by control sending values, disabling buttons ...
For information, concerning sending values issue, i'v already tried
Ext.getCmp('view2ID').getForm().loadRecord(this.getMyVar());
But this seems not to be working and i don't know why !
Could you help me please ? :)
Option 1 : As said by #Lorenz,call the method in your controller
selectionchange:function( record, selected, eOpts ){
//getController
controller = globalVar.getController('Controller');
controller.onSelectionChangeEvent(record);
}
Option2 : You can pass config object to the View2 when creating a instance
In view1,mention config property;
//View 1....
config :{
recordObj : ''
},
.........
selectionchange:function( record, selected, eOpts ){
var form = Ext.create('My.view.Form',{recordObj :record});
}
............
//Your View2 might be like
Ext.define('My.view.Form', {
extend : 'Ext.form.Panel',
config :{
recordObj : ''
},
initComponent : function() {
var record = this.getRecordObj();
this.items = [
];
this.callParent();
//Set form values
this.getForm().setValues(record);
}
});
The problem was quiet difficult : Actions sent from View1 were executed befaure view 2 is rendred ! Even if my code was some think like this :
ControllerOfView1
{
CodeToLoadView2;
InstructionsToControlView2;
}
The solution was to add a listeners on my View2 and parametrize afterrender.
So the code hase become :
afterrender: function() {
this.loadRecord(this.getMyVar2());
}
You can use the custom fire event , in that you can send the data you want and the component reference.
app.fireEvent('selectionChanged',view1.grid);
you need the listen for the selectionChanged in the view2.
something like
app.on("selectionChanged",onSelectionChanged)
onSelectionChanged : function(grid){
console.log(grid);
}
I am new to ExtJs.
I have been facing a problem in panels for getting panel html content.
xtype : 'panel',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.body.on('click', function() {
alert('' + this.id);
alert(Ext.getCmp('first_block').items.getAt(0).getValue());
});
}
I am not getting html content, but i am getting id like "first_block-body".
Thanks in advance.
The html property defined the HTML you want in the content of your component, in this case an Ext.Panel.
Ext.Panels create a few layers of divs in order to provide things like headers, footers, toolbars, etc.
If all you want is a div with some content, you instead want to use an Ext.Component. Components don't have a body, so a couple things change in your code.
xtype : 'component',
id : 'first_block',
html : '<p>Hi this is belongs to first block.</p>',
listeners : {
render : function(c) {
c.on('click', function() {
alert('' + this.id);
alert(this.el.dom.innerHTML);
}, this);
}
Notice that I added a third parameter to your on call, which specifies the this scope of the function call. I also edited your alert to print out the innerHTML of the element, assuming that's what you were trying to do.
UPDATE:
If you are going to use this component in a layout, it may need to be able to have its height and width set, meaning it needs to be of type box in order to be an Ext.BoxComponent.
Ext.getElementById('yourId').innerHTML
I'm trying to set up an Extensible Calendar Pro in my ExtJs 4.1 application, but I still get a name is undefined error.
EDIT:
I solved the original problem, but directly went in another.
Updated code:
Ext.define('ZeuS.view.panels.ZeusMainPanel',{
extend: 'Ext.panel.Panel',
id : 'zeusMainPanel',
alias : 'widget.zeus',
requires : [
'Extensible.Extensible',
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.data.EventModel',
'Extensible.calendar.view.*'
],
autoShow : true,
layout : 'border',
border : false,
initComponent : function(){
this.items = [{
/*
* Some other Ext Elements
*/
}, {
region : 'east',
xtype : 'extensible.calendarpanel',
name : 'zeus-calendar',
width : 500,
eventStore: Ext.create('Extensible.calendar.data.EventStore', {
data: Ext.create('Extensible.calendar.data.EventModel',{
StartDate: '2101-01-12 12:00:00',
EndDate: '2101-01-12 13:30:00',
Title: 'My cool event',
Notes: 'Some notes'
})
})
}
];
this.callParent(arguments);
}
});
Now it loads all classes correctly when the Extensible singleton is included, but nothing works. I just have a white screen and no functions in the controller or anywhere else are called. When I remove it from the requires list it comes up with this error: Extensible.log is not a function
Do I use the plugin at all right?
Any advice?
Extensible.log is defined on the Extensible singleton, so it should always be available if your dependencies and includes are set up correctly. You really should post in the Extensible forums with additonal details (Ext version, Extensible version, script include markup) as this is basically a product support question.
EDIT: By the way, there is no such thing as Extensible.Extensible, which might be part of your problem. Also you cannot use wildcard requires statements for non-Sencha classes. You might try getting a basic example working first before trying to create a complex layout with it.