Adding a checkboxgroup dynamically to a formpanel - extjs

I am building a checkboxgroup with the items got from a store which gets loaded in the Ext.OnReady function. I am trying to add this checkbox group to a formpanel and get this error in the add() call. 'events' is null or not an object.
Here is the code I am trying with..
Ext.onReady(function () {
{
store.each(function (record) {
var itemID = record.get('itemID')
var itemDesc = record.get('itemDesc');
jsonDataArray.push([itemID,itemDesc]);
});
myCheckboxGroup = new Ext.form.CheckboxGroup({
id: 'chk1',
xtype: 'checkboxgroup',
width: 520,
border: true,
items: jsonDataArray
});
myForm.add(myCheckboxGroup);
myForm.doLayout();
}
var myForm = new Ext.form.FormPanel({
id: 'myForm',
region: 'center',
border: true,
autoHeight: true,
items: myCheckboxGroup
});

Use the xtype to have everything created by the layout manager, make sure you are giving your groups some checkboxes to render, and define a layout type for your form. You are also going to need to put this form inside something else (like a window) or render it to the page body.
var myForm = new Ext.form.FormPanel(
{
id: 'myForm',
region: 'center',
layout: 'form',
border: true,
autoHeight: true,
items: [{
id: 'chk1',
xtype: 'checkboxgroup',
width: 520,
border: true,
items: [
{boxLabel: 'Item 1', name: 'cb-1'},
{boxLabel: 'Item 2', name: 'cb-2', checked: true}, // checked
{boxLabel: 'Item 3', name: 'cb-3'},
]
}]
});
Now just replace that 'items' code with your JSON version of the same. Make sure you have returned from your Ajax call and converted your response into JSON before you attempt this.
See the forum thread on this topic for more information: ExtJs Forum Thread

new Ext.form.FormPanel({
title: 'Test Form',
labelWidth: 120,
width: 350,
padding: 10,
tbar: [{
text: 'Add CheckboxGroup',
handler: function () {
formPanel.add({
xtype: 'checkboxgroup',
fieldLabel: 'My CheckboxGroup',
columns: 1,
items: items
});
formPanel.doLayout();
this.disable();
}
}],
items: comboBox,
renderTo: 'output'
});
Demo here http://ext4all.com/post/extjs-3-add-a-checkboxgroup-dynamically-to-a-form

Related

Getting undefined on textarea

I am getting undefined on textareafield.. I have se the id to: msgArea, but extjs changes the id to: msgArea-inputEl on runtime. I have tried using both these ids, but getting undefined on both.
isoNS.PanelQDisableInfoMsg = Ext.create("Ext.window.Window", {
title: 'Improtant information',
width: $(document).width() / 2,
height: $(document).height() / 3,
modal: true,
resizable: false,
style: 'position: absolute; top: 100px;',
id: 'infoWindow',
layout: {
align: 'stretch',
type: 'vbox'
},
dockedItems: [
{
xtype: 'textareafield',
fieldStyle: 'background-color: #DFE9F6; background-image: none;',
readOnly: true,
height: ($(document).height() / 3) - 80,
inputId: 'msgArea',
},
{
xtype: 'button',
text: 'Ok',
id: 'OkButton',
docked: 'bottom',
handler: function() {
var win = Ext.getCmp("infoWindow");
win.close();
}
},
{
xtype: 'button',
text: 'Test',
handler: function() {
var textArea = Ext.getCmp("msgArea");
textArea.setValue("Text changed");
}
}
]
}).show();
The code that gives the undefined is this part:
{
xtype: 'button',
text: 'Test',
handler: function() {
var textArea = Ext.getCmp("msgArea-inputEl");
textArea.setValue("Text changed");
}
}
what am I doing wrong?
Also. How do I make extjs NOT to change the id on runtime from msgArea to: msgArea-inputEl?
I don't know the exact version of your Extjs. The api on http://docs.sencha.com/extjs/4.0.7/ says:
inputId : String
The id that will be given to the generated input DOM element. Defaults
to an automatically generated id. If you configure this manually, you
must make sure it is unique in the document.
Available since: 4.0.0
If you uses an older version of Extjs, the api offers the object property id:. According these descriptions if you use this, the framework won't assign an automatic generated object id to this element.

How to get form on toolbar in gridpanel Extjs

I have tbar in grid panel. My example code like
tbar:[
{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}
,{
text: 'add',
handler:function(){
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
}
}
]
I can't get my form to submit. How can i do that thanks so much :).
The form is sibling of the add button. you may want to use .prev instead of .up to access the form
Here is the snippet that works
Ext.require([
'Ext.form.*',
'Ext.tip.*']);
Ext.onReady(function () {
Ext.QuickTips.init();
var f = Ext.create('Ext.form.Panel', {
renderTo: Ext.getBody(),
bodyStyle: 'padding: 5px 5px 0 5px;',
defaults: {
xtype: 'textfield',
anchor: '100%',
},
html:'text',
tbar: [{
xtype: 'form',
items: [{
xtype: 'filefield',
name: 'filefor',
labelWidth: 50,
allowBlank: false,
buttonConfig: {
text: 'up...'
}
}]
}, {
text: 'add',
handler: function () {
//var form = this.prev('form').getForm(); // working at extjs4.0.2a
var form =this.ownerCt.down('form').getForm();// working at extjs 4.2.0
form.submit({});
}
}]
});
});
For a live demo, here it is the jsfiddle link .
var form = this.up('form').getForm(); // not working
form.submit({}); // not working
change to:
this.ownerCt.down('form').getForm();

two window objects in extjs

I have these two windows defined as shown below. The functionality that I desire is that initially the grid window should be hidden and the login window should be shown. After the user logs in, the login window should be hidden and the grid window should be shown.
var store = new Ext.data.Store({
url: 'sheldon.xml',
reader: new Ext.data.XmlReader({
record: 'Item',
fields: [
{name: 'Title'},
{name: 'Author'},
{name: 'Manufacturer'},
{name: 'ProductGroup'}
]
})
});
LoginWindow = {};
gridWindow = {};
gridWindow.grid = new Ext.grid.GridPanel({
store: store,
columns: [
{header: "Title", width: 120, dataIndex: 'Title', sortable:true},
{header: "Author", width: 180, dataIndex: 'Author', sortable: true},
],
height:200,
viewConfig: {
forceFit:true
}
});
gridWindow = {
xtype: 'window',
id: 'grid',
title: 'Grid',
anchor: '30% 25%',
items:[gridWindow.grid],
frame:true,
layout:'card',
};
LoginWindow.loginForm = {
xtype:'form',
// url:'check.php',
frame: true,
labelAlign:'right',
labelWidth: 70,
items:[
{
xtype:'textfield',
fieldLabel:'Username',
anchor: '100%'
},
{
xtype:'textfield',
fieldLabel:'Password',
inputType:'password',
anchor: '100%',
}
],
buttons:[
{
text:'Login',
handler:
// Dummy function
function(btn, objc) {
Ext.getCmp('loginwindow').hide();
Ext.getCmp('grid').show();
store.load();
},
},
{
text:'Cancel',
handler:function(btn, objc) {
btn.findParentByType('form').getForm().reset();
}
}
]
};
LoginWindow = {
xtype: 'window',
id: 'loginwindow',
title: 'Please Log In',
anchor: '30% 25%',
activeItem: 0,
items:[LoginWindow.loginForm],
frame:true,
layout:'card',
bodyStyle:{}
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'anchor',
items:[
LoginWindow
]
});
Ext.getCmp('loginwindow').show();
Ext.getCmp('grid').hide();
});
When I load the page, I get the error Ext.getcmp('grid') is undefined in firefox.
Could someone please help me out here...
Your gridWindow only exists as an object literal (aka xtype config object) and is never 'instantiated' (created). Therefore Ext.getCmp cannot find it, because it doesn't 'exist' yet and hasn't been registered with Ext.ComponentManager.
You could add it to the Viewport and add hidden:true to its config definition so it doesn't show up.
gridWindow = {
xtype: 'window',
id: 'grid',
title: 'Grid',
anchor: '30% 25%',
items:[gridWindow.grid],
frame:true,
layout:'card',
};
Ext.onReady(function() {
var viewport = new Ext.Viewport({
layout: 'anchor',
items:[
LoginWindow, gridWindow
]
});
// no need
//Ext.getCmp('loginwindow').show();
//Ext.getCmp('grid').hide();
});
Note: you might also need to call doLayout() on your viewport in your login handler after showing/hiding the components.
Looks like you first define LoginWindow.loginForm, but then redefine LoginWindow with a new object.
LoginWindow.loginForm = {
xtype:'form',
// url:'check.php',
LoginWindow is now set to an object literal with one property loginForm.
{
loginForm: [object]
}
Followed by
LoginWindow = {
xtype: 'window',
id: 'loginwindow',
This will create a completely new object and assign it to LoginWindow. The loginForm property is nowhere to be seen anymore ;)

EXTJS : TreePanel click for set item change

Hi everybody
I'm a beggining with extjs and I have issue with change / set a item to a layout when i click on one of my node .
Here my contentPanel :
var contentPanel = {
id: 'content-panel',
region: 'center', // this is what makes this panel into a region within the containing layout
layout: 'card',
margins: '2 5 5 0',
activeItem: 0,
border: false,
items: layoutExamples // HERE I WANT TO CHANGE DYNAMIC
};
My "listener" on my treenode :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
//Ext.getCmp('content-panel').layout.setActiveItem(record.getId() + '-panel'); <== It's work.
Ext.getCmp('content-panel').setActive(formPanel); // HERE I TRY TO CHANGE ITEM ON CLICK AND SET FORMPANEL
});
My item for test :
var formPanel = Ext.create('Ext.form.Panel', {
frame: true,
title: 'Form Fields',
width: 340,
bodyPadding: 5,
fieldDefaults: {
labelAlign: 'left',
labelWidth: 90,
anchor: '100%'
},
items: [{
xtype: 'textfield',
name: 'textfield1',
fieldLabel: 'Text field',
value: 'Text field value'
}, {
xtype: 'textfield',
name: 'password1',
inputType: 'password',
fieldLabel: 'Password field'
}, {
xtype: 'filefield',
name: 'file1',
fieldLabel: 'File upload'
}, {
xtype: 'textareafield',
name: 'textarea1',
fieldLabel: 'TextArea',
value: 'Textarea value'
} }]
});
So, my objective is to change item of my content panel when i click on a node.. !
Thanks a lot for your helps buddies !
try that and tell me in the comments:
var formPanel = Ext.create('Ext.form.Panel',
{
'id': 'form-panel-1', // or what you want to give
// and all the properties you already defined
}
);
And in your event, based on http://docs.sencha.com/ext-js/4-0/#/api/Ext.layout.container.Card-method-setActiveItem :
treePanel.getSelectionModel().on('select', function(selModel, record) {
if (record.get('leaf')) {
Ext.getCmp('content-panel').getLayout().setActiveItem(Ext.getCmp('form-panel-1'));
}
});
By the way, in the code you provided, there is an error in the listener, it misses a } for closing the if!

When GridPanel it doesn't display just added items

When I'm adding items to the grid's store and grid is not visible at that moment then grid is not populated with items. Is there any fix or workaround for this?
Here is the code (switch to "tab1", click button, switch back to "tab2" — grid is empty):
var tbar = {
items: [{
text: 'add some lines',
handler: function() {
Ext.getCmp('grid-panel').store.loadData([[1, 'aaaaa'], [2, 'bbbbb']]);
}
}]
};
Ext.onReady(function() {
var p = new Ext.TabPanel({
renderTo: 'panel-div',
width: 500,
height: 350,
title: '123123',
activeItem: 1,
items: [{
title: 'tab1',
tbar: tbar
},{
title: 'tab2',
layout: 'fit',
tbar: tbar,
items: {
xtype: 'grid',
hideHeaders: true,
id: 'grid-panel',
autoExpandColumn: 'text',
columns: [{id: 'text', header: 'Category', width: 1, dataIndex: 'text'}],
store: new Ext.data.ArrayStore({
fields: ['id', 'text']
})
}
}]
});
});
grid.getView().refresh() should reload the grid.

Resources