I have the following code in which I want to make the title as selectable. As it is a header the .x-selectable class is getting added.
The code is as follows
Ext.create('Ext.grid.Panel', {
renderTo: document.body,
store: userStore,
width: 400,
height: 200,
title: 'Application Users',
columns: [
{
text: 'Name',
width: 100,
sortable: false,
hideable: false,
dataIndex: 'name'
},
{
text: 'Email Address',
width: 150,
dataIndex: 'email',
hidden: true
},
{
text: 'Phone Number',
flex: 1,
dataIndex: 'phone'
}
]
});
Is there any work around for this issue ?
You can use selectable()
selectable( ) : Ext.Element
Enable text selection for this element
(normalized across browsers)
You need need to get your grid title header element & need to call this function.
Like this:
<yourGrid>.getHeader().el.selectable();
Can be done in afterrender listener of grid:
listeners: {
afterrender: function(grid){
grid.down('header').getHeader().selectable();
},
},
For EXTJS 3.3.1 we need to remove the selectStart listener applied by default by extjs using removeAllListeners():
listeners: {
afterrender: function(panel){
panel.header.removeAllListeners();
}
}
Related
I'm facing issue of firing edit event using cell editor in Ext Js 3.4.
I'm trying to achieve triggering an ajax call upon a cell edited after pressing 'Enter'.
For now, I just replaced with console.log('hi') but it doesn't show anything after I pressed 'Enter'.
I'm not sure what's wrong in my code. Appreciate if someone can point it out. Thanks.
var grid = new Ext.grid.EditorGridPanel({
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false,
listener: {
edit: function (el) {
console.log('hi');
}
}
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
Solution:
Use EditorGridPanel afteredit event:
afteredit(e)
Fires after a cell is edited. The edit event object has the following
properties
grid - This grid
record - The record being edited
field - The field name being edited
value - The value being set
originalValue - The original value for the field, before the edit.
row - The grid row index
column - The grid column index
Parameters:
e : Object An edit event (see above for description)
Example:
Ext.onReady(function () {
var api_store = new Ext.data.ArrayStore({
fields: ['key', 'name'],
data: [
['1', 'Name1'],
['2', 'Name2'],
['3', 'Name3']
]
});
var grid = new Ext.grid.EditorGridPanel({
renderTo: Ext.getBody(),
store: api_store,
loadMask: true,
clicksToEdit: 1,
tbar: [{
text: 'Create',
handler: function () { }
}],
listeners: {
afteredit: function(e) {
console.log('After edit. Column: ' + e.field);
}
},
columns: [
{
id: 'name',
header: 'Key Name',
width: 300,
sortable: true,
dataIndex: 'name',
editor: {
xtype: 'textfield',
allowBlank: false
}
},
{
header: 'Key Value',
width: 500,
sortable: false,
dataIndex: 'key'
}
],
sm: new Ext.grid.RowSelectionModel({ singleSelect: true }),
viewConfig: {
forceFit: true
},
height: 210,
stripeRows: true,
height: 350,
title: 'Keys'
});
});
I would like to manage specific checkboxes while loading/render grid with checkboxmodel.
How I can hide or set value for some checkboxes depending on other column value?
Ext.create('Ext.grid.Panel', {
renderTo: Ext.getBody(),
scrollable: true,
store: {
type: 'mystore'
},
selModel: {
selType: 'checkboxmodel'
},
listeners: {
"onCheckboxRender" : function ( me, selected, eOpts ) {
if(selected.data['id'] == 2) {
//hide or check checkbox
}
}
columns: [{
text: 'id',
dataIndex: 'id'
}, {
text: 'company',
dataIndex: 'company'
}]
}
The result should be like on photo:
Is it possible to make with checkboxmodel plugin or i need to use 'checkcolumn'?
Here's an EXTJS rowexpander implementation
http://jsfiddle.net/Litote0707/xPpf2/
When you expand it, you can see the price.
Instead of price, can I show another custom grid something like this?
Ext.define('my.app.main.CustomList', {
extend: 'Ext.grid.Panel',
title: 'List in Rowexpander',
store: Ext.data.StoreManager.lookup('myStore'),
columns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400
});
As I am a newbie to Ext JS and Sencha Architect, I am a but struggling here :(
I have one grid whihc shows two columns ID and Name as follow
ID | Name
1000 CA
1001 TX
1002 VA
There are two buttons Add & Update.
Code of the grid is as follow:
items: [
{
xtype: 'panel',
scrollable: true,
title: 'Plant',
dockedItems: [
{
xtype: 'gridpanel',
buttons: [
{
text: 'Add Plant',
handler: function() {
});
}
},
{
text: 'Update Plant',
handler: function() {
Ext.create('XYZ.view.UpdatePlantWindow', {
title: 'Update Plant'});}
}
],
buttonAlign: 'center',
dock: 'top',
id: 'PlantGrid',
scrollable: true,
store: 'PlantStoreAdmin',
columns: [
{
xtype: 'gridcolumn',
dataIndex: 'ID_PLANT',
text: 'Plant ID'
},
{
xtype: 'gridcolumn',
dataIndex: 'DS_PLANT',
text: 'Plant Name',
flex: 1
},
Now when user selects any row and clicks on Update Button, new window opens which has two text fields ID and Name. I want to populate these two fields with appropriate values that user has selected in the grid.
Code of windows:
Ext.define('XYZ.view.UpdatePlantWindow', {
extend: 'Ext.window.Window',
alias: 'widget.updateplantwindow',
requires: [
'Cepheid.view.UpdatePlantWindowViewModel',
'Ext.container.Container',
'Ext.form.field.Text'
],
viewModel: {
type: 'updateplantwindow'
},
autoShow: true,
height: 250,
width: 400,
title: 'Update Plant',
items: [
{
xtype: 'container'
},
{
xtype: 'textfield',
disabled: true,
id: 'PlantIDUpdate',
fieldLabel: 'Plant ID'
},
{
xtype: 'textfield',
fieldLabel: 'Label',
id: 'PlantNameUpdate'
}
]
});
Now how do I populate both the text fields with appropriate values?
Thanks in advance !
You can use the SelectionModel to get the currently selected record(s) in the grid. ie:
var selection = myGrid.getSelectionModel().getSelection();
And i'd recommend wrapping the fields in your window in a form because then you could use the loadRecord method to push the selection values to the form.
ie.
myWindow.down('form').getForm().loadRecord(selection[0]);
otherwise, if you don't want to wrap in the form you could load each individual value on the window:
myWindow.down('#myField').setValue(selection[0].get('my_value'));
Here is a fiddle demonstrating a working example
I have this code:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true
});
tb = Ext.getCmp('head-toolbar');
tb.add({
text: 'Export',
menu: Ext.create('Ext.menu.Menu', {
items: [
{
text: 'Export',
handler: function () {
var win = new innerWindow();
win.show();
}
}
]
})
});
It creates a dropdown that has a value called 'export'. I have managed to make it so that, when I click the 'Export', I get a window. For now this window is empty. What I have been looking for, and unable to find, is how to create a window that has some text inside, and some options (dropdown box), and labels etc.
More precisly, I want a window like the one I attached. I'm sure I can find examples on how to create this, but I just don't know what to search for. Searching on "Extjs window" and similar words, didnt bring me the help I'm looking for, nor looking at Senshas homepage (which normally has lots of brilliant examples).
Can someone help me out?
Thanks
In your code change
var win = new innerWindow();
to
var win = Ext.create('innerWindow');
Then just define your window with the form inside:
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items: [{
xtype: 'form',
items: [{
xtype: 'textfield',
fieldLabel: 'Age',
name: 'age'
},{
xtype: 'textfield',
fieldLabel: 'Height',
name: 'height'
}],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
});
The documentation is here: form, textfield, combobox. Start reading the guides. You must read the docs to understand. ExtJs doc is well written.
Each ExtJS component has a property named items...
You should be adding the fields you want into the items property.
It would look something like this..
Ext.define('innerWindow', {
extend: 'Ext.window.Window',
title: 'title',
height: 200,
width: 500,
modal: true,
items:[
{
xtype:"textfield",
......
},{
xtype:"combobox",
store:myStore,
.......
}
]
});
You should check the docs of Window, it does have info about items, and it also does include examples.
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.window.Window
You should also include a layout for that window, for it to know how to arrange its items. Here's a link showing all types of layouts: http://dev.sencha.com/deploy/ext-4.0.0/examples/layout-browser/layout-browser.html
Also, I'm not sure about the new innerWindow, I'd rather use Ext.create('innerWindow') to create a new instance of a component you've defined.
Set Extjs Script
<script type='text/javascript' src='http://cdn.sencha.io/ext-4.2.0-gpl/ext-all.js'></script>
Set Extjs CSS
<link href="http://cdn.sencha.com/ext/gpl/4.2.0/resources/css/ext-all.css" rel="stylesheet"/>
Set Code
<script type='text/javascript'>
Ext.onReady(function() {
Ext.create('Ext.window.Window', {
title: 'Windows',
closable: true,
closeAction: 'hide',
width: 350,
minWidth: 250,
height: 125,
animCollapse:false,
border: false,
modal: true,
layout: {
type: 'border',
padding: 5
},
items: [{
xtype: 'form',
items: [{
xtype : 'combo',
fieldLabel : 'Age',
width : 320,
store : [ '18', '19', '20' ]
},{
xtype : 'combo',
fieldLabel : 'Height',
width : 320,
store : [ '1', '2', '3' ]
},],
fbar: [{
text: 'Submit',
formBind: true,
itemId: 'submit'
}]
}]
}).show();
});
</script>
Similar you want http://jsfiddle.net/ba3wnwpo/