I am working in extjs4. I have gridview as-
{
xtype : 'grid',
id : 'g2',
store : 'qb.qbquestionoptionStore',
columns : [ {
text : 'Options',
dataIndex : 'option',
flex : 1
}, {
text : 'Answer',
dataIndex : 'isAnswer',
flex : 2.5
},{
header : 'edit',
renderer : function(val) {
return 'Edit';
}
},
Above grid is showing option and isAnswer field. I am also having addoption button. When i am clicking on this button,its showing new option creation window as-
on click of its save button i want to add thses new option and isAnswer fields value in above grid.I have retrived thses newly inserted field values by code-
var win = button.up('window');
form = win.down('form');
record = form.getRecord(), values = form.getValues();
console.log(values.option);
console.log(values.isAnswer);
So how to insert these values in above grid?
There is separation between data and view in ExtJs. All data related stuff is handled via stores and models. So if you want to insert new row into the grid you should insert it into the corresponding store:
var store = Ext.getStore('qb.qbquestionoptionStore');
store.add(form.getValues());
Related
I am relatively new to Dojo. I am using a DataGrid, where in I have a textbox in one of the columns. I want to know the row index of the grid when the user enters some data in the textinput of that particular row.
'name' : 'Partner Column Name',
'field' : 'text',
'width' : '25%',
'field' : 'partnerColumnName',
'text-align': 'center',
'editable' : true,
'type' : dojox.grid.cells._Widget,
'formatter' : function()
{
return new dijit.form.TextBox({style:"width:100%", id: "textBox_"+counter++, onChange: function ()
{
// Here I want to know the row index of the grid.
}
Can someone help me in this respect.
Thanks,
Nirmal Kumar Bhogadi
When viewing the code of the datagrid (dojox/grid/cells/_Base to be precise) I noticed that the formatter callback gets two parameters:
The original value
The row index (inRowIndex)
So based on that you can easily retrieve the row index, for example:
formatter: function(myValue, rowIndex) {
// Do something with rowIndex
}
I think you need the whole selected row data of your grid? This is what I use in my project:
var grid = dijitRegistry.byId('yourGridId');
if (!grid || !grid.selection || grid.selection.getSelected()) {
console.log(grid.selection.getSelected());
}
I have started to use ExtJs 4. I have grid with buttons in one column. I can't manage to get button click for button in selected cell by controller. I would like to get click and then details for row in order to open extra window with details.
Code:
Ext.define('AP.controller.List', {
extend : 'Ext.app.Controller',
stores : ['Users'],
models : ['User'],
views : [ 'List', 'Details' ],
init : function() {
console.log("users");
this.control({
'viewport > listPanel > userlist' : {
itemdblclick : this.userDbCClicked
},
'viewport > listPanel button AND WHAT MORE ?' : {
click : this.statusButtonClicked
}
});
},
userDbCClicked : function(grid, record) {
console.log("user db clicked");
},
statusButtonClicked : function(grid, record) {
// Here I would like to get row details after click on button in column
console.log("statusButtonClicked clicked ");
}
});
What should be put instead this code:
'viewport > listPanel button AND WHAT MORE?' : {
click : this.statusButtonClicked
}
Of course it dosen't work. How to get row by click on button in cell ?
Thanks in advance for help.
ExtJs is very powerfull framework but first steps are realy difficulted sometimes.
Bogus
put an action:'statusbutton' in your button config
then use 'viewport > listPanel > button[action=statusbutton]'
What Chris says is true. You can also you a name property on your button, it's just a way of querying your components. Explained here:
http://docs.sencha.com/ext-js/4-1/#!/api/Ext.ComponentQuery
{
xtype: 'button',
name: 'statusbutton'
}
'viewport > listPanel > button[name=statusbutton]'
Here is a good starting guide for Ext.Apps:
http://docs.sencha.com/ext-js/4-1/#!/guide/mvc_pt1
and another one:
http://docs.sencha.com/ext-js/4-1/#!/guide/application_architecture
In a asp.net C# webapp I'm using the CKEditor 3.6.2 and I'm facing the following problem:
In my stylesheet I have a CSS class to use in tables and I'm trying to bring this class already filled in the "Table properties", "Advanced" tab and the "Stylesheet Classes" field.
I want to bring this field filled with the string "blue_table", which is the name of my CSS class. I'm working with the source of the "table" plugin. I have figured out how to change the value of fields like width and height, but the one I want is the "Stylesheet Classes" field.
Do any of you know to to set a default value for this field?
You don't have to edit the ckeditor.js file to customise the editor. You can add the following either to config.js and use it site wide or on any page where you're using CKEditor (inside a script tag as below, after the editor fields you're using).
<script type="text/javascript">
CKEDITOR.on( 'dialogDefinition', function( ev ) {
// Take the dialog name and its definition from the event data.
var dialogName = ev.data.name;
var dialogDefinition = ev.data.definition;
// Check if the definition is from the dialog we're
// interested on (the Table dialog).
if ( dialogName == 'table' ) {
// Set the tab
var advTab = dialogDefinition.getContents( 'advanced');
// Grab the field
var stylesField = advTab.get('advCSSClasses');
// Set the default value
stylesField['default'] = 'blue_table';
}
});
</script>
This is modified from the CKEditor documentation. The hardest part is working out the IDs and names for all the fields used in the dialogs.
Finally I found the answer. This property is in the dialogadvtab, in the property "advCSSClasses". The thing is that this plugin is inside the core js, I mean the ckeditor.js.
I had to do this :
children :
[
{
id : 'advCSSClasses',
att : 'class',
type : 'text',
label : lang.cssClasses,
'default' : 'blue_table',
setup : setupAdvParams,
commit : commitAdvParams
}
]
The "problem" now is that I had to do it in the ckeditor.js, which is not a good practice. The problem is solved, but not int the best way.
Can someone please throw some light on how to go about rendering an hyperlink in the cells of a particular column in ExtJS?
I have tried binding the column to a render function in my JS, from which I send back the html:
SELECT
However, with this, the problem is that, once I hit the controller through the link, the navigation is successful, but subsequent navigations to the data-grid show up only empty records.
The records get fetched from the DB successfully through the Spring MVC controller, I have checked.
Please note that this happens only once I use the row hyperlink in the extJS grid to navigate away from the grid. If I come to the grid, and navigate elsewhere and again come back to the grid, the data is displayed fine.
The problem only occurs in case of navigating away from the grid, using the hyperlink rendered in one/any of the cells.
Thanks for your help!
This is for ExtJS 4 and 5.
Use a renderer to make the contents look like a link:
renderer: function (value) {
return ''+value+'';
}
Then use the undocumented, dynamically generated View event cellclick to process the click:
viewConfig: {
listeners: {
cellclick: function (view, cell, cellIndex, record, row, rowIndex, e) {
var linkClicked = (e.target.tagName == 'A');
var clickedDataIndex =
view.panel.headerCt.getHeaderAtIndex(cellIndex).dataIndex;
if (linkClicked && clickedDataIndex == '...') {
alert(record.get('id'));
}
}
}
}
Try something like this:
Ext.define('Names', {
extend: 'Ext.data.Model',
fields: [
{ type: 'string', name: 'Id' },
{ type: 'string', name: 'Link' },
{ type: 'string', name: 'Name' }
]
});
var grid = Ext.create('Ext.grid.Panel', {
store: store,
columns: [
{
text: 'Id',
dataIndex: 'Id'
},
{
text: 'Name',
dataIndex: 'Name',
renderer: function (val, meta, record) {
return '' + val + '';
}
}
...
...
...
However my thanks to - ExtJS Data Grid Column renderer to have multiple values
Instead of using an anchor tag, I would probably use plain cell content styled to look like an anchor (using basic CSS) and handle the cellclick event of the GridPanel to handle the action. This avoids dealing with the anchor's default click behavior reloading the page (which is what I'm assuming is happening).
I created a renderer so it looked like you were clicking on it.
aRenderer: function (val, metaData, record, rowIndex, colIndex, store){
// Using CellClick to invoke
return "<a>View</a>";
},
But I used a cell event to manage the click.
cellclick: {
fn: function (o, idx, column, e) {
if (column == 1) // Doesn't prevent the user from moving the column
{
var store = o.getStore();
var record = store.getAt(idx);
// Do work
}
}
}
For these purposes I use CellActions or RowActions plugin depending on what I actually need and handle cell click through it.
If you want something that looks like an anchor, use <span> instead and do what #bmoeskau suggested.
You can use 'renderer' function to include any HTML you want into cell.
Thanks guys for your response.
AFter debugging the extJS-all.js script, I found the issue to be on the server side.
In my Spring MVC controller, I was setting the model to the session, which in the use-case I mentioned earlier, used to reset the "totalProperty" of Ext.data.XmlStore to 0, and hence subsequent hits to the grid, used to display empty records.
This is because, ext-JS grid, checks the "totalProperty" value, before it even iterates through the records from the dataStore. In my case, the dataStore had data, but the size was reset to null, and hence the issue showed up.
Thanks to all again for your inputs!
I have a dojo grid which is using some editable dijit form fields. All is well, until I try ot implement an country (multi) select cell as an Tooltip Dialog; i.e., show a drop down button which opens the tooltip dialog populated with a checkbox array to select one or more country. Once checked and clicked OK, the cell should update with a list of selected countries. Obviously I'll take care of updating the server via the store later on.
I've implemented a country select tooltip dialog which works fine like so:
dojo.provide("CountrySelector");
dojo.declare(
"CountrySelector",
[dijit.form.DropDownButton],
{
label: 'Countries',
dropDown: new dijit.TooltipDialog({ execute: function() {
console.log("EXECUTE : ", arguments[0]);
this.value = arguments[0].country;
}, href:'/cm/ui/countries' }),
postCreate: function() {
this.inherited(arguments);
this.label = this.value;
dojo.connect(this.dropDown, 'onClose', function() { console.log('close'); });
console.log("CountrySelect post create", this);
},
}
);
And the grid cell is typed as:
{ name: 'Countries', field: 'targeting.countries', editable: true, hidden: false, type:dojox.grid.cells._Widget, widgetClass: CountrySelector },
All is working fine but I can't figure out how to update cell's content and store once the widget is executed. As well, I don't seem to have the row id of the updated row.
Any ideas?
Thanks,
Harel
//Layout:
gridLayout: {rows: [{name: 'Coll Name',field: 'colField', type: dojox.grid.cells.ComboBox, editable:'true', width:'8%',options: [], alwaysEditing:false}]}
//Grid Store:
this.gridStore = new dojo.data.ItemFileReadStore({data: {items: data}});
//
var setOptions = function(items, request){
this.gridLayout.rows[0].options.push('Val 1','Val 2');
this.gridLayout.rows[0].values.push('1','2');
dojo.connect(this.gridLayout.rows[0].type.prototype.widgetClass.prototype, "onChange",this, "_onComboChange");
}
this.gridStore.fetch({onComplete: dojo.hitch(this,setOptions)});
_onComboChange: function (selectedOption) {
console.info("_onComboChange: ",selectedOption);
},
// If you need to populate combos with different values you can use onItem
var getArray = function(item, request){
// populate one by one
// attach an event to each combo
}
this.gridStore.fetch({onItem: dojo.hitch(this,getArray)});
This is what i used to update my grid
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
More detail
every row is identified by its identifier
yourGrid.store.fetchItemByIdentity({
identity: <yourIdentity>,
onItem: function(item){
// Update your attributes in the store depending on the server response
// yourGrid.store.setValue(item, <attribute>,<value>);
var idx = yourGrid.getItemIndex(item);
if (idx >- 1) {
yourGrid.updateRow(idx);
}
}
});
I didn't set up a test with your code but you should be able to do it by just creating a method named getValue in your widget that returns the value.
Take a look at the other examples (like dojox.grid.cells.ComboBox) to get an idea of what getValue should look like.