I am a newbie with ExtJS 4. I am trying to display a result list which fetches results from a remote store, without much success.
Below is the view file
Ext.define('Crm.view.CompanyList', {
extend: 'Ext.grid.Panel',
alias: 'widget.companyList',
store : 'Crm.store.Companies',
title : 'Company List',
initComponent: function(){
this.columns = [ {
text : 'ID',
width : 150,
dataIndex : 'id'
}, {
text : 'LastName',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'lastName'
}, {
text : 'First Name',
width : 150,
sortable : false,
hideable : false,
dataIndex : 'firstName'
}, {
text : 'Street',
flex : 1,
sortable : false,
hideable : false,
dataIndex : 'street'
} ];
this.dockedItems = [ {
xtype : 'pagingtoolbar',
store : 'Companies',
dock : 'bottom',
displayInfo : true
} ];
this.callParent();
}
});
and below is the Model
Ext.define('Crm.model.Company',{
extend : 'Ext.data.Model',
fields : [
{name:'id',type:'string'},
{name:'lastName',type:'string'},
{name:'firstName',type:'string'},
{name:'street',type:'string'}
]
});
This is how the store is defined
Ext.define('Crm.store.Companies', {
extend: 'Ext.data.Store',
requires: 'Crm.model.Company',
model: 'Crm.model.Company',
autoLoad: {start: 0, limit: 5},
pageSize: 5,
remoteSort: true,
sorters: [{
property : 'lastName',
direction: 'asc'
}],
proxy: {
type: 'jsonp',
url : 'http://extjsinaction.com/crud.php?model=Employee&method=READ',
reader: {
type: 'json',
root: 'data',
idProperty : 'id',
// successProperty : 'meta.success',
totalProperty : 'meta.total'
}
}
});
and finally the HTML file which is expected the render the Grid in browser
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://cdn.sencha.io/ext-4.2.0-gpl/resources/css/ext-all.css">
<script type="text/javascript" src="http://cdn.sencha.io/ext-4.2.0-gpl/ext-all-dev.js"></script>
<script type="text/javascript" src="Crm/view/CompanyList.js" ></script>
<script type="text/javascript" src="Crm/model/Company.js" ></script>
<script type="text/javascript" src="Crm/store/Companies.js" ></script>
</head>
<body>
<script type="text/javascript" >
Ext.onReady(function() {
Ext.create('Crm.view.CompanyList', {
});
);
</script>
</body>
</html>
When I run this in browser, I get the below error in browser console
Uncaught TypeError: Cannot read property 'buffered' of undefined ext-all-dev.js:145555
Can someone please guide me to resolve this. Thank you.
The main reason your code fails is that the grid does not have a store. You configure store as string (class name) but this approach works only if you use MVC with Ext.Application when Ext creates the store for you.
You can make the above working by creating the store in initComponent of the grid:
this.store = Ext.create('Crm.store.Companies', {});
For long run I recommend to use Sencha Cmd and MVC (MVVM for Ext 5) architecture.
Related
In the MVVM structure I am very confused of how can I trigger some functions in the controller from some view elements. Handlers for buttons and some simple things are working, but here I have an example, which I couldn't figure out properly.
https://fiddle.sencha.com/#fiddle/qcf
Or see
Ext.define('MVVM.view.Master', {
extend : 'Ext.grid.Panel',
xtype : 'mvvm-MasterView',
requires: [
'Ext.grid.column.Action',
'Ext.ProgressBarWidget',
'Ext.slider.Widget',
'Ext.sparkline.*'
],
title : 'Master Panel',
store : 'People',
columns: [
{
text : 'Name',
dataIndex : 'name'
},{
text : 'Slider',
xtype : 'widgetcolumn',
width : 120,
dataIndex: 'progress',
widget: {
xtype: 'sliderwidget',
minValue: 0,
maxValue: 1,
decimalPrecision: 2,
listeners: {
change: function(slider, value) {
//how to trigger something in the controller?
}
}
}
}
},
{
text : 'Email',
dataIndex : 'email',
flex : 1
},
{
text : 'Phone',
dataIndex : 'phone'
}
]
});
Every time the slider changes, I need to call a function in the controller. How to do that?
This doesn't work:
listeners: {
change: 'controllerFunction'
}
Thanks
If you mean a normal Controller rather than a ViewController then you can do something like this:
var controller = MyApp.app.getController('MyApp.controller.MainController');
controller.doMethod();
If you mean a View Controller then this article is very useful:
https://www.sencha.com/blog/using-viewcontrollers-in-ext-js-5/
Ext js combo is not working in IE7. I need this combo act like textbox with virtual combo (like google search). It is working in IE9 and FF but not in IE7
This is my code:
SearchIncidentForm=new Ext.FormPanel ({
border:false,
renderTo:'searchIncidentDiv',
id: 'searchIncidentForm',
items : [{
xtype:'panel',
id :'panelsearchIncident',
layout:'column',
defaults:{
columnWidth:0.50,
labelAlign : 'top',
layout:'form',
border:false,
bodyStyle:'margin-top:5px; '
},
border:false,
items : [{
defaults:{anchor:'100%'},
items:[{
id : "incidentId",
fieldLabel : 'Incident Id',
labelStyle: 'color: #6C6C6C;width:85px;padding-top:7px;height: 22px;',
xtype : 'combo',
store:incidentStores,
//style: 'width:85px;height: 18px;',
width:100,
allowBlank : false,
labelAlign: 'top',
displayField : 'incidentId',
valueField : 'incidentId',
selectOnFocus : true,
typeAhead : false,
mode : 'remote',
triggerAction : 'all',
editable: true,
msgTarget:'qtip',
listAlign : 'tl-bl?',
//anchor : '80%',
minChars : 1,
hideTrigger:true,
hiddenName: 'incidentId',
listWidth:100,
listHeight:50,
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
},
beforequery : function(){
var val=Ext.getCmp('incidentId').getValue();
if(isNaN(this.getEl().dom.value)){
Ext.Msg.alert("","Please type numeric value");
}
else{
Ext.getCmp('incidentId').getStore().proxy.setUrl('getIncidentId.html?&query='+this.getEl().dom.value);
}
}
}
}]
},{
items:[{
xtype : 'button',
text : 'Search',
style: 'margin-top:19px;margin-left:20px;width:50px;',
width: 35,
height:15,
handler : incidentSearchButtonHandler
}]
}]
}]
});
}
but it's not working in IE. When I press Search button, an alert is shown that please type Id. That means it doesn't take the value that has been typed. Please help.
I've been bitten by this before with IE: you have an extra comma after the last element of your array:
items:[{
submittValue:true,
listeners : {
specialkey : function(field, e){
var key=e.getKey();
if (key==e.ENTER) {
incidentSearchButtonHandler();
}
}, // <------ Extra comma. Delete it.
]}
I run this code and the dropdown won't drop down -- no items get displayed.
Looking in the debugger I see that the store has no items.
When I comment out the 'url' and uncomment 'data' (which contains the exact json string produced by the .cfm page) the dropdown works as expected.
Anyone know what's going on here?
<html>
<head>
<link rel="stylesheet" type="text/css" href="ext-3.1.0/resources/css/ext-all.css" />
<script src="ext-3.1.0/adapter/ext/ext-base.js"></script>
<script src="ext-3.1.0/ext-all-debug.js"></script>
<script>
if (Ext.BLANK_IMAGE_URL.substr(0,5) != 'data:')
{
Ext.BLANK_IMAGE_URL = 'ext-3.1.0/resources/images/default/s.gif';
}
Ext.onReady(function()
{
var testStore = new Ext.data.JsonStore({
url: 'combotest.cfm',
//data: {"ROWS":[{"NAME":"one"},{"NAME":"two"},{"NAME":"three"}]},
root: 'ROWS',
fields: ['NAME'],
autoLoad: true
});
var test_form = new Ext.FormPanel(
{
renderTo: Ext.getBody(),
frame: true,
title: 'Form',
width: 500,
items: [
{
xtype: 'combo',
fieldLabel: 'Combo Box',
triggerAction: 'all',
mode: 'local',
store: testStore,
displayField: 'NAME',
width: 350
}
]
});
});
</script>
</head>
<body>
</body>
</html>
A colleague figured it out. The .cfm page was returning debug info in addition to the json string. Adding
<cfsetting showdebugoutput="FALSE">
to the end of the .cfm page cleared it up.
Is there any way to set the width of an ExtJS (version 4) ComboBox's dropdown menu to be wider than that of the actual input box?
I have a comboxbox that i want to be around 200px but I have paging on the results dropdown and that width is not even big enough to show all the paging bar's controls.
Here's my code to create the combo:
var add_combo = Ext.create('Ext.form.field.ComboBox',
{
id : 'gbl_add_combo',
store : Ext.create('Ext.data.Store',
{
remoteFilter : true,
fields : ['gb_id', 'title'],
proxy :
{
type : 'ajax',
url : 'index.php/store/get_items',
reader :
{
type : 'json',
root : 'records',
totalProperty : 'total',
successProperty : 'success'
},
actionMethods :
{
read : 'POST',
create : 'POST',
update : 'POST',
destroy : 'POST'
}
}
}),
listConfig:
{
loadingText: 'Searching...',
emptyText: 'No results found'
},
queryMode : 'remote',
hideLabel : true,
displayField : 'title',
valueField : 'gb_id',
typeAhead : true,
hideTrigger : true,
emptyText : 'Start typing...',
selectOnFocus : true,
width : 225,
minChars : 3,
cls : 'header_combo',
pageSize : 15
});
There are two parts to this. Firstly, you need to set matchFieldWidth: false in your combobox config. You can then specify width attributes in the listConfig section to style just the dropdown, while specifying the width of the combobox itself in the main config.
This varies from the pervious version, which just let you specify the listWidth property.
I didn't find way to change 'matchFieldWidth' property dynamically. So I found another solution:
{
xtype: 'combobox',
fieldLabel: 'Short Options',
queryMode: 'local',
store: ['Yes', 'No', 'Maybe'],
matchFieldWidth: false,
listConfig: {
listeners: {
beforeshow: function(picker) {
picker.minWidth = picker.up('combobox').getSize().width;
}
}
}
}
Source: http://www.sencha.com/forum/showthread.php?293120-Setting-BoundList-minWidth-to-the-width-of-a-parent-ComboBox-without-matchFieldWidth
In ExtJS 7+ modern, you need to use the beforepickercreate event if you wish to control the width of the combobox's picker.
It's not very intuitive, but it works.
xtype: 'combobox',
...
listeners: {
beforepickercreate: {
fn: function(cmp, newV) {
newV.listeners = {
beforeshow: function(cmp) {
cmp.setMinWidth(400);
cmp.setWidth(400);
}
}
return newV;
}
}
}
I have this index.html Please read the complete question before answering .
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Reseller DashBoard</title>
<!-- ** CSS ** -->
<!-- base library -->
<link rel="stylesheet" type="text/css" href="css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="css/xtheme-gray.css" />
<!-- overrides to base library -->
<!-- ** Javascript ** -->
<!-- ExtJS library: base/adapter -->
<script type="text/javascript" src="lib/ext-base-debug.js"></script>
<!-- ExtJS library: all widgets -->
<script type="text/javascript" src="lib/ext-all-debug.js"></script>
<!-- overrides to base library -->
<!-- page specific -->
<script type="text/javascript" src="lib/dashboard.js"></script>
<script type="text/javascript" src="lib/jsfunction.js"></script>
<script type="text/javascript" src="lib/reseller.js"></script>
</head>
<body>
<div id="dashboard">
</div>
</body>
</html>
This is my dashboard.js In this i have a rendere function on which generate the hyper link
on the click of this hyperlink i want to open the another grid which is in the reseller.js.
and the onlclick function is in jsfunction.js.
/**
* this file has the reseller dashboard grid
*
*/
Ext.onReady(function(){
/**
* function for rendering the link
**/
function linkRenderer(data, cell, record, rowIndex, columnIndex, store) {
if (data != null) {
return ''+ data +'';
}
return data;
}
// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellerscount',
storeId: 'getresellerscount',
// reader configs
root: 'cityarray',
idProperty: 'cityname',
fields: [
{name: 'cityname'},
{name: 'totfollowup'},
{name: 'totcallback'},
{name: 'totnotintrested'},
{name: 'totdealsclosed'},
{name: 'totcallsreceived'},
{name: 'totcallsentered'},
{name: 'totresellerregistered'},
{name: 'countiro'},
{name: 'irotransferred'},
{name: 'irodeferred'}
]
});
// create the Grid
var grid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'cityname',
header : 'City Name',
width : 120,
sortable : true,
dataIndex: 'cityname'
},
{
id :'countiro',
header : ' Total Prospect',
width : 100,
sortable : true,
dataIndex: 'countiro'
},
{
id :'irotransferred',
header : 'Calls Transfered By IRO',
height : 50,
width : 100,
sortable : true,
dataIndex: 'irotransferred'
},
{
id :'irodeferred',
header : ' Calls Deferred By IRO',
width : 100,
sortable : true,
dataIndex: 'irodeferred'
},
{
id :'totcallsentered',
header : ' Total Calls Entered',
width : 100,
sortable : true,
dataIndex : 'totcallsentered',
renderer : linkRenderer
},
{
id :'totfollowup',
header : ' Follow Up',
width : 100,
sortable : true,
dataIndex: 'totfollowup'
},
{
id :'totcallback',
header : ' Call Backs',
width : 100,
sortable : true,
dataIndex: 'totcallback'
},
{
id :'totnotintrested',
header : ' Not Interested',
width : 100,
sortable : true,
dataIndex: 'totnotintrested'
},
{
id :'totdealsclosed',
header : ' Deals Closed',
width : 100,
sortable : true,
dataIndex: 'totdealsclosed'
},
{
id :'totresellerregistered',
header : ' Reseller Registered',
width : 100,
sortable : true,
dataIndex: 'totresellerregistered'
}
],
height: 350,
width: 1060,
title: 'Reseller Dashboard',
// config options for stateful behavior
});
// render the grid to the specified div in the page
grid.render('dashboard');
});
Here is my jsfunction.js , is it the right place to place the code of the link click handler or should i place it any where else .
/**
* function for opening the window of reseller grid
*
**/
function resellerwindow(cityname) {
alert(cityname);
// render the grid to the specified div in the page
resellergrid.render('dashboard');
}
Here is my reseller.js which has the another grid coding , Please suggest the coding in this file is right or should i change something .
/**
* this file has the reseller grid
*
*/
Ext.onReady(function(){
// create the data store
var store = new Ext.data.JsonStore({
// store configs
autoDestroy: true,
autoLoad :true,
url: 'api/index.php?_command=getresellers',
storeId: 'getresellerscount',
// reader configs
root: 'reseller',
idProperty: 'firstname',
fields: [
{name: 'firstname'},
{name: 'lastname'},
{name: 'mobile'},
{name: 'email'},
{name: 'tmecode'},
{name: 'tmename'},
{name: 'updatedon'},
{name: 'apptype'},
{name: 'alloctype'},
{name: 'empparent'},
{name: 'irodeferred'}
]
});
// create the Grid
var resellergrid = new Ext.grid.GridPanel({
store: store,
columns: [
{
id :'firstname',
header : 'First Name',
width : 120,
sortable : true,
dataIndex: 'firstname'
},
{
id :'lastname',
header : ' Last Name',
width : 100,
sortable : true,
dataIndex: 'lastname'
},
{
id :'mobile',
header : 'Mobile',
height : 50,
width : 100,
sortable : true,
dataIndex: 'mobile'
},
{
id :'email',
header : 'E-Mail',
width : 100,
sortable : true,
dataIndex: 'email'
},
{
id :'tmecode',
header : ' TME Code',
width : 100,
sortable : true,
dataIndex : 'tmecode'
},
{
id :'updatedon',
header : ' updatedon',
width : 100,
sortable : true,
dataIndex: 'updatedon'
},
{
id :'empparent',
header : ' empparent',
width : 100,
sortable : true,
dataIndex: 'empparent'
}
],
height: 350,
width: 1060,
title: 'Reseller Dashboard',
// config options for stateful behavior
});
});
My Main problem is the why the reseller grid is not showing i am getting this error while click on the link in dashboard grid
resellergrid is not defined
[Break on this error] resellergrid.render('dashboard');
You have two onReady methods. Your application need only one onReady method.
The error is because resellergrid is not define within the scope of the resellerwindow(). You have declared the resellergrid in reseller.js. But is not accessible for the resellerwindow.