Related
I have an extjs (ExtJS 3) grid panel which is loaded from postgresql database using JsonStore. This is my Json store:
var dropPickGridStore = new Ext.data.JsonStore({
fields : [ {
name : 'locationName'
}, {
name : 'city'
}, {
name : 'addr'
}, {
name : 'estimatedTime'
} ],
root : 'dropPickLoc',
idProperty : 'locationName',
//autoDestroy : true,
autoLoad : true,
proxy : new Ext.data.HttpProxy({
url : "http://" + host + ":" + port + "/" + projectName + "/"
+ "PendingDropPicks"
}),
reader : {
type : 'json',
root : 'dropPickLoc'
},
});
This my grid panel:
var selectModel = new Ext.grid.CheckboxSelectionModel();
/*selectModel : Ext.create('Ext.selection.CheckboxModel', {
checkOnly: true,
mode: 'MULTI'
});*/
var drop_pick_grid = new Ext.grid.GridPanel({
store : dropPickGridStore,
cm : new Ext.grid.ColumnModel([ selectModel, {
sortable : true,
header : "Drop/Pick Loc",
dataIndex : 'locationName',
width : 170
}, {
header : "Town/City",
sortable : true,
dataIndex : 'city',
width : 120
}, {
header : "Address",
sortable : true,
dataIndex : 'addr',
width : 170
}, {
header : "EST.Un/Load Time",
sortable : true,
dataIndex : 'estimatedTime',
width : 100
} ]),
sm : selectModel,
//width : 570,
//height : 390,
autoHeight : true,
autoWidth : true,
frame : true,
iconCls : 'icon-grid'
});
The gris is loaded successfully. But There is a problem. I can only check the header row checkbox. I cannot select any of row. It should has the capability of selecting individual row and it should also can select all rows by clicking header checkbox. What's wrong with my code?
Can anyone please be so kind enough to explain what's going wrong with my codes and how should I fix it?
Thank You
Let's suppose that we have the following code:
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true,
id : 'panel1_id',
width : '45%'
}, {
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
As we can see, the first panel is collapsible. My question is:
is it possible to disable the panel's preview (when we click on the collapsed panel's header) when collapsed?
No, it is not collapased. You need to set collapsed: true for that.
Ext.create ( 'Ext.container.Viewport', {
layout : 'border',
items : [{
region : 'west',
xtype : 'panel',
collapsible : true, // this show the tool within the header
collapsed: true, // this collapses
floatable: false, // prevent floating on header-click when collapsed
id : 'panel1_id',
width : '45%'
},{
region : 'center',
xtype : 'panel',
id : 'panel2_id',
width : '55%'
}]
});
I am new to ext js. And my requirement is OnClick of a button, it calls a js function which pops up a window.Within this window I have a formPanel and a grid embedded in it. In the window items properties, if I add grid, the window is not showing. If I keep only form variable, then the window is displayed.
items : [filterPIDForm,pidGrid] is not working whereas
items: [filterPIDForm] is working fine.
Below is the code snippet
<script type="text/javascript">
jQuery(document).ready(function(){
// eCube search
jQuery('#eCubeSearch').click(function(){
pidSearch();
});
});
function pidSearch()
{
var filterPIDForm = new Ext.form.FormPanel({
title : 'Job Filters',
floatable : false,
id : 'filterForm',
tabTip : 'woot',
labelAlign :'top',
region :'west',
collapsible : true,
bodyStyle : 'padding: 5px; background-color: #DFE8F6',
border : false,
// style : 'border-top: 1px solid #99BBE8;',
width : 220,
items : [
{
xtype : 'combo',
width : 200,
id :'emailCombo',
fieldLabel :'Filter by Owner',
valueField :'emailValue',
displayField :'emailDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
},
{
xtype : 'combo',
width : 200,
id :'statusCombo',
fieldLabel :'Filter by Status',
valueField :'statusValue',
displayField :'statusDisplay',
mode :'local',
editable :false,
typeAhead :false,
triggerAction :'all'
//value :'ALL'
},
{
xtype : 'textfield',
fieldLabel : 'PID/Description Search',
width : 200,
id :'searchText'
}
],
buttons: [
{
text : 'Clear Filter(s)',
id : 'clear'
},
{
text : 'Apply Filter(s)',
id : 'apply'
}
]
});
var pidGrid = new Ext.grid.GridPanel({
title : 'Job List',
id : 'pidList',
columns: [
//new Ext.grid.RowNumberer(),
{
header : 'PID',
width : 70,
dataIndex : 'pid',
sortable : true
},
{
header : 'Description',
id : 'description',
dataIndex : 'description',
sortable : true
}
]
});
var win = new Ext.Window({
modal:true,
title: 'PID Search',
layout:'absolute',
id: 'eCubeSearchWin',
width:1000,
height:400,
resizable: false,
plain: false,
resizable: false,
border: true,
closeAction :'close',
items : [filterPIDForm,pidGrid],
//items : [filterPIDForm],
buttons : [
{
text : 'OK',
id : 'test'
},
{
text : 'Close',
handler : function(){
Ext.getCmp('eCubeSearchWin').close();
}
}
]
});
win.show();
}
</script>
try setting layout in window
var win = new Ext.Window({
renderTo : Ext.getBody(),
width : 500,
height : 500,
layout : 'border',
items : [{
items : filterPIDForm
,layout :'fit'
,region : 'north'
,height : 300
},{
items : pidGrid
,layout :'fit'
,region :'center'
}]
}).show();
On clicking an 'add' button my program opens a window but when a closes that window and again click on 'add' button window doesn't show up. Here is my code to show window-
var AddURLWindow = new Ext.Window ({
title : 'XXXX',
width : 550,
border : 'false',
height : 160,
id : 'win',
name : 'win',
bodyStyle : 'background-color:#fff;padding: 5px',
autoScroll : true,
items: [
urlContainer
],
buttonAlign : 'right', // buttons aligned to the right
buttons :[{
text : 'Add URL'
//handler : saveRules
},{
text : 'Cancel',
handler : closeWindow
}] // buttons of the form
});
Code for urlContainer is-
var urlContainer = {
xtype : 'fieldset',
flex : 1,
border : false,
hideBorders : false,
autoHeight : true,
labelWidth : 70,
height : 42,
defaultType : 'field',
defaults : {
anchor : '100%',
allowBlank : false,
border : 'false'
},
items : [
nameTextField
]
};
Code for nameTextField is-
var nameTextField = new Ext.form.TextField({
border : false,
fieldLabel : 'Name',
name : 'first',
// id : 'id-name',
emptyText : 'Entesr URL',
anchor : '100%',
width : '400',
allowBlank : false
});
Any help?
I have this code. If i click on button my form parameters are inserting into database. How i can do it?? what i should write there?
And if i click on reset form, my window closing. Please help! Thank you!
var AddQuestion = new Ext.Button({
method : 'POST',
url : '/questions/create',
tooltip : 'Add Question',
icon : '/images/icons/silk/add.png',
iconCls : 'add',
style : 'margin-right: 60px;float:right;',
handler : function() {
new Ext.Window({
title : 'Add Question',
width : 700,
height : 800,
bodyStyle : 'padding: 10px',
layout : 'form',
modal : true,
closable : true,
resizable : false,
draggable : false,
autowidth : true,
items :[
{
fieldLabel : 'Question',
name : 'question[text]',
xtype : 'htmleditor',
enableFont : false,
enableFormat : false,
enableFontSize : false,
enableLists : false,
enableAlignments: false,
enableFont : false,
enableColors : false,
height : 160,
width : 560
},
{
name :'form_type',
fieldLabel :'Form Type',
xtype :'combo',
triggerAction :'all',
mode :'local',
editable : false,
allowBlank : false,
emptyText :'You should Choose any...',
store :new Ext.data.SimpleStore({
fields :['mode', 'name'],
data :[
['1', 'TextArea Question'],
['2', 'Scale Question'],
['3', 'TextArea + Scale Question']
]
}),
displayField :'name',
valueField :'mode',
hiddenName :'form_type'
},
{
xtype : 'itemselector',
name : 'selected_respondents',
imagePath : '../ux/images/',
bodyStyle : 'background:#DFE8F6',
multiselects: [{
legend : 'All Respondents',
width : 270,
height : 350,
store : st,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
},{
legend : 'Selected Respondents',
width : 270,
height : 350,
store : st2,
displayField : 'email',
valueField : 'id',
hiddenName : 'email'
}]
},
{
fieldLabel :'To do',
xtype : 'button',
text : 'Refresh respondents ↑',
height : 30,
icon : '/images/icons/silk/arrow_refresh_small.png',
width : 180,
handler: function(){
if((who_is_admin == '1') || (who_is_admin == '0')){
if (st2.getCount() == 0){
st.reload();
}else
{
Ext.Msg.show({
title : 'Message for You',
msg : "You should left <i>'Selected Respondents'</i> field empty to <b>refresh</b> some changes!",
modal : true,
Height : 200,
closable : true,
resizable : false,
draggable : false,
Width : 300,
buttons : Ext.Msg.OK
});
}
}
}
},
{
xtype : 'checkbox',
boxLabel : 'Make Question Active',
inputValue : '1',
name : 'is_active',
hiddenName : 'is_active',
checked : true
},
],
buttons: [{
text: 'Reset Form',
handler: function(){
}
},{
text: 'Submit Form',
handler: function(){
}
}
}] // button end
}).show(); //show window
}
});
You can do this by sending AJAX request as soon as user clicks on button.
For eg in your case handler for 'Submit Form' button should look like
Ext.Ajax.request({
url:'assertion.htm', // url of page where you want to send it
method: 'POST',
params: {
selectedSource:source.getValue() //Right hand side whatever value you want to send
},
scope:this
});