Develop Reference

how to get json array of Ext.tree.Panel on Extjs 4.0

I encountered a problem when I was using extjs4.0.I download data with Ext.data.TreeStore,Downloading data is a JSON array,whitch showed up in a Tree.panle with checkbox.I modified the selection state of itme and submitted it,use follow code:
var d=store.lastOptions.node.childNodes;
var postData="";
for(var i=0;i<d.length;i++)
{
postData+=JSON.stringify(d[i].data)+",";
}
postData="["+postData.substring(0,postData.length-1)+"]";
$.ajax({
url: '/test.php',
type: 'POST',
data: postData,
...
But the checked in the JSON array"{children:[{checked:false,..}{checked:false,...}]}" is always false.I guess I didn't use the correct way to get the submitted JSON data,So there will be such a mistake.
thanks every one for help.

You may try with this:
Ext.onReady(function(){
Ext.QuickTips.init();
Ext.define('Test.Window', {
extend: 'Ext.window.Window',
closeAction: 'destroy',
border: false,
width: 560,
height: 500,
modal: true,
closable: true,
resizable: false,
layout: 'fit',
initComponent: function() {
var me = this;
me.callParent(arguments);
me.button = Ext.create('Ext.button.Button', {
text: 'Send',
handler : function(btn) {
var me = btn.up('window');
var root = me.tree.getRootNode();
var a = Array();
for (var i=0; i < root.childNodes.length; i++) {
var data = root.childNodes[i].data;
a.push(
{
text: data.text,
checked: data.checked
// ... something more
}
);
}
var postData = Ext.JSON.encode({
children: a
});
alert(postData);
}
});
me.store = Ext.create('Ext.data.TreeStore', {
root: {
expanded: true,
children: [
{
text: "detention",
checked: true,
leaf: true
},
{
text: "homework",
checked: true,
leaf: true
},
{
text: "buy lottery tickets",
checked: true,
leaf: true
}
]
}
});
me.tree = Ext.create('Ext.tree.Panel', {
useArrows: true,
autoScroll: true,
animate: true,
enableDD: false,
width: '100%',
flex: 1,
border: false,
rootVisible: false,
allowChildren: true,
store: me.store,
tbar: [
me.button
]
});
me.add(me.tree);
}
});
var win = new Test.Window({
});
win.show();
});
Fiddle can be found here.

Ext JS Checkbox in Roweditor

does anybody know how to set the checkbox in a RowEditor into the center position?
I use the theme "triton" with Ext JS 6.0.0.
The checkbox is placed to the top of the row, but the other fields like textfield or combobox are placed to center.
It looks like:
i already set the style object of the checkbox to align: center but it didn't work.
plugins: { ptype: 'rowediting', clicksToEdit: 2, saveBtnText: 'Übernehmen', cancelBtnText: 'Abbrechen' },
initComponent: function() {
var me = this;
me.store = 'MeasurementPoint';
me.columns = [
{
xtype: 'actioncolumn',
width: 50,
sortable: false,
hideable: false,
resizable: false,
menuDisabled: true,
draggable: false,
items: [
{
icon: 'Content/images/icon_32/garbage.png',
tooltip: 'Löscht den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
Ext.Msg.show({
title: 'Löschen bestätigen!',
msg: 'Soll der Messpunkt \"' + record.data.Name + '\" wirklich gelöscht werden?',
width: 300,
buttons: Ext.Msg.YESNO,
fn: function(btn) { if (btn === 'yes') view.ownerCt.getStore().remove(record); },
//animateTarget: rowIdx,
icon: Ext.window.MessageBox.QUESTION
});
}
},
{
icon: 'Content/images/icon_32/pencil.png',
tooltip: 'Bearbeitet den Eintrag',
handler: function(view, rowIdx, colIdx, item, ev, record) {
if (this.__form)
return;
this.__form = Ext.widget('window', {
layout: 'fit',
width: 500,
title: 'Messpunkt bearbeiten',
items: { xtype: 'measurementpointform', header: false },
}).show();
this.__form.down('button[itemId=save-measurementpoint]').action = 'update-measurementpoint';
this.__form.down('form').loadRecord(record);
this.__form.on('close', function() { this.__form = false }, this, { single: true });
}
}
]
},
{
xtype: 'gridcolumn',
dataIndex: 'Active',
text: 'Aktiv',
width: 70,
renderer: AWA.ImageRenderer.CROSS,
editor: {
xtype: 'checkbox',
}
},
{
xtype: 'gridcolumn',
dataIndex: 'Manually',
text: 'Manuell',
width: 90,
renderer: AWA.ImageRenderer.TICK,
editor: {xtype: 'checkbox'}
}
Thank you guys for helpful anwers

I have overwritten the CSS and it works for me
.x-grid-editor .x-form-cb-wrap {
vertical-align: middle;
}
Thanks

ExtJs - Editor Grid Panel add column for delete rows

I've created Editor Grid Panel but I couldn't add column for delete rows. I've tried few versions but without any result.This is my code.I would like add delete column with row like icon not like tbar button.
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = true;//this.controllerThis.libraryListGrid.isValidValue(record);
item.setValue(record);
item.setValue(record);
}
}
}),
header: ' ',
id: 'name'
},
{
header: ' ',
text:'delete',
items: [{
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
//rec.store.remove();
alert("Delete " + rec.get('name'));
grid.getStore().remove(rec);
//grid.getStore().removeAt(rowIndex);
}
}]
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
return true;
var valid = new RegExp(/|s|/).test(field);
if(field.match(/^[s]/)){
helpsys.replaceFlashArea("Can not contain spaces!");
valid = false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
valid = false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
valid = false;
return false;
}
}, field);
if (!valid) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
}
this.allowEdit = valid;
return valid;
},
allowEdit: true,
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
}

I also want to do this type of requirement.I have used this code, try it.Its work for me.
var userCM = new Ext.grid.ColumnModel([
{
header: "UserName",
width: 15,
sortable: true,
dataIndex: 'username',
editor:new Ext.form.TextField({
readOnly:true
})
},{
xtype:'actioncolumn',
width: 5,
align: "center",
header: "Action",
id:'userEmailDeleteId',
icon: '../images/delete.png',
tooltip: 'Delete Email',
handler: function(grid,rowIndex) {
// write your logic here
}
}])

Thanks for help but I've found other an interesting way for that.
this.libraryListGrid = new Ext.grid.EditorGridPanel({
clicksToEdit: 1,
colModel: new Ext.grid.ColumnModel({
columns: [{
dataIndex: 'name',
editable: !this.config.viewOnly,
editor: new Ext.form.TextField({
allowBlank: true,
controllerThis: this,
listeners: {
blur: function(item){
var record =item.getValue();
var valid = this.controllerThis.libraryListGrid.isValidValue(item);
if(valid){
item.setValue(record);
}else{
item.setValue(record);
}
}
}
}),
header: ' ',
id: 'name'
},
{
header: '',
menuDisabled: true,
width: 35,
dataIndex: '',
fixed: true,
renderer: this.renderActions
}
]
}),
ds: this.libraryListDataStore,
height: 200,
width: 'auto',
isValidValue: function(field) {
var valid = true;
valid = field.match(/\s/);
if(!valid){
helpsys.replaceFlashArea("Can not contain spaces!");
return false;
}else{
if(!field.length >= 10){
helpsys.replaceFlashArea("lenght is longer then 10,10 is mximal size for this field!");
return false;
}
}
this.store.each(function (record){
if (record.id != this.gridEditor.record.id && record.get('name') == this.getValue()
&& record.get('name').length > 0) {
helpsys.replaceFlashArea(helpsys.locale.jobs.agent_environment.agent_environment_variables_validation);
return false;
}
}, field);
return valid;
},
allowEdit: true,
listeners: {
rowclick: {
fn: onRowClick,
scope: this
}
},
forceValidation: true,
loadMask: true,
renderTo: 'libraryListGrid',
selModel: new helpsys.AddRowSelectionModel(),
stripeRows: true,
tbar: [{
disabled: this.config.viewOnly,
text: helpsys.locale.agent_environments.add_variable_button,
handler : function(){
// access the Record constructor through the grid's store
var Plant = this.libraryListGrid.getStore().recordType;
var p = new Plant({
});
this.libraryListGrid.stopEditing();
this.libraryListDataStore.insert(0, p);
this.libraryListGrid.startEditing(0, 0);
},
scope: this
}],
view: new Ext.ux.grid.BufferView({
autoFill: true,
forceFit: true,
getRowClass: function(record, rowIndex, rp, ds){
}
})
});
},
renderActions: function(value, metadata, record, rowIndex, colIndex, store){
var columnValue = '<div class="rowAction deleteAction" ><div class="iconLinkIcon deleteIcon"></div></div>';
return columnValue;
}

How to select extjs grid action column using the query component from the MVC controller file?

starting with the MVC demo project guide I added an extra actioncolumn and I was wondering how to wire it in the controller file ?
guide: http://www.sencha.com/learn/the-mvc-application-architecture/
Ext.define('app.view.admin.viewlist', {
extend: 'Ext.grid.Panel',
columnLines: true,
region: 'center',
menuDisabled: true,
layout: 'fit',
initComponent: function (cnfg) {
this.columns = [
{
text: 'date',
dataIndex: 'Series',
sortableColumns: false,
hideable: false,
enableLocking: false,
width: 100
},{
hidden : true,
text:'Values',
sortableColumns : false,
hideable: false,
columns:[{
header: 'D1',
hidden: true,
dataIndex: 'D10EOD',
sortableColumns : false,
hideable: false
},{
xtype: 'actioncolumn',
icon: '/static/img/icon/table_refresh.png',
tooltip: 'Reset',
align: 'center'
}]
}
];
this.callParent(arguments);
}});
Controller init function
init: function() {
this.control({
'volatilityedit actioncolumn img' : { <--- ??
click: this.reset
}
});
},
reset: function(grid, rowIndex, colIndex) {
//var rec = grid.getStore().getAt(rowIndex);
alert("Go");
},
Thanks

Depend on what your actions should do you can decide if you need controler or not.
You should use controller when your action interacts with other components - otherwise you can write own methods inside component (grid)
Here you have simple example of grid with actioncolumn:
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId: 'employeeStore',
fields: ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
data: [{
firstname: "Michael",
lastname: "Scott"
}, {
firstname: "Dwight",
lastname: "Schrute"
}, {
firstname: "Jim",
lastname: "Halpert"
}, {
firstname: "Kevin",
lastname: "Malone"
}, {
firstname: "Angela",
lastname: "Martin"
}]
});
Ext.create('Ext.grid.Panel', {
title: 'Action Column Demo',
store: Ext.data.StoreManager.lookup('employeeStore'),
columns: [{
text: 'First Name',
dataIndex: 'firstname'
}, {
text: 'Last Name',
dataIndex: 'lastname'
}, {
xtype: 'actioncolumn',
width: 50,
items: [{
icon: 'app/resources/images/cog_edit.png',
// Use a URL in the icon config
tooltip: 'Edit',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('firstname'));
}
}, {
icon: 'app/resources/images/delete.png',
tooltip: 'Delete',
handler: function (grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Terminate " + rec.get('firstname'));
}
}]
}],
width: 250,
renderTo: Ext.getBody()
});
});

This is an example with an action column and a function in a controller:
View:
{
xtype: 'actioncolumn',
id:'actionColumnGridCas',
flex: 1,
hideable: false,
items: ['->',{
icon: '/images/user_edit.png',
tooltip: 'edit',
iconCls:'act-edit'
},
{
icon: '/images/user_delete.png',
tooltip: 'delete',
iconCls:'act-delete'
}]
}
Controller:
'.grid_alias actioncolumn[id=actionColumnGrid]': {
click: me.onActionColumnGridCasSelect
}
onActionColumnGridCasSelect: function(view, cell, rowIndex, colIndex, e) {
var m = e.getTarget().className.match(/\bact-(\w+)\b/);
if (m === null || m === undefined) {
return;
}
var action = m[1];
switch (action) {
case 'edit':
alert('edit');
break;
case 'delete':
alert('delete');
break;
}
}

EXTJS 3: Set autoHeight and autoWidth to grid

I am using EXTJS 3, I have code like below. The headache parts are
how to put atuo horizontal scrollbar to the Grid ?
how to let the Grid capture the max height ? how to set auto vertical scrollbar to the Grid ?
Currently, I have to manually set Grid to Frame and height .
frame: true,
height: 500,
If I do this way, when user changes the IE size, the horizontal scrollbar will be disappeared. and I have tried the autoHeight and autoWidth , it still doesn't work.
//register this namespace
Ext.namespace('MyPkg.Ui');
//create a class in this namespace
MyPkg.Ui.Report = Ext.extend(Ext.form.FormPanel, {
allowpaging: true,
pageSize: 30,
initComponent: function () {
var period_start = new Ext.form.DateField({
id: 'PERIOD_START',
fieldLabel: 'PERIOD START',
format: 'm/d/Y',
allowBlank: true,
width: 250
});
var Store = new Ext.data.DirectStore({
autoLoad: false,
paramsAsHash: false,
paramOrder: 'PERIOD_START',
root: 'Report',
totalProperty: 'total',
fields: [
{ name: '_DETAIL_ID', type: 'string' },
{ name: 'RUNID', type: 'string' },
....
],
remoteSort: false,
listeners: {
load: function (store, records, opt) {
//Grid.setHeight(500);
Grid.doLayout();
}
}
});
var pager = new Ext.PagingToolbar({
store: Store,
displayInfo: true,
pageSize: this.pageSize,
listeners: {
beforechange: function (paging, params) {
var reportStore = Ext.StoreMgr.lookup('Store');
reportStore.setBaseParam('start', params.start);
reportStore.setBaseParam('limit', this.pageSize);
reportStore.setBaseParam('PERIOD_START', period_start.getValue());
}
}
});
var Grid = new Ext.grid.GridPanel({
store: Store,
loadMask: true,
stripeRows: true,
frame: true,
height: 500,
colModel: new Ext.grid.ColumnModel({
defaults: {
width: 120,
sortable: true
},
columns: [
{header: '', dataIndex: 'ROW_ID'},
{ header: 'PRICING FEED', dataIndex: 'PRICING_FEED' },
{ header: 'DATAFILE TREE', dataIndex: 'DATAFILE_TREE' },
{ header: 'ADO LIST ID', dataIndex: 'ADO_LIST_ID' },
{ header: 'FEED RUN DATE', dataIndex: 'FEED_RUN_DATE_STR' },
.....
]
}),
viewConfig: {
forceFit: false
}
});
var config = {
items: [period_start, Grid],
api: {
submit: Report.ReadReport
},
bbar: pager,
tbar: [....]
}; //use the config we defined as the initial config for this class
Ext.apply(this, Ext.apply(this.initialConfig, config));
//use this function as the initComponent function
MyPkg.Ui.Report.superclass.initComponent.call(this);
}
});
Ext.reg('Report', MyPkg.Ui.Report);