PDA

View Full Version : How to render gridpanel in html element



nimaous
23 Jun 2012, 5:59 AM
Hi
I create a <div id='container'><\div> how I render my gridpanel in my div
I need the method which get html dom elements

khmurach
23 Jun 2012, 7:02 AM
Use config


renderTo: 'container'


Demo here http://ext4all.com/post/how-to-render-gridpanel-in-html-element

nimaous
23 Jun 2012, 7:24 AM
tnx for reply
but it dose not work

scottmartin
23 Jun 2012, 7:45 AM
Can you provide more detail?

Does the example provided by Vitaliy not work, or just in your code?
Do you get any errors in the console, or just a blank screen.

You will need to give us more than "it does not work"

Regards,
Scott.

khmurach
23 Jun 2012, 8:17 AM
Your html element is not valid:


<div id='container'><\div>

valid version


<div id='container'></div>

nimaous
23 Jun 2012, 9:01 PM
by It dose not work I mean . when I inspect element in Ext.window.Widows dose not load in to my div

here is my view code




Ext.define('MyApp.view.WaitersList', {
extend: 'Ext.window.Window',
stores: ['Customers','WaitersListStore'],
model:'WaitersListData',
alias:'widget.waiterlist',
autoShow: true,
height: 536,
id: 'waiterLists',
width: 642,
autoScroll: true,
title: 'لیت انتظار',
renderTo:'container',




initComponent: function() {
var me = this;


Ext.applyIf(me, {
items: [
{
xtype: 'combo',
store: 'Customers',
displayField: 'family',
typeAhead: false,
hideLabel: true,
hideTrigger:true,
anchor: '100%',
listConfig: {
loadingText: 'در حال جست و جو',
emptyText: 'مشتری با این عنوان یافت نشد',
getInnerTpl: function() {
return '<h3><span> مشتری {family}:{name}<br/></span>شماره ملی: {national_id} </h3>';
}
},
pageSize: 10
}, {
xtype: 'component',
style: 'margin-top:11px',
html: 'جست جو در لیست مشتریان '
},




{
xtype: 'gridpanel',
height: 328,
id: 'WaitersDataGrid',
flex:1,
store: 'WaitersListStore',
columns: [
{
xtype: 'gridcolumn',
width: 20,
defaultWidth: 20,
dataIndex: 'id',
text: 'Id',
hidden:true,
editor:{
xtype: 'numberfield',
hidden:true


}
},
{
xtype: 'gridcolumn',
text: 'مشتری',
width: 70,
defaultType: 'combo',
dataIndex: 'customer',
displayField:'family',


editor: {
xtype: 'combo',
store: 'Customers',
displayField: 'family',
typeAhead: false,
hideLabel: true,
valueField:'id',
hideTrigger:true,
anchor: '100%',
listConfig: {
loadingText: 'SearcWaitersListStorehing...',
emptyText: 'No matching posts found.',
getInnerTpl: function() {
return '<h3><span> مشتری {family}:{name}<br/></span>شماره ملی: {national_id} </h3>' ;
}
}
}
},
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'destination',
editor: {
xtype: 'textfield'
},
text: 'مقصد'
},
{
xtype: 'datecolumn',
width: 70,
dataIndex: 'from_date',
editor: {
xtype: 'datefield',
format: 'Y-m-d'
},
text: 'تاریخ از'
},
{
xtype: 'datecolumn',
width: 60,
dataIndex: 'to_date',
editor: {
xtype: 'datefield',
format: 'Y-m-d'
},
text: 'تاریخ تا'
},
{
xtype: 'gridcolumn',
width: 70,
dataIndex: 'from_cost',
editor: {
xtype: 'numberfield'
},
text: 'قیمت از'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'to_cost',
editor: {
xtype: 'numberfield'
},
text: 'قیمت تا'
},
{
xtype: 'gridcolumn',
width: 50,
dataIndex: 'hotel_stars',
editor: {
xtype: 'numberfield'
},
text: 'نوع هتل'
},
{
xtype: 'gridcolumn',
width: 60,
dataIndex: 'airline',
editor: {
xtype: 'textfield'
},
text: 'هواپیمایی'
},
{
xtype: 'booleancolumn',
width: 50,
dataIndex: 'visited',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
text: 'بررسی'
},
{
xtype: 'booleancolumn',
width: 50,
dataIndex: 'sure',
editor: {
xtype: 'checkbox',
cls: 'x-grid-checkheader-editor'
},
text: 'قطعی'
}
],
tbar: [{
text: 'اضافه کردن به لیست انتظار',
iconCls: 'employee-add',
action:'add'


}, {
itemId: 'removeWaiter',
text: 'Remove Waiter',
iconCls: 'employee-remove',
action:'remove',
disabled: true
}],
plugins: [
Ext.create('Ext.grid.plugin.RowEditing', {
ptype: 'rowedit',
clicksToEdit: 1,
saveBtnText:'ذخیره',
cancelBtnText:'انصراف',
clicksToMoveEditor: 1,
pluginId: 'rowedit',
listeners: {
edit: {
fn: me.onGridroweditingpluginEdit,
scope: me
}
}
})
]


} ]


});


me.callParent(arguments);
},

and here is my html page :
<html><head>


<title>TDC2011 - Ext JS 4 - MVC</title>


<!-- Ext JS Files -->
<link rel="stylesheet" type="text/css"
href="{{ MEDIA_URL }}js/libs/ext-4.1.0/resources/css/ext-all.css">
<script type="text/javascript" src="{{ MEDIA_URL }}js/libs/ext-4.1.0/ext-debug.js"></script>

<!-- App Files -->
<link rel="stylesheet" type="text/css" href="{{ MEDIA_URL }}js/ExtJSClientSide/css/app.css">
<script type="text/javascript" src="{{ MEDIA_URL }}js/ExtJSClientSide/js/Waiters/app.js"></script>

<script type="text/javascript">
Ext.onReady(function() {
Ext.require(["Ext.util.Cookies", "Ext.Ajax"], function(){
// Add csrf token to every ajax requestindexi
var token = Ext.util.Cookies.get('csrftoken');
if(!token){
Ext.Error.raise("Missing csrftoken cookie");
} else {
Ext.Ajax.defaultHeaders = Ext.apply(Ext.Ajax.defaultHeaders || {}, {
'X-CSRFToken': token
});
}
});


});
</script>

</head>
<body>




<div id='container'></div>




</body>




</html>

khmurach
23 Jun 2012, 11:08 PM
You should not use "renderTo" config for windows.
Where are two way to show window:
1. Create instance and call method "show()"

var win = Ext.widget('window', {
title: 'Simple Window',
width: 300,
height: 200
});
win.show();
Demo http://ext4all.com/post/window-faq-simple-window

2. Create instance with config option "autoShow: true"

Ext.widget('window', {
title: 'Simple AutoShow Window',
width: 300,
height: 200,
autoShow: true
});

Demo http://ext4all.com/post/window-faq-autoshow-window