Extjs combobox not displaying data - extjs

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

Related

How to render the initial value's display field for a remote combo box?

I want to render a ComboBox that has an initial value. The ComboBox is backed by a JsonStore that loads data from some HTTP endpoint. I expect the display field to be displayed, but instead I see the value.
As a workaround, I can wait to set the initial value until the store is loaded. But that seems like a hacky workaround for such a simple use case.
Is there an easier way to render the initial display field for my ComboBox?
Here is an example. You can drop this code in any ExtJS 3.4 Fiddle.
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
value: '2',
});
// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));
new Ext.FormPanel({
renderTo: Ext.getBody(),
items: remoteCombo
});
Why not to override the missing feature (Yes, looks like it is missing):
Ext.define('Override.form.ComboBox', {
override : 'Ext.form.ComboBox',
defaultValue: null,
initComponent : function() {
this.setDefaultValue();
Ext.form.Checkbox.superclass.initComponent.call(this);
},
setDefaultValue: function() {
if(this.defaultValue !== null) {
if(this.getStore().lastOptions === null) {
this.getStore().on('load', function(store) {
this.setValue(this.defaultValue);
}, this, {single: true});
} else {
// How to avoid else here? :-/
this.setValue(this.defaultValue);
}
}
}
});
//-------------------------
var remoteStore = new Ext.data.JsonStore({
url: 'https://jsonplaceholder.typicode.com/todos',
autoLoad: true,
fields: ['id', 'title']
});
var remoteCombo = new Ext.form.ComboBox({
fieldLabel: 'Remote Store (busted)',
triggerAction: 'all',
mode: 'local',
store: remoteStore,
valueField: 'id',
displayField: 'title',
defaultValue: '2', // <-- New Property
});
// Workaround: only set the value AFTER the store is loaded.
// remoteStore.on('load', () => remoteCombo.setValue('2'));
new Ext.FormPanel({
renderTo: Ext.getBody(),
items: remoteCombo
});
I have not used ExtJs v3.4 for about 10 years or more..

extjs3.4: How to use store filter on a grid

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;

Extjs Combo - Why combo is loading while I have not created form include combo

I define a window include a form and some field and combo box. Example like
Ext.define('Ext.example.ABC', {
extend: 'Ext.window.Window',
items:{
xtype:'form',
items:[
{
xtype: 'combo',
id: 'example',
name: 'ax',
triggerAction: 'all',
forceSelection: true,
editable: false,
allowBlank: false,
fieldLabel: 'example',
mode: 'remote',
displayField:'name',
valueField: 'id',
store: Ext.create('Ext.data.Store', {
fields: [
{name: 'id'},
{name: 'name'}
],
autoLoad: true,
proxy: {
type: 'ajax',
url: 'example.php',
reader: {
type: 'json',
root: 'rows'
}
}
}
})
}]
}
,load: function(a) {
// do some thing
}
});
And I have a button in a grid panel
tbar:[
{
text:'create',
handler:function(){
var x = new Ext.example.ABC();
x.load(0);
}
}
But Why when i just start gridpanel then combo also load while I have not click button create.
I have many combo box and that make my grid panel load slowly :(
How can i fix that thanks
I guess you need set autoLoad: false config option for your combobox's store.
In relation to your comments - I've created an example. You can check it on jsFiddle.
It was created on ExtJs 3.4, but I think for 4.x it will be not very different.
var arrTestData = [
['AL', 'Alabama', 'The Heart of Dixie'],
['AK', 'Alaska', 'The Land of the Midnight Sun'],
['AZ', 'Arizona', 'The Grand Canyon State'],
['AR', 'Arkansas', 'The Natural State'],
['CA', 'California', 'The Golden State']
];
var combosCount = 5;
var arrItems = [];
for (var i = 0; i < combosCount; i++) {
var comboId = Ext.id();
// simple array store
var store = new Ext.data.ArrayStore({
parentCombo: comboId,
fields: ['abbr', 'state', 'nick'],
data : []
});
store.on('load', function() {
var combo = Ext.getCmp(this.parentCombo);
combo.setValue(combo.defaultValue);
});
var combo = new Ext.form.ComboBox({
id: comboId,
fieldLabel: 'Combobox #' + (i + 1),
store: store,
displayField:'state',
valueField:'abbr',
typeAhead: true,
mode: 'local',
forceSelection: true,
triggerAction: 'all',
emptyText:'Select a state...',
defaultValue: arrTestData[i][0],
selectOnFocus:true
});
arrItems.push(combo);
}
var formPanel = new Ext.form.FormPanel({
bodyStyle: 'padding:5px;',
items: arrItems,
renderTo: 'combos-container'
});
new Ext.Button({
text: 'Do all cool things',
renderTo: 'combos-btn',
handler: function() {
var arrCombos = formPanel.findByType('combo');
Ext.each(arrCombos, function(combo){
combo.getStore().loadData(arrTestData);
});
}
});
So what we do there:
1. For each store we'll save parent combobox id - this is required to identify related combobox.
2. For each combobox we save own parameter - defaultValue. This is the value we want set as default after store will be loaded.
3. Listen for 'load' event and set default value for the combo.
I hope this is what you was waiting for :)
Have autoLoad:false and load your store manually for default values.
When you really want to load the store, you can do
store.load()
which will load your store for default values.

Ext JS grid panel with checkbox column

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.

How to create dynamic tabs from a grid column on page load in extjs

I am generating data in a grid panel using json store. I have to generate tabs from the content of column 1 on page load . How can I generate those dynamic tabs from column 1?
Thanks! I am following the same approach but when I am looping through the tabs its not able to add tabs dynamically . I am sure my loop is working properly because I put an alert and its looping through all the records. My code is below...Please let me know where I am wrong..
var store = new Ext.data.JsonStore({
autoLoad: true,
url: '../json/test.json',
root: 'results',
fields:
[
'TIEBACK',
'GATE_TIME',
'TOTAL',
'STOP_DESC',
'DOOR'
],
sortInfo: {
field: 'TIEBACK', direction: 'ASC'
}
});
my tabpanel:
tabPanel = new Ext.TabPanel({
region: 'center',
deferredRender: false,
activeTab: 0,
items: [{
xtype: 'grid',
store: store,
//selModel: selModel,
columns: assignment,
stripeRows: true,
loadMask: true,
height: 200,
width: 200,
x: 490, y: 620,
title:'Assignment Status',
bbar: pagingBar
}]
});
loop:
store.on('load', function(){
store.each(function(re)
{
var tieback = re.get('TIEBACK');
//alert(tieback);
tabPanel.add(tieback);
});
});
So you have the JSON store, something like this
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
url: 'get-images.php',
storeId: 'myStore',
// reader configs
root: 'images',
idProperty: 'name',
fields: ['name', 'url', {name:'size', type: 'float'}, {name:'lastmod', type:'date'}]
});
Then you can add a callback function to the store that gets fired once it loads. This is the documentation on that function
load : ( Store this, Ext.data.Record[] records, Object options )
so,
store.addListener(load, function(store, records, options){
// loop over records and dynamically create tabs here
});
So if you had a tabpanel like this
var tabs = new Ext.TabPanel({
renderTo:'tabs',
resizeTabs:true, // turn on tab resizing
minTabWidth: 115,
tabWidth:135,
enableTabScroll:true,
width:600,
height:250,
defaults: {autoScroll:true},
plugins: new Ext.ux.TabCloseMenu()
});
You can dynamically add tabs to it like this
tabs.add({
title: 'New Tab ' + (++index),
iconCls: 'tabs',
html: 'Tab Body ' + (index) + '<br/><br/>'
+ Ext.example.bogusMarkup,
closable:true
}).show();
That should be everything you need, more documentation can be found here.
http://www.sencha.com/deploy/dev/examples/tabs/tabs-adv.html

Resources