I've got a grid in my page with a CheckboxModel set on it. It's showing the names and checkboxes but I don't know how to bind the boolean column from the store to the column from the selection model. I've found examples using CheckColumn instead but this throws an error that it doesn't have a constructor. Must be a change in v4. Would really appreciate some help with this please.
Ext.define('Roles', {
extend: 'Ext.data.Model',
fields: ['Id', 'Name', 'Selected'],
proxy: {
type: 'ajax',
url: '/tpn/Types/AjaxList',
reader: {
type: 'json',
root: 'rows',
totalProperty: 'total',
successProperty: 'success'
},
listeners: {
exception: function (proxy, type, action, options, response, arg) {
Ext.MessageBox.alert('Error', Ext.decode(type.responseText).error);
}
}
}
});
var roleStore = Ext.create('Ext.data.Store', {
model: 'Roles'
});
var sm = Ext.create('Ext.selection.CheckboxModel');
var grid = Ext.create('Ext.grid.Panel', {
store: roleStore,
selModel: sm,
columns: [{
header: 'Name',
dataIndex: 'Name',
flex: 1
}],
renderTo: 'RoleGrid',
autoHeight: false,
height: 200,
frame: false
});
You can place a listener on the afterrender event of your grid (or on the load event of your bound store) to walk the store for the boolean checked value and call the GridPanel.selectRecords() method to select all those records in your UI. This will check their checkboxes.
Related
There is already a similar question in SO to my quesiton :
Ext js Editor Grid Disable Multiple Row Selection
But the accepted answer is wrong. It says to use RowSelectionModel as a property like so :
selModel: new Ext.grid.RowSelectionModel({singleSelect:true}),
But in the API no such thing exists (maybe they are talking about a different extjs version).
How can you disable multi selection in Extjs grids? ie. No SHIFT or CTRL multi select. Only single selections are allowed.
Refer to the documentation
It shows that you can specify the selection model like so:
Grids use a Row Selection Model by default, but this is easy to customise like so:
Ext.create('Ext.grid.Panel', {
selType: 'cellmodel',
store: ...
});
Or the alternative option would be:
Ext.create('Ext.grid.Panel', {
selType: 'rowmodel',
store: ...
});
EDIT:
You need to specify the Selection Model MODE
Fiddle
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
Ext.create("Ext.grid.Panel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
selModel: new Ext.selection.RowModel({
mode: "SINGLE"
}),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
height: 200,
width: 400,
});
}
});
I'm trying to get value inserted from the interface in a text box rendered inside a GridPanel extjs 3.4, below how is defined the textbox inside the column model:
header: "Rosso",
dataIndex: "contrFilEsRosso",
width: 50,
renderer: function(val, meta,record){
var str0='<p align="left"><input type="text" name="verde" value="' + val + '
return str0;
}
I've modified from the interface the value inside the textbox and i want to send the modified value to the controller. Obviously the store has the value extracted from the backend and is not updated with the new value, so i tried the getView() method of the GridPanel but i haven't been able to get the new value of the textbox.
Thanks a lot.
Any data loaded into an ExtJs grid will be kept in a store, along with the edits.
There are a number of ways you can get the specific value but usually you will just want to send the data back to the server to update as needed.
You can access the store via the getStore() method on the grid and from there you can access any individual records by id or index.
Yo would be best using an EditorGrid and listening to events such as afterEdit
Something like this should work (might need some tweaking, not tested as on mobile)
Fiddle
Ext.application({
name: 'MyApp',
launch: function() {
var store = Ext.create('Ext.data.Store', {
storeId: 'simpsonsStore',
fields: ['name', 'email', 'phone'],
proxy: {
type: 'ajax',
url: 'data1.json',
reader: {
type: 'json',
rootProperty: 'items'
}
},
autoLoad: true
});
Ext.create("Ext.grid.EditorGridPanel", {
title: 'Simpsons',
renderTo: Ext.getBody(),
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [{
text: 'Name',
dataIndex: 'name'
}, {
text: 'Email',
dataIndex: 'email',
flex: 1
}, {
text: 'Phone',
dataIndex: 'phone'
}],
isCellEditable: function(col, row) {
return (col == 0);
},
listeners: {
afterEdit: function(e) {
alert("You changed " + e.field + " from " + e.originalValue + " to " + e.value);
}
},
height: 200,
width: 400,
});
}
});
I am using ExtJS3.4.
I want to filter the billingstore based on value selected by the user for billingName.
So, How do I pass the value selected to the store or grid? How do I achieve this?
Here is my code:
// Store for the grid panel - has billing grid data
this.billingStore = new Ext.data.JsonStore({
autoLoad: {params:{start: 0, limit: 2}},
filter: {billingName}
proxy: new Ext.data.HttpProxy({
url: '/ELCM/Client/getBillingList.do',
}),
root: 'data',
fields: ['billingName','billingAmount','usedData','duration'],
totalProperty:'totalRows'
});
var billingStore = this.billingStore;
//view billing
this.billingGrid = new Ext.grid.GridPanel({
title: 'View Billing',
store: that.billingStore,
columns:[
{header: "Amount",dataIndex: 'billingAmount'},
{header: "Data Used", dataIndex: 'usedData'},
{header: "Duration", dataIndex: 'duration'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
bbar: new Ext.PagingToolbar({
store: that.billingStore, // grid and PagingToolbar using same store
displayInfo: true,
pageSize: 2
}),
listeners: {
rowclick : function(grid, rowIndex, e){
console.log("row Index "+rowIndex);
}
}
});
var billingGrid = this.billingGrid;
Thanks
Depending on what you want to filter by a simple filter method on the store will achieve what your looking for.
billingGrid.getStore().filter([{
property: '',
id: '',
value:
}
]);
Look at http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Store-method-filter for further information.
Check out this code ,how does the filter in ExtJS work its required the property (i.e billingName for filtering as per your example) then 'value' on basis of which the filter happen this 2 are the mandatory options required for the filter function to work other optional config property which is exactMatch & caseSensitive which add the accuracy to the filter function.
Try out the below code
// Store for the grid panel - has billing grid data
this.billingStore = new Ext.data.JsonStore({
autoLoad: {params:{start: 0, limit: 2}},
filter: [{
property: 'billingName',
value: ''//Data source which need to be filter or based on value selected by the user for billingName
exactMatch: true,
caseSensitive: true
}],
proxy: new Ext.data.HttpProxy({
url: '/ELCM/Client/getBillingList.do',
}),
root: 'data',
fields: ['billingName','billingAmount','usedData','duration'],
totalProperty:'totalRows'
});
var billingStore = this.billingStore;
//view billing
this.billingGrid = new Ext.grid.GridPanel({
title: 'View Billing',
store: that.billingStore,
columns:[
{header: "Amount",dataIndex: 'billingAmount'},
{header: "Data Used", dataIndex: 'usedData'},
{header: "Duration", dataIndex: 'duration'}
],
sm: new Ext.grid.RowSelectionModel({singleSelect: true}),
bbar: new Ext.PagingToolbar({
store: that.billingStore, // grid and PagingToolbar using same store
displayInfo: true,
pageSize: 2
}),
listeners: {
rowclick : function(grid, rowIndex, e){
console.log("row Index "+rowIndex);
}
}
});
var billingGrid = this.billingGrid;
I have an editor grid panel, with 2 fields. Based on the 1st field, the second field should change to a combobox with further options. For that getting the value of the 1st field on runtime is required to fire the query for the second field.
The code is working fine and retriving the data. But even when the mentioned width is 350 for the second field, the combobox which appears, is very small and can't be read. Even the dropdown is not seen. I tried the ListWidth property too.. but no change in the output.
Is it because, initially the combobox is empty and I'm using the beforequery property to change the url with the id field so the combobox is not getting the data? But I can't see any errors on firebug.
I have the following code:
createGrid= function(e){
var store= new Ext.data.Store({
autoLoad: true,
proxy: new Ext.data.HttpProxy({ url: ..... }) //url to get the data
reader: new Ext.data.JsonReader({
root: //the root,
id: //id,
sortInfo: {field: 'id', direction: 'ascending' },
fields: ['id','fields']
})
});
var store2= new Ext.data.store ({
autoLoad: true,
id: 'store2',
proxy: new Ext.data.HttpProxy({ url: ' '}) //url
reader: new Ect.data.JsonReader({
root: 'enums','id', fields: ['enum_id','value']
})
});
var cm=new ext.grid.columnModel([
{id:'id',name:'id',dataIndex: 'id', width: 300},
{id:'fields', header: 'fields',width: 350, editor: new Ext.form.ComboBox({
name: 'combo',
store: store2,
width: 350,
valueField: 'enum_id',
displayField: 'value',
listeners: {
beforequery: function(query){
var g_n=Ext.getCmp('grid1');
var s_t=g_n.getSelectionModel().getSelections();
var record=s_t[0];
var assign_data=record.get('id');
var actionStore=Ext.StoreMgr.get('store2');
var action_combobox=Ext.getCmp('combo1');
actionStore.proxy.conn.url=' ',//new url which requires the 'id' field
actionStore.load();
return query;
}
}
})},
]);
return new Ext.grid.EditorGridPanel({
id: 'grid1',
store: store,
cm:cm,
sm: new Ext.grid.RowSelectionModel ({ singleSelect: true});
autoExpandableColumn: 'fields',
listeners: {
//the other grid listeners
}
})
}
Please help me with this problem.
Thanks in advance.
var store2 = new Ext.data.store(
Maybe you need to replace Ext.data.store with Ext.data.Store or Ext.data.JsonStore
I'd like to know a way of how to update or reload the list values of a ExtJs ComboBox. For instance, I have a some checkboxes. These checkboxes determine what values the ComboBox should have. So, after selecting some of those, I click the drowndown list (combobox) to see the values.
In short, how can I change the values (store) of a ComboBox already has.
Hope someone can help me
Thanks
I've been using this undocumented ExtJs API function to change the store at runtime:
mycombobox.bindStore(newStore);
as stated by the support team in http://www.sencha.com/forum/showthread.php?40749-Change-Combobox-store-data-update.
Edit: If I want to put the new data when the store is populated, I do something like this
storeMyStore = new Ext.data.Store({
...
listeners: {
load: function(this, records, options) {
cbMyCombo.bindStore( storeMyStore );
}
}
});
It goes a little something like this
{
xtype: 'checkbox',
//configs
listeners : {
checked : function (checkbox, checkedBool) {
var yourCombo = Ext.getCmp(yourComboID);
//I'm not sure what params you will need to reload the comboBox from your
// service but hopfully this will give the jist of things. . .
yourCombo.store.reload(
{
params:
{yourParam : checkedBool},
{yourRowID : rowID}
});
}
}
Here I making a combobox that is updated after a selection is made on another ComboBox.
Basically, the final user can use the two comboboxes to select a main category and a sub-category, which is based on the selection made on the first combobox.
This is the store for First comboBox:
Ext.define("StoreSubject", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreSubject = Ext.create('Ext.data.JsonStore', {
model: 'StoreSubject',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=15',
reader: {
type: 'json'
}
}
});
StoreSubject.load();
This is the store for Second comboBox:
Ext.define("StoreLanguageGroup", {
extend: "Ext.data.Model",
fields: [
{
name: 'i_Id'
},
{
name: 's_Value'
}
]
});
var StoreLanguageGroup = Ext.create('Ext.data.JsonStore', {
model: 'StoreLanguageGroup',
proxy: {
type: 'ajax',
url: '../General/AdministrationDefaultXMLDOM.aspx?qid=16',
reader: {
type: 'json'
}
}
});
My code for Comobox is looks like this..
First ComboBox :
var cmbSubjectName = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbSubjectName',
fieldLabel: '<b>Subject</b>',
name: 'cmbSubjectName',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreSubject,
queryMode: 'local',
typeAhead: true,
listeners: {
'select': {
fn: function (combo, value) {
var strSubjectName = Ext.getCmp('cmbSubjectName').getValue();
Ext.getCmp('cmbLanguageType').clearValue();
Ext.getCmp('cmbLanguageType').getStore().load({
params: {
SubjectName: strSubjectName
}
});
}
}
},
});
This code is used to call and override the combox store (Impotent otherwise it will keep on loading )
Ext.override(Ext.LoadMask, {
onHide: function () {
this.callParent();
}
});
//---------------------------
Second ComboBox :
var cmbLanguageType = Ext.create('Ext.form.field.ComboBox', {
id: 'cmbLanguageType',
fieldLabel: '<b>Language</b>',
multipleSelect: false,
name: 'cmbLanguageType',
valueField: 's_Value',
displayField: 's_Value',
allowBlank: false,
anchor: '80%',
labelWidth: 150,
emptyText: '[--Choose--]',
minChars: 0,
store: StoreLanguageGroup,
queryMode: 'local',
typeAhead: true,
});
Hope this will helps you.. and Please rate my answer
In an event listener on the checkboxes, get a reference to the store that your ComboBox is reading from. Then invoke its add or remove functions to update the data in the store based on what check box is checked Once the updates are complete, invoke a doLayout() on the ComboBox component, it should re-render itself based on the current state of the store.
Although I think there is a way to have it automatically update any time the store updates -- I haven't used that yet.