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.
Related
For a month I have started working with Ext.Js 4, creating all kind of widgets. Right now I am tying to implement a drop-down option for a column header.
That can be based on something like this ColorPicker
https://docs.sencha.com/extjs/4.2.1/#!/api/Ext.menu.ColorPicker
My code creates a Grid Panel like in this img
Ext.apply(me, {
items : [{
xtype : 'gridpanel',
itemId : 'gridpanelId',
margin : '0 0 0 0',
layout : 'fit',
viewConfig : {
emptyText : '',
deferEmptyText : false,
markDirty : false
},
ftype : 'filters'
}],
store : errorstore,
plugins : [Ext.create('Ext.grid.plugin.CellEditing', {
pluginId : 'celledit',
clicksToEdit : 1
})],
tbar : [{
xtype : 'ixbutton',
itemId : 'tbarswitcha',
text : '',
bgCls : 'but-image-base tbar_error_quit',
height : 60,
width : 90,
margin : '0 10 0 10'
}],
columns : [{
header : 'Startdate',
itemId : 'ColumnStartdate',
dataIndex : 'startdate',
flex : 2,
sortable : true,
renderer : function(value) {
return MyApp.app.formatDate(value);
}
},{
header : 'Source',
itemId : 'ColumnSource',
dataIndex : 'source',
flex : 3,
sortable : false
}
],
bbar : {
xtype : 'ixpagingtoolbar',
itemId : 'ixpt',
margin : '5 10 5 10',
numbButtons : 4,
width : 400
}
}]
});
I am trying to build a possibility for the user to choose a specific type of 'Source'. Something like a filter, where the user has pre-defined options from which to choose, and not to type in.
How should I define a drop-down inside this
columns : {
header : 'Source'
}
Any items you put in a column is placed in the header. Simple example without any styling:
columns = [
{
header: 'Source',
items: [
{
xtype: 'button',
text: 'Options',
menu: {
items: [
{
text: 'Item1'
},
{
text: 'Item2'
},
]
}
}
]
},
]
Using setGridWidth method on jqGrid with ‘shrinktofit’ parameter ‘true’ when using with Bootstrap causes an unnecessary horizontal scrollbar to appear when number of records is less (i.e. without vertical scrollbar).
The horizontal scrollbar disappears as soon as records are more (i.e. with vertical scrollbar).
To demonstrate the problem I have called setGridWidth method on Loadcomplete
I have even replicated the problem on jsfiddle: http://jsfiddle.net/yoabhinav/uqonspmd/
Here is a fiddle with setGridWidth method call inside Loadcomplete event commented which works fine as expected: http://jsfiddle.net/yoabhinav/knuj9xet/
$(document).ready(function () {
const data = { "rows":[{"OrderID":"1","CustomerID":"WILMK","OrderDate":"1996-07-04 00:00:00","Freight":"32.3800","ShipName":"Vins et alcools Chevalier"},{"OrderID":"2","CustomerID":"TRADH","OrderDate":"1996-07-05 00:00:00","Freight":"11.6100","ShipName":"Toms Spezialit\u00e4ten"},{"OrderID":"3","CustomerID":"HANAR","OrderDate":"1996-07-08 00:00:00","Freight":"65.8300","ShipName":"Hanari Carnes"},{"OrderID":"4","CustomerID":"VICTE","OrderDate":"1996-07-08 00:00:00","Freight":"41.3400","ShipName":"Victuailles en stock"},{"OrderID":"5","CustomerID":"SUPRD","OrderDate":"1996-07-09 00:00:00","Freight":"51.3000","ShipName":"Supr\u00eames d\u00e9lices"},{"OrderID":"6","CustomerID":"HANAR","OrderDate":"1996-07-10 00:00:00","Freight":"58.1700","ShipName":"Hanari Carnes"},{"OrderID":"7","CustomerID":"CHOPS","OrderDate":"1996-07-11 00:00:00","Freight":"22.9800","ShipName":"Chop-suey Chinese"},{"OrderID":"8","CustomerID":"RICSU","OrderDate":"1996-07-12 00:00:00","Freight":"148.3300","ShipName":"Richter Supermarkt"},{"OrderID":"9","CustomerID":"WELLI","OrderDate":"1996-07-15 00:00:00","Freight":"13.9700","ShipName":"Wellington Importadora"},{"OrderID":"10","CustomerID":"HILAA","OrderDate":"1996-07-16 00:00:00","Freight":"81.9100","ShipName":"HILARI\u00d3N-Abastos"},{"OrderID":"11","CustomerID":"ERNSH","OrderDate":"1996-07-17 00:00:00","Freight":"140.5100","ShipName":"Ernst Handel"},{"OrderID":"12","CustomerID":"CENTC","OrderDate":"1996-07-18 00:00:00","Freight":"3.2500","ShipName":"Centro comercial Moctezuma"},{"OrderID":"13","CustomerID":"OLDWO","OrderDate":"1996-07-19 00:00:00","Freight":"55.0900","ShipName":"Ottilies K\u00e4seladen"},{"OrderID":"14","CustomerID":"QUEDE","OrderDate":"1996-07-19 00:00:00","Freight":"3.0500","ShipName":"Que Del\u00edcia"},{"OrderID":"15","CustomerID":"RATTC","OrderDate":"1996-07-22 00:00:00","Freight":"48.2900","ShipName":"Rattlesnake Canyon Grocery"},{"OrderID":"16","CustomerID":"ERNSH","OrderDate":"1996-07-23 00:00:00","Freight":"146.0600","ShipName":"Ernst Handel"},{"OrderID":"17","CustomerID":"FOLKO","OrderDate":"1996-07-24 00:00:00","Freight":"3.6700","ShipName":"Folk och f\u00e4 HB"},{"OrderID":"18","CustomerID":"BLONP","OrderDate":"1996-07-25 00:00:00","Freight":"55.2800","ShipName":"Blondel p\u00e8re et fils"},{"OrderID":"19","CustomerID":"WARTH","OrderDate":"1996-07-26 00:00:00","Freight":"25.7300","ShipName":"Wartian Herkku"},{"OrderID":"20","CustomerID":"FRANK","OrderDate":"1996-07-29 00:00:00","Freight":"208.5800","ShipName":"Frankenversand"}]
}
$("#jqGrid").jqGrid({
pager: "#jqGridPager",
datastr: data,
datatype: "jsonstring",
styleUI : 'Bootstrap',
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
height: 250,
rowNum: 5,
autowidth: true,
shrinkToFit: true,
rownumbers: true,
gridview: false,
loadComplete: function () {
const parent_width = $("#jqGrid").parent().width();
$("#jqGrid").jqGrid('setGridWidth', parent_width);
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<link href="http://www.guriddo.net/demo/css/trirand/ui.jqgrid-bootstrap.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/i18n/grid.locale-en.js"></script>
<script src="http://www.guriddo.net/demo/js/trirand/src/jquery.jqGrid.js"></script>
<div>
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
</div>
This problem is fixed and will be available in the next release. If this is a showstopper for you can get the fixed code from GitHub.
UPDATE: The code used in loadComplete can be avoided if you just set responsive option in jqGrid set to true. I recommend you to to consult the documentation here
I am writing to Tinymce extension, the purpose of extension is to allow the user make comments on the text.
When I click the comment button opens me input. I'm trying to change the style has a width and higher, I could but it does not look good.
Attaching code and picture.
plugin js
tinymce.PluginManager.add('comments', function(editor/*, url*/) {
// Add a button that opens a window
editor.addButton('comments', {
title: 'comment',
//text: 'My button',
//icon: false,
image: "https://cdn3.iconfinder.com/data/icons/pyconic-icons-1-2/512/comment-outline-silence-128.png",
onclick: function() {
// Open window
editor.windowManager.open({
title: 'write comment ',
body: [
{type: 'textbox', name: 'title', label: 'Post a Comment', value: "hello", height: 40,
width: 30}
],
width: 800,
height: 400,
onsubmit: function(e) {
// Insert content when the window form is submitted
let div= document.createElement("span");
div.style.backgroundColor="lightblue";
div.innerHTML=editor.selection.getContent();
let span= document.createElement("span");
div.appendChild(span);
span.innerHTML = e.data.title;
span.classList.add ("comment");
editor.insertContent(div.outerHTML);
}
});
}
});
index.html
<!DOCTYPE html>
<html>
<head>
<script src="/js/tinymce/tinymce.js"></script>
<script>tinymce.init({ selector:'textarea', plugins: 'comments', toolbar: 'comments', content_css : '/js/tinymce/plugins/comments/styleComments.css' });</script>
</head>
<body>
<textarea>Easy (and free!) You should check out our premium features.</textarea>
</body>
</html>
It does not look good, how can I design it in general in addition to height and width.
Thank you all
In your body try defining the field this way:
{
type: 'container',
label : 'fit',
layout: 'fit',
minWidth: 160,
minHeight: 160,
items: [{
type: 'textbox',
label: 'textbox',
value: 'Fit will take all the space available.'
}]
}
... or this way...
{
type : 'textbox',
name : 'textbox multiline',
label : 'textbox multiline',
multiline : true,
value : 'default value\non another line'
}
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.
I got a problem on Ext 4.1.0 and Ext 4.1.1
Double click first cell to edit it and then click window close button, the editor still floats on the page.But it is ok for last cell.
Anyone met this problem before? Thanks
Ext.onReady(function(){
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"1234" },
{ 'name': 'Homer', "email":"home#simpsons.com", "phone":"1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
root: 'items'
}
}
});
var table = Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
columns: [
{
text: 'Name',
dataIndex: 'name',
editor: { xtype: 'textfield', toFrontOnShow: false }
},
{
text: 'Email',
dataIndex: 'email',
flex: 1
},
{
text: 'Phone',
dataIndex: 'phone',
editor: {
xtype: 'numberfield',
hideTrigger: true,
validateOnChange : false
}
}
],
height: 200,
width: 400,
plugins:[ Ext.create('Ext.grid.plugin.CellEditing', {
clicksToEdit: 2
})]
});
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [table]
});
window.show();
});
The easiest way to handle this for you, would be to listen to the window's beforeclose event and cancel any editing in this event using the celleditor's cancelEdit method as described here in the docs.
For example, here is your window object (from your code above) with the listener applied:
var window = new Ext.Window({
id: 'abc',
title :'abc',
modal : true,
layout: 'border',
resizable : true,
draggable : true,
closable : true,
closeAction : 'hide',
width :410,
height :210,
items : [ table],
// add this listener to your window
listeners: {
beforeclose: function(panel) {
var view = panel.down('gridview');
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
}
}
});
Reply to comment:
Here's an override that would do the same thing. You would have to include this override in each app after ExtJS initialization though.
Of course it is also possible to replace the init function in the Ext.grid.plugin.Editor source code with this one (then you wouldn't have to include the override in the app) but I wouldn't recommend doing that for a number of reasons.
Ext.override(Ext.grid.plugin.Editor, {
init: function(grid) {
// the normal init code (below) must be included in the override
var me = this;
me.grid = grid;
me.view = grid.view;
me.initEvents();
me.mon(grid, 'reconfigure', me.onReconfigure, me);
me.onReconfigure();
grid.relayEvents(me, [
'beforeedit',
'edit',
'validateedit',
'canceledit'
]);
grid.isEditable = true;
grid.editingPlugin = grid.view.editingPlugin = me;
// additional code to cancel editing before a grid is hidden
grid.on('beforehide', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
// additional code to cancel editing before a grid is destroyed
grid.on('beforedestroy', function(grid) {
var view = grid.view;
if (view && view.editingPlugin) {
view.editingPlugin.cancelEdit();
}
});
}
});
I would also recommend looking into MVC architecture, it would make handling things like this alot easier for you.