Using ExtJs, I m testing to transfer received xml data to specific grid.
I made a simple text file which has 10 output values , and set pageSize to 5 from paging toolbar.
That is, the desired output for 10 values could be 5 values on each pages(2 pages).
It divided to 2 pages correctly, however there are 10 same values on each pages.
What is the cause for above problem?
I hope your comments will be possible solutions.
Thank you!
index.php
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<script src="resources/js/ext-base.js"></script>
<script src="resources/js/ext-all-debug.js"></script>
<script src="resources/ux/BufferView.js"></script>
<script type="text/javascript">
Ext.onReady(function(){
var mm = Ext.data.Record.create([
{name: 'mb_id'},
{name: 'mb_sex'},
{name: 'mb_name'}
]);
var store = new Ext.data.Store({
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'./grid2.php'
}),
reader: new Ext.data.XmlReader(
{
record: 'Item'
}, [
'mb_id'
,'mb_sex'
,'mb_name'
]
),
autoLoad: {params:{start: 0, limit: 5}}
});
var grid = new Ext.grid.GridPanel({
renderTo: document.body,
frame:true,
title: 'information',
height:300,
width:516,
store: store,
columns: [
{header: "id", dataIndex: 'mb_id'},//, renderer: cover_image
{header: "sex", dataIndex: 'mb_sex',width:100},
{header: "name", dataIndex: 'mb_name',width:100}
],
bbar:new Ext.PagingToolbar({
store:store,
pageSize:5,
displayInfo:true
})
});
});
</script>
</HEAD>
<BODY>
</BODY>
</HTML>
data.php
header("Content-type: application/xml"); //;charset=utf-8
echo "<?xml version=\"1.0\" encoding=\"UTF-8\" ?>";
echo "<root>";
//전체 데이터 레코드 값 기록
for($i=0;$i<10;$i++)
{
echo "<Record>";
echo "<Time>".$i."</Time>";
echo "<Name>".$i."</Name>";
echo "</Record>";
}
echo "</root>";
As Tim suggested, remove the pageSize parameter from your paging toolbar and instead add it to your store:
var store = new Ext.data.Store({
pagesize: 5,
proxy: new Ext.data.HttpProxy({
method:'GET',
url:'./grid2.php'
})
}) ...
Related
I need to create a grid on my HTML page. I am able to do that but the whole process made me to include the complete Ext sdk folder in my solution which made my application size considerable. I do not want to make use of everything nor does my application uses MVC architecture. All I want to do is to create a grid component on my page. Currently I am doing like this:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Sample Usage</title>
<link rel="stylesheet" type="text/css" href="ExtJSIncludes/packages/ext-theme-neptune/build/resources/ext-theme-neptune-all.css">
<script src="ExtJSIncludes/ext.js"></script>
</head>
<body>
<div id="divSampleGrid"></div>
<script>
Ext.onReady(function () {
Ext.create('Ext.data.Store', {
storeId:'simpsonsStore',
fields:['name', 'email', 'phone'],
data:{'items':[
{ 'name': 'Lisa', "email":"lisa#simpsons.com", "phone":"555-111-1224" },
{ 'name': 'Bart', "email":"bart#simpsons.com", "phone":"555-222-1234" },
{ 'name': 'Homer', "email":"homer#simpsons.com", "phone":"555-222-1244" },
{ 'name': 'Marge', "email":"marge#simpsons.com", "phone":"555-222-1254" }
]},
proxy: {
type: 'memory',
reader: {
type: 'json',
rootProperty: 'items'
}
}
});
Ext.create('Ext.grid.Panel', {
title: 'Simpsons',
store: Ext.data.StoreManager.lookup('simpsonsStore'),
co
lumns: [
{ text: 'Name', dataIndex: 'name' },
{ text: 'Email', dataIndex: 'email', flex: 1 },
{ text: 'Phone', dataIndex: 'phone' }
],
height: 200,
width: 400,
renderTo: 'divSampleGrid'
});
});
</script>
</body>
</html>
My 'ExtJSIncludes' folder contains everything. Do I really need that? What are the mimimum files I need to include for just a grid? Is there any standard js file available along with the css that is the only requirement for it? Just like JQuery?
Just include ext-all.js instead of ext.js.
Here is a good read for all possible Ext scripts depending on how you wish to use..Read
I wrote this Ext js application but I keep getting this error that says cannot call method 'create' in line 32. I took out some lines from the original code. Ext.onReady didnt work, the page would just be blank and the debuger didnt give any errors, but when i took out Ext.onReady() this error popped up
<html>
<head><title>Arrar Read</title>
</head>
<body>
<link rel="stylesheet" type="text/css" href="C:/Users/kevin/ext-3.4.0/ext-3.4.0 /resources/css/ext-all.css"/>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter /ext/ext-base-debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0ext-all.js"> </script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/ext-all- debug.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="C:/Users/kevin/ext-3.4.0/ext-3.4.0/pkgs/ext-core.js"></script>
<script type="text/javascript">
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
var nameRecord = Ext.data.Record.create([
{ name: 'name', mapping : 1},
{ name: 'state',mapping : 2}
]);
var arrayReader = new Ext.data.ArrayReader({},nameRecord); //creating a reader
var memoryProxy = new Ext.data.MemoryProxy(arrayD); //creating a memory proxy from the array
var store = new Ext.data.Store({ //create a store
reader : arrayReader,
proxy : memoryProxy
});
var colModel = new Ext.grid.ColumnModel([
{
header : 'Full Name',
sortable : true,
dataIndex : 'fullName'
},
{
header : 'State',
dataIndex : 'state'
}
]);
var gridView = new Ext.grid.GridView();
var selModel = new Ext.grid.RowSelectionModel({
singleSelect : true
});
var grid = new Ext.grid.GridPanel({ //create a gridpanel
title : 'First Grid',
renderTo : Ext.getBody(),
autoHeight : true,
width : 250,
store : store,
view : gridView,
colModel : colModel,
selModel : selModel
});
console.debug('everything executed');
</script>
</body>
</html>
I dont know if im missing some script files or not . can someone please help me
Here is an ExtJs 4 example: (working fiddle)
var arrayD = [
['Jary Garcia', 'MD'],
['Arron, Baker', 'VA'],
['Susan Smith', 'DC'],
['Mary Smith', 'DE'],
['Bryan Shanly', 'NJ'],
['Nyron Selgado', 'CA']
];
Ext.define('Person', {
extend: 'Ext.data.Model',
fields: [
{name: 'name', type: 'string'},
{name: 'state', type: 'string'}
]
});
var store = Ext.create('Ext.data.Store', {
model: 'Person',
data: arrayD
});
var grid = Ext.create('Ext.grid.GridPanel', { //create a gridpanel
title: 'First Grid',
renderTo: Ext.getBody(),
autoHeight: true,
width: 250,
store: store,
columns: [
{
header: 'Full Name',
sortable: true,
dataIndex: 'name'},
{
header: 'State',
dataIndex: 'state'
}
]
});
console.debug('everything executed');
You can download your own version and put it in a webserver or use one of these for js:
//for production
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all.js"></script>
//for debug => isn't minified
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-debug.js"></script>
//for development => isn't minified, logs errors and warnings to the console.
<script src="http://cdn.sencha.io/ext-4.1.1-gpl/ext-all-dev.js"></script>
for css use:
<link rel="stylesheet" type="text/css" href="htpp://cdn.sencha.io/ext-4.1.1-gpl/resources/css/ext-all.css"/>
I have a combo box which displays item quantity. Based on item quantity selection i am displaying price value of the item. By default i am setting price value to first item value. However when i load the page, i want my combo box to display first item qty i.e 100.
Problem: it should load Qty : 100 rather loading blank
So i have a store defined as
Store = new Ext.data.JsonStore({
storeId: 'Store',
root: 'storevalue',
autoLoad: false,
baseParams: { itemid: '${itemID!""}',
adjustPrice: '${adjustPrice}',
overrideShowPrice: '${overrideShowPrice}' },
url: 'ListQtyPrice.epm',
fields: [ 'qty', 'rawprice', 'displayPrice' ]
});
Combo box to display Qty
<#if Select>
new DBEComboBox({
name: 'orderqty',
displayField: 'qty',
valueField: 'qty',
id: 'order-qty',
store: Store,
forceSelection: true,
mode: 'remote',
triggerAction: 'all',
allowBlank: true,
listWidth: 202,
triggerClass: 'orderqty-trigger',
width: 200
,defaultValue: 100
,listeners: {
// for price adjustments
}
});
</#if>
Store.load({
callback: function() {
alert("reached");
Ext.getCmp('order-qty').setValue(Store.getAt(0).get('qty'));
var oqc = Ext.getCmp('order-qty');
var value = Ext.getCmp('order-qty').getValue();
alert(" hey :" +value);
}
});
Able to see hey: 100 in alert statements
I've run into this problem a couple times. The only way I've actually gotten this resolved was to call setValue on the combobox after the store has loaded, you could just add a listener on the store, but that always seemed somewhat messy to me. I usually have a stand-alone event listener like this:
Store.on('load',function(store) {
Ext.getCmp('order-qty').setValue(store.getAt('0').get('qty'));
});
EDIT: 18 Jan 2012
OK as mentioned here is a complete working example of ComboBox with a default value being set. This is done using ExtJS 4.02, should work fine with 4.07 though, not sure about 4.1.
Make sure you put your correct extjs path in the links (see brackets at the top of html), otherwise just put both combo-example and data.json at the same directory level and they should run fine:
data.json:
[
{"value":1,"name":"Option 1"},
{"value":2,"name":"Option 2"},
{"value":3,"name":"Option 3"}
]
combo-example.html:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Combo Box Example</title>
<link rel="stylesheet" type="text/css" href="[your extjs path]/resources/css/ext-all.css">
<script type="text/javascript" src="[your extjs path]/ext-all.js"></script>
<script type="text/javascript" >
Ext.onReady(function() {
// the datastore
var myStore = new Ext.data.Store({
fields: ['value', 'name'],
proxy: {
type: 'ajax',
url : 'data.json',
reader: {
type: 'json'
}
},
autoLoad: true
});
// a window to hold the combobox inside of a form
myWindow = Ext.create('Ext.Window', {
title: 'A Simple Window',
width: 300,
constrain: true,
modal: true,
layout: 'fit',
items: [{
// the form to hold the combobox
xtype: 'form',
border: false,
fieldDefaults: {
labelWidth: 75
},
bodyPadding: '15 10 10 10',
items: [{
// the combobox
xtype: 'combo',
id: 'myCombo',
fieldLabel: 'A Label',
valueField: 'value',
displayField: 'name',
store: myStore,
//queryMode: 'local',
typeAhead: true,
forceSelection: true,
allowBlank: false,
anchor: '100%'
},{
// shows the selected value when pressed
xtype: 'button',
margin: '10 0 0 100',
text: 'OK',
handler: function() {
alert('Name: ' + Ext.getCmp('myCombo').getRawValue() +
'\nValue: ' + Ext.getCmp('myCombo').value);
}
}]
}]
});
// show the window
myWindow.show();
// function to give the combobox a default value
myStore.on('load',function(store) {
Ext.getCmp('myCombo').setValue(store.getAt('0').get('value'));
});
});
</script>
</head>
<body>
</body>
</html>
I downloaded Ext JS 4.0.2a and I'm trying to do the Ext JS tutorial. I go the "essentials" example working, so I'm pretty sure I'm set up right. I'm trying to do the grid example here ...
http://www.sencha.com/learn/legacy/Tutorial:Getting_Productive
... but I can't get the grid to display.
My ExtStart.html looks like this:
<html>
<head>
<title>Introduction to Ext 2.0: Starter Page</title>
<!-- Include Ext and app-specific scripts: -->
<script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="../ext-all-debug.js"></script>
<script type="text/javascript" src="ExtStart.js"></script>
<!-- Include Ext stylesheets here: -->
<link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css">
<link rel="stylesheet" type="text/css" href="ExtStart.css">
</head>
<body>
<div id="grid-example"></div>
</body>
</html>
and my ExtStart.js is exactly like on the tutorial site like this:
Ext.onReady(function() {
// sample static data for the store
var myData = [['Apple',29.89,0.24,0.81,'9/1 12:00am'],
['Ext',83.81,0.28,0.34,'9/12 12:00am'],
['Google',71.72,0.02,0.03,'10/1 12:00am'],
['Microsoft',52.55,0.01,0.02,'7/4 12:00am'],
['Yahoo!',29.01,0.42,1.47,'5/22 12:00am']
];
// create the data store
var ds = new Ext.data.ArrayStore({
fields: [
{name: 'company'},
{name: 'price', type: 'float'},
{name: 'change', type: 'float'},
{name: 'pctChange', type: 'float'},
{name: 'lastChange', type: 'date', dateFormat: 'n/j h:ia'}
]
});
// manually load local data
ds.loadData(myData);
// create the colum Manager
var colModel = new Ext.grid.ColumnModel([
{header: 'Company', width: 160, sortable: true, dataIndex: 'company'},
{header: 'Price', width: 75, sortable: true, dataIndex: 'price'},
{header: 'Change', width: 75, sortable: true, dataIndex: 'change'},
{header: '% Change', width: 75, sortable: true, dataIndex: 'pctChange'},
{header: 'Last Updated', width: 85, sortable: true,
renderer: Ext.util.Format.dateRenderer('m/d/Y'), dataIndex: 'lastChange'}
]);
// create the Grid
var grid = new Ext.grid.GridPanel({
store: ds,
colModel: colModel,
height: 300,
width: 600,
title: 'My First Grid'
});
// render the grid to the specified div in the page
grid.render('grid-example');
});
Any ideas what I could be doing wrong? Sadly stumped. :(
rob
You are using ExtJS4 but are referring to a legacy documentation.
There have been quite a few changes to the components and how they need to be wired together between the version that document was written for and version 4 that you are using.
Here is the array grid (and other) example(s) for ExtJS 4. -
HTML
Javascript code
For example, you are using Ext.grid.GridPanel. This is no longer valid. (Use Ext.grid.Panel instead)
I was trying to render a simple piechart using ExtJs 3.0 but could not. Below is the snippet:
<div id="ext_grid_panel">
<div id="blackout_tab">
<div id="grid_blackout_current"></div>
</div>
<div id="gls_tab">
<div id="gls_current"></div>
</div>
</div>
var mainGridPanelWidth = (Ext.IsIE)?'':'width: \'100%\',';
var mainGridPanel = new Ext.TabPanel({
id: 'maingridpanel',
renderTo: 'ext_grid_panel',
style: {width:'100%'},
tabWidth: 1000,
activeTab: 0,
items: [
{id: 'allTabPanel',contentEl: 'blackout_tab',title: 'All'},
{id: 'glsTabPanel',contentEl: 'gls_tab',title: 'GLS'}
]
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
Ext.getCmp('allTabPanel').on('activate', function() {
});
Ext.getCmp('glsTabPanel').on('activate', function() {
});
var pieChart = {
xtype : 'piechart',
store : [{'total' :'42', 'range':'20,000'},{'total' :'53', 'range':'10,000'}],
dataField : 'total',
categoryField : 'range'
};
var panelBlackoutCurrent = new Ext.Panel({
id: 'panelblackoutcurrent',
renderTo: 'grid_blackout_current',
items: [
pieChart
]
});
var panelglsCurrent = new Ext.Panel({
id: 'panelglscurrent',
renderTo: 'gls_current',
items: [
pieChart
]
});
When i inspect in firefox firebug, i see an object(.swf) is created but the piechart content is not there/rendered.
Quick guidance is highly appreciated as it is taking lot of time with no solution
You can use an example pie chart as a starting point:
http://www.extjs.com/deploy/dev/examples/chart/pie-chart.js
Here is the result: http://www.extjs.com/deploy/dev/examples/chart/pie-chart.html
here come my version
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../resources/css/ext-all.css" />
<!-- GC -->
<!-- LIBS -->
<script type="text/javascript" src="../../adapter/ext/ext-base.js"></script>
<!-- ENDLIBS -->
<script type="text/javascript" src="../../ext-all.js"></script>
<!-- Common Styles for the examples -->
<link rel="stylesheet" type="text/css" href="../shared/examples.css" />
</head>
<body>
<div id="ext_grid_panel">
</div>
<script>
Ext.onReady(function(){
var store = new Ext.data.JsonStore({
fields: ['total', 'range'],
autoLoad: true,
data: [
{
total: 42,
range:'20,000'
}
,{
total: 53,
range:'10,000'
}
]
});
var mainGridPanel = new Ext.TabPanel({
renderTo: 'ext_grid_panel',
//style: {width:'100%'},
width: '100%',
height: 400,
activeTab: 0,
plain: true,
items: [
{
id: 'panelglscurrent',
title: 'GPS',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [{
id: 'chart1',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}]
},
{
id: 'panelblackoutcurrent',
title: 'All',
layout: 'fit',
listeners: {
activate: function(){
}
},
items: [
{
id: 'chart2',
xtype : 'piechart',
store : store,
dataField : 'total',
categoryField : 'range'
}
]
}
]
});
Ext.getCmp('panelglscurrent').on('activate', function() {
Ext.getCmp('panelglscurrent').doLayout(true);
});
Ext.getCmp('panelblackoutcurrent').on('activate', function() {
Ext.getCmp('panelblackoutcurrent').doLayout(true);
});
if (!Ext.IsIE)
mainGridPanel.setWidth('100%');
});
</script>
</body>
</html>
your sample had a few problems:
first you have to create a proper store passing the array of object to the pie chart is not enought
also you should wrap your code inside Ext.onReady or you can get some strange behaviour like element not rendering properly
make sure to include the plain: true on tabPanel with chart inside or the chart won't render properly
an general note
try to give good name at your variable (like mainGridPanel being actually a TabPanel)
intent properly your code, by experience it really become messy fast.
Also if you want to make the extjs component using full screen, you have better to use the viewport it would make everything resize nicely and make things more easy for you