I am creating a component which has a couple radio buttons. Currently the radio button label is on the right of each button, I want it on the left. How can do that ?
Using the boxLabelAlign config.
{
xtype: 'radiofield',
anchor: '100%',
fieldLabel: 'Label',
boxLabel: 'Box Label',
boxLabelAlign: 'before'
}
Related
In my Angular application I have a grid that is almost identical to the Group Selection example in the ag-Grid docs: https://www.ag-grid.com/javascript-grid-selection/#gsc.tab=0
My requirement is slightly different in that my expand button needs to both expand the row and select the row. As you see in the plunker example selection and expansion are two separate click events, but I am looking to select the row and expand that same row in one click, without having the user click on the checkbox and the expand button. I have tried doing this with css by making the checkbox transparent and placing it over the expand icon, but the click is highjacked so only one event will fire...
Is this possible in ag-Grid?
In my component by columnDefs for the column that has my checkbox and expand icon looks like so:
...
this.gridOptions.columnDefs = [
{
headerName: '', width: 100, cellRenderer: 'group',
// for parent row selection - checkboxes for parent rows
checkboxSelection: function(params) {
return params.node.canFlower;
},
cellRendererParams: { value: ' ' }, colId: 'PlusIcon', pinned: 'left', cellClass: 'center'
},
...
Listen to the rowGroupOpened event and set the row to selected:
// inside the ag-grid tag
(gridReady)="onGridReady($event)"
// inside the AppComponent class
onGroupOpened(event){
event.node.setSelected(true)
console.log(event)
}
plnkr example
I want to highlight ExtJS Form Panel itself after a specific event. I have been trying the code added below but it just highlights the container panel which is hardly seen.
Code Snippet
myForm.getEl().highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
Sencha Fiddle Link: https://fiddle.sencha.com/#fiddle/fij
Your code is working correct. You are selecting the container element by using getEl() method on your formpanel. The textarea is covering your panel, so you see the easing effect at the bottom. If you want to highlight your fields, you have to iterate through the form fields by using the each method:
Ext.application({
name: 'Fiddle',
launch: function() {
Ext.create('Ext.form.Panel', {
title: 'My Form',
id: 'myform',
renderTo: Ext.getBody(),
width: 500,
height: 250,
items: [{
xtype: 'textarea',
width: '100%',
hideLabel: true,
value: 'Some text'
},
{
xtype: 'textfield',
width: '100%',
hideLabel: true,
value: 'Some other text'
}],
buttons: [{
text: 'Highlight',
handler: function() {
Ext.getCmp('myform').getForm().getFields().each(function(field) {
field.inputEl.highlight("ffff9c", {
attr: "backgroundColor",
endColor: "ffc333",
easing: 'easeIn',
duration: 1000
});
});
}
}]
});
}
});
In this working example, you are changing the background color. The standard css class contains a background image for input fields, so you have to remove it temporarily during the effect. This can be made with a custom css class to override the background-image property.
Hope it helps
....or even Better just get the form's Targeted EL.
App.myFormPanel.getTargetEl().highlight();
You won't have to manually iterate through each elements within the form.
I have a grid with two checkcolumns and a text field
{
xtype: 'checkcolumn',
id: 'apprId',
text: '<b>Approve</b>',
width: 100,
dataIndex: 'aprvInd'
},
{
xtype: 'checkcolumn',
id: 'declId',
text: '<b>Decline</b>',
width: 100,
dataIndex: 'declInd'
},
{
id: 'declResnId',
header: '<b>Decline Reasons</b>',
dataIndex: 'declineReason',
align: 'center',
width: 200,
editor: new Ext.form.TextField({
maxLength: 100000
}),
}
if my grid has three rows, first row 'approve' checkbox checked, second row 'decline' checkbox checked and third row nothing checked.
on click of save button, i am doing a rest call and i m passing the data to db, and on success call back , i m reloading grid.
After reloading, the rows which have approve/decline checked should be disabled along with the 'declineReasons' text field.
How can i do this?
If you want to grey out the row I would look at the metaData parameter of the renderer config. Probably the trCls is referenced there.
To disable a checkbox I also would look at the renderer.
To disable the editor plugin look at the beforeedit event.
this.changePasswordWin = Ext.create('Ext.window.Window', {
title: "Change Password",
modal: true,
closeAction: 'hide',
animateTarget: Ext.getDoc(),
items: [ this.textfieldPanel ],
dockedItems: [{
xtype: 'toolbar',
dock: 'bottom',
border: false,
}]
});
The above code is working fine with animate from top left. But i want this to animate from top right. Help me! Thanks in advance.
set x: screen.width. It will set the position of the window to the right corner. if it is not exactly minus the position based on the browser screen.
When moving between panels I get the following error
[WARN][Ext.Component#constructor] Registering a component with a id (`logOutButton`) which has already been used. Please ensure the existing component has been destroyed (`Ext.Component#destroy()`.
I can go back to the previous screen but the cannot go forward again without getting the above error.
To combat this I have tried using the code below, but it does not work. Can anyone help me out?
var loginView = Ext.getCmp('login');
if(!loginView){
Ext.getCmp('loginTest2').destroy();
loginView = Ext.create('com.view.Login');
}
Ext.Viewport.setActiveItem('login');
I also tried:
if(Ext.getCmp('login')){
Ext.Viewport.setActiveItem('Login');
}else{
Ext.Viewport.setActiveItem(Ext.create('com.view.Login'));
}
Neither of these work and result in the same error and a blank screen. I am using Sencha Touch 2.
we can simply use following line to navigate from one panel to another..
Ext.Viewport.animateActiveItem({ xtype: "cat" }, { type: "slide", direction: "up" });
here, xtype is that we can define for the panel we want to display, like this...,
Ext.define('BeLocal.view.LeftCurveList', {
extend: 'Ext.Panel',
**xtype: 'cat',**
config: {
items: [
{
xtype: 'toolbar',
docked: 'top',
width: '100%',
padding:0,
title: 'BeLocal Places',
items:[{
xtype: 'button',
ui: 'back',
text: 'Back',
]
},
]
}
});
To avoid this error do not use id for button or any other item instead of id use action config for button or use item id .to destroy a component using itemId simply use this`
Ext.ComponentQuery.query('list[action=diaryselectlist]')[0].destroy();
above it just destroying a list to whom i gave action not id you can give itemId instead of action in this ..
hope you will enjoy this