I have an Ext grid panel as following.
var plannedGrid = new Ext.grid.GridPanel({
store : plannedGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170,
renderer : function(value, metaData, record, rowIndex,
colIndex, store) {
var refColor = record.data.tourTypeColor;
//console.log(record);
metaData.attr = 'style="background-color:' + refColor + ';"';
return record.get('locationName');
}
}, {
xtype : 'actioncolumn',
header : "GPS",
items : [ {
icon : 'images/gps.jpg',
tooltop : 'Get GPS',
handler : function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
alert("Edit " + rec.get('locationName'));
}
} ]
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
}, {
header : "",
sortable : true,
dataIndex : 'colorCode',
width : 30
} ]),
sm : selectModel,
//width : 435,
height : 400,
//autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'/*,
listener : {
selectionchange : function() {
Ext.getCmp('btnHold').enable();
}
}*/
//renderTo : document.body
});
The data of this grid panel are coming from another grid. And also I have a button in a button group as following.
{
text : 'Hold Drop/Pick',
id : 'btnHold',
iconCls : 'add',
width : 120,
// textAlign: 'center',
//style : 'margin:5px',
style : {
textAlign: 'center',
margin : '5px'
},
disabled : true
}
This button is disabled. What I want is, I need to enable this button when user clicks a row of the grid panel.
I am using ExtJs 3.4.
How should I do that ?
Kind regards
Use 'rowclick' listener (for grid):
listeners: {
rowclick: function(grid, idx){
Ext.getCmp('btnHold').enable();
}
}
P.S. It's very bad when you use 'id' parameter in your components. Try to remove it and get access to button by using another components. Sorry for my english, guys!
Related
For a month I have started working with Ext.Js 4, creating all kind of widgets. Right now I am tying to implement a drop-down option for a column header.
That can be based on something like this ColorPicker
https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker
My code creates a Grid Panel like in this img
Ext.apply(me, {
items : [{
xtype : 'gridpanel',
itemId : 'gridpanelId',
margin : '0 0 0 0',
layout : 'fit',
viewConfig : {
emptyText : '',
deferEmptyText : false,
markDirty : false
},
ftype : 'filters'
}],
store : errorstore,
plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
pluginId : 'celledit',
clicksToEdit : 1
})],
tbar : [{
xtype : 'ixbutton',
itemId : 'tbarswitcha',
text : '',
bgCls : 'but-image-base tbar_error_quit',
height : 60,
width : 90,
margin : '0 10 0 10'
}],
columns : [{
header : 'Startdate',
itemId : 'ColumnStartdate',
dataIndex : 'startdate',
flex : 2,
sortable : true,
renderer : function(value) {
return MyApp.app.formatDate(value);
}
},{
header : 'Source',
itemId : 'ColumnSource',
dataIndex : 'source',
flex : 3,
sortable : false
}
],
bbar : {
xtype : 'ixpagingtoolbar',
itemId : 'ixpt',
margin : '5 10 5 10',
numbButtons : 4,
width : 400
}
}]
});
I am trying to build a possibility for the user to choose a specific type of 'Source'. Something like a filter, where the user has pre-defined options from which to choose, and not to type in.
How should I define a drop-down inside this
columns : {
header : 'Source'
}
Any items you put in a column is placed in the header. Simple example without any styling:
columns = [
{
header: 'Source',
items: [
{
xtype: 'button',
text: 'Options',
menu: {
items: [
{
text: 'Item1'
},
{
text: 'Item2'
},
]
}
}
]
},
]
Question
I have a button which when clicked shows a menu using menuShow function. The menu has a treepanel which has many parent nodes and child nodes. The problem is when we click on expand arrow of any parent child the function menuHide() gets called and instead of expanding the menu collapses. The problem is specific to IE9/10 and it is working fine with Chrome.
Code
The piece of code for button is :
'Ext.button.Button', {text: '<span class="Copy" style="color:#000000"><I>Click to select a scenario<I></span>',
listeners: {menuHide : function(btn, menu, opts) {//logic},
menuShow : function(btn, menu, opts){ //logic}},
menu : {
xtype : 'menu',
styleHtmlContent : 'true',
width : 300,
style :{
'border': '0px solid #FFFFFF'
},
shadow : false,
items : [{ xtype: 'label', width : 250, text: 'click here'},
{
xtype : 'treepanel',
autoScroll : 'true',
itemId : 'treePanelID',
height: 190,
width : 270,
store : this.store,
style : {'font-family': 'Helvetica Neue,Arial',
'font-size': '18px',
'font-weight': 'bold',
'line-height': '20px',
'letter-spacing': '0px'
},
useArrows : true,
margin : '-20 0 0 15'
columns: [{
xtype : 'treecolumn',
dataIndex : 'text',
menuDisabled : true,
width : 100,
flex : 1,
renderer : function(value, values,record)
}],
listeners : {
itemclick : function( record, index, eOpts ){
if(index.isLeaf()){ logic }
else{ logic}
} } }]}}
I have following container with several buttons:
{
xtype : 'container',
width : 320,
layout : 'hbox',
cls : 'readable-form no-border',
labelSeparator : '',
ref : '../sendBackForm',
layoutConfig: {
padding:'5',
pack:'center',
align:'middle'
},
style : {
margin : 'auto'
},
items : [ {
xtype : 'button',
itemId : 'yes',
iconCls : 'save-button-icon',
text : 'Yes',
ref : '../../yes'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'checker',
iconCls : 'save-button-icon',
text : 'Back to checker',
ref : '../../checker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'prebooker',
iconCls : 'save-button-icon',
text : 'Back to prebooker',
ref : '../../prebooker'
}, {
xtype : 'spacer',
width : 10
}, {
xtype : 'button',
itemId : 'cancel',
text : 'Cancel',
ref : '../../cancel'
}, {
xtype : 'spacer',
width : 90
}, {
xtype : 'button',
itemId : 'ok',
hidden : true,
text : 'Ok',
ref : '../../ok'
} ]
}
the problem is when i hide all buttons and want to show only ok button, it appears near left window corner, how i can place it in the middle of the window?
Have you tried you add this following code on your container ? : autoEl: {tag: 'center'}
you can try placing spacers before and after "OK" button,
...
items: [
...
{xtype: 'tbspacer', flex: 1},
{
xtype : 'button',
itemId : 'btnok',
hidden : true,
text : 'Ok',
ref : '../../ok'
},
{xtype: 'tbspacer', flex: 1}
...
and "OK" and "Cancel" button handlers
....
bindHandlers: function(){
var me = this;
me.getComponent('btnok').on('click', function(){
me.toggleButtons(true);
});
me.getComponent('btncancel').on('click', function(){
me.toggleButtons(false);
});
},
toggleButtons: function(visible){
this.getComp('btnyes').setVisible(visible);
this.getComp('checker').setVisible(visible);
this.getComp('prebooker').setVisible(visible);
this.getComp('btncancel').setVisible(visible);
this.getComp('btnok').setVisible(!visible);
}
...
Or manually add spacers before and after "OK" button
Looks like layoutConfig won't work anymore Set 'pack' and 'align' in layout config itself, fiddle here (Click on 'Yes' button to hide all except 'Ok')
I have an ExtJS window that has 2 separate panels with checkboxgroups. They both show the same values, but user cannot select the same item from both checkboxgroups.
I want to deal with this a little fancier than just checking and alerting a warning in both ckeckboxgroup's listeners when user selects already selected value in another checkboxgroup.
To avoid alerts, I want to either hide or disable the box.
I have tried to add hidden:true or disabled:true but no luck:
Ext.create('widget.window',
{
title : 'Select a value',
draggable : true,
modal : true,
closable : true,
closeAction : 'destroy',
width : 400,
height : 350,
layout:
{
type : 'hbox',
align : 'stretch'
},
items :
[{
xtype : 'panel',
title : 'Success',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'success',
columns : 1,
vertical : true,
items : yes_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}]
},
{
xtype : 'panel',
id : 'panel_failure',
title : 'failure',
autoScroll : true,
flex : 1,
items :
[{
xtype : 'checkboxgroup',
itemId : 'failure',
columns : 1,
vertical : true,
items : no_checkbox,
listeners :
{
change: function(field, newValue, oldValue, eOpts)
{
// newValue.rb
}
}
}],
}],
});
I tried to get the panel_failed like Ext.getCmp('panel_failed').items.add(//something here) inside the change listener. But I cannot figure out whether the add() is the right method, and if is, what is the format to write inside the function.
Thanks
You can define itemId of all your checkboxes and then will be easy to select and disable them with setDisabled(true);
I am building a login window with ExtJs, using the following code :
Ext.define('DTL.view.windows.LoginWindow', {
extend : 'Ext.window.Window',
alias : 'widget.login',
id : 'loginWindow',
autoShow : true,
width : 400,
height : 180,
layout : 'border',
border : false,
modal : true,
closable : false,
resizable : false,
draggable : false,
initComponent : function () {
this.items = [{
region : 'north',
height : 52,
bodyCls : 'app_header'
}, {
id : 'login_form',
region : 'center',
xtype : 'form',
bodyStyle : 'padding:10px; background: transparent;border-top: 0px none;',
labelWidth : 75,
defaultType : 'textfield',
items : [{
fieldLabel : 'Username',
name : 'username',
id : 'usr',
allowBlank : false
}, {
fieldLabel : 'Password',
name : 'password',
inputType : 'password',
id : 'pwd',
allowBlank : false
}
]
}
];
this.buttons = [{
id : 'login_button',
text : 'Login',
disabled : true
}
];
this.callParent(arguments);
}
});
Now everything looks fine, except the fact that the password field has no borders.
I tried various code modifications, but nothing helped.
Does anyone have an idea to fix this?
I am using ExtJs 4.0.7
EDIT :
I made another interesting discovery. If I add a third textfield the bug will move to that one.
Apparently it affects always the last textfield.
The problem is caused by how you create the window. See this Sencha forum post:
Textfield Border Problem
i.e. you need to use Ext.create('DTL.view.windows.LoginWindow'); rather than xtype: 'login'