I work with extjs 3.4
I have a problem when I try to assign defaut value in combobox
this is my code :
<form:combobox property="from_tr"
displayField="fullname" valueField="id"
allowBlank="true" editable="true" forceSelection="true"
pageSize="10" hideTrigger="true" width="400"
fields="address" lang="<%=lang%>"
tpl='<tpl for="."><div class="x-combo-list-item"><b>{fullname}</b><br>{address}</div></tpl>'
dataStore="com.testStore" autoLoad="false" />
in onready function I make this code :
Ext.onReady(function() {
Ext.QuickTips.init();
var idAdr='AB-20';
var store = from_tr_myPage.getStore();
store.load({
callback: function() {
from_tr_myPage.setValue(idAdr);
}
});
});
but after test I have this value AB-20 in combobox
in the combobox I want to show the fullname
I try without success to render and reload the combobox
First of all, if you try to html with extjs component, it will unnecessary
complex. Why don't you use the combobox component which sencha is providing.
I suggest to use inbuilt component as much as possible.
Try something like that:
var index = store.find("id", idAdr);
var recordSelected = store.getAt(index);
from_tr_myPage.setValue(recordSelected.get('fullname'));
Hope this helps.
Related
i try to get the the value of number row selected, and print it in HTML using Angularjs, but no issue,
i have the count only when i clic in the grid column header.
The value of " selectedRowsCounter " is 0 in html, when i dosn't clic in the grid header
my code is like
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
};
$scope.gridOptions = {
rowData: null,
angularCompileRows: true,
onSelectionChanged: activeButtons,
}
there is a screenshot
i have open the same subject here
https://github.com/ceolter/ag-grid/issues/1023
i have added this line to activeButtons function and it work fine
$scope.gridOptions.api.refreshView();
i dont knew if there is a good solution, but that work for now
The problem seems to be with Angular being unaware of the $scope property change because ag-grid does not tell Angular that it has modified something in the $scope. Although it is difficult to tell if you don't show your view.
You can use onSelectionChanged the way you are using it to know how many rows have been selected, but you need to tell Angular that something has changed in its $scope by applying it.
Something like this:
var activeButtons = function() {
var countRowsSelected = $scope.gridOptions.api.getSelectedRows().length;
$scope.selectedRowsCounter = countRowsSelected;
console.log($scope.selectedRowsCounter);
$rootScope.count.selectedRows = countRowsSelected;
window.setTimeout(function() {
this.$scope.$apply();
});
};
That way you can apply the $scope and the html view will reflect the changes.
I'm using a kendo grid and have a checkbox column with the following template:
"<input class='gridCheckbox' id='gridCheckbox_#=name#' name='Selected' type='checkbox' ng-model='dataItem.checked'/>"
In addition I'm also using an observableArray as the grid's dataSource.
When clicking the chekcbox the data in the observableArray is changed as expected but no "change" event is triggered.
Here is how I define the observableArray:
var obsArray = new kendo.data.ObservableArray(scope.gridData);
this.gridDataSource = new kendo.data.DataSource({
data: obsArray
});
obsArray.bind("change", function (e) {
console.log(e.action, e.field);
});
"scope.gridData" is the original dataModel. When I click the checkbox the observableArray is changed but not the "scope.gridData". In order to change the "scope.gridData" I want to listen to the "change" event and change the "scope.gridData" manually but as I said the "change" event is not triggered.
Any suggestions to what am I doing wrong and maybe there is a better solution.
Read This
your issue is that kendo uses a copy of your scope object
I manually added an event to my input checkbox (in our class we're using Angular so it was on ng-click="doSomething()" but maybe yours is just click="doSomething" and recorded handling the boolean change manually.
We have the Kendo Observables, too - but I got **lucky because we're also using the Breeze JS stuff where we can do data detection and refresh the grid once the data propagates backwards to the right place to be set to dirty. ( grid.dataSource.read(); )
If you want the full row value, make the click="doSomething(this)" and then capture it as the Sender. Just debug in and you should the dataItem attached to the Sender.
This might help you & this is not the correct figure but i did one example like this similar to your problem
var contentData = [
{ organization: 'Nihilent', os: 'Window' }
];
var nihl = contentData[0];
var viewModel = kendo.observable({
gridSource: new kendo.contentData.DataSource({
contentData: contentData
})
});
kendo.bind($(document.body), viewModel);
contentData.push({ organization: 'Dhuaan', os: 'Android' });
nihl.set('os', 'iOS');
I am binding ExtJs Gridpanel from database and add "Delete" button below my gridpanel. By using the delete button handler, I have deleted selected record on gridpanel. But, after deleting, the grid does not refresh (it is deleted from database but shows on grid because of no refresh).
How can I refresh grid after delete handler ?
Try refreshing the view:
Ext.getCmp('yourGridId').getView().refresh();
reload the ds to refresh grid.
ds.reload();
grid.store = store;
store.load({ params: { start: 0, limit: 20} });
grid.getView().refresh();
I had a similiar problem. All I needed to do was type store.load(); in the delete handler. There was no need to subsequently type grid.getView().refresh();.
Instead of all this you can also type store.remove(record) in the delete handler; - this ensures that the deleted record no longer shows on the grid.
try this grid.getView().refresh();
It's better to use store.remove than model.destroy.
Click handler for that button may looks like this:
destroy: function(button) {
var grid = button.up('grid');
var store = grid.getStore();
var selected = grid.getSelectionModel().getSelection();
if (selected && selected.length==1) {
store.remove(selected);
}
}
grid.getStore().reload({
callback: function(){
grid.getView().refresh();
}
});
Combination of Dasha's and MMT solutions:
Ext.getCmp('yourGridId').getView().ds.reload();
Another approach in 3.4 (don't know if this is proper Ext): You can have a delete handler like this, assuming every row has a 'delete' button.
handler: function(grid, rowIndex, colIndex) {
var rec = grid.getStore().getAt(rowIndex);
var id = rec.get('id');
// some DELETE/GET ajax callback here...
// pass in 'id' var or some key
// inside success
grid.getStore().removeAt(rowIndex);
}
Refresh Grid Store
Ext.getCmp('GridId').getStore().reload();
This will reload the grid store and get new data.
I would like to check all of the checkbox made by Ext.grid.CheckColumn in a gridpanel,
may I know if there is any easy way to do this?
I have try to add class to the checkbox(Ext.grid.CheckColumn) but it seem not work.
Thanks very much!
If you're rendering a store field as a checbox column, you have to set that field to true for all the records in the store.
store.each(function(rec){ rec.set('field', true) })
Never try to change a grid cell's value directly, always change it via the store's corresponding record.
Update: if you have many records, use something like this:
store.suspendEvents(); // avoid view update after each row
store.each(function(rec){ rec.set('field', true) })
store.resumeEvents();
grid.getView().refresh();
Ext.grid.CheckboxSelectionModel provides a selectAll() method, if this is what you're looking for.
http://dev.sencha.com/deploy/dev/docs/?class=Ext.grid.CheckboxSelectionModel
Can you show us some codes? I presume CheckColumn is something that you created?
<script language="javascript" type="text/javascript">
var SelectAll = function (value) {
Store1.data.each(function (record) {
record.set('IsSelected', value);
});
};
</script>
<ext:Button ID="btnSelectAll" runat="server" Text="Select All" >
<Listeners>
<Click Handler="SelectAll(true);" />
</Listeners>
</ext:Button>
NB: Store1 is the name of the store and IsSelected is the field name as specified in the JsonReader reader
I have been following:
http://www.sencha.com/learn/Tutorial:Introduction_to_Ext_2.0
And using the following example:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).highlight();
}
Ext.select('p').on('click', paragraphClicked);
});
I am using something very similar:
Ext.onReady(function() {
var paragraphClicked = function(e) {
Ext.get(e.target).addClass('product-selected');
}
Ext.select('.product').on('click', paragraphClicked);
});
However it does not appear to work correctly. e.target appears to return the ext viewport object.
I am actually using Ext 3 not 2 so I guess there must be differences.
I never used e.target, always e.getTarget().
Maybe you can try e.getTarget(".product") ?
Or maybe you can play with the delegate options of addListener in Ext.Element.