in my app ,i want to create some function like extjs4 api,when i click the left tree menu, the content will show in the right.some code list below:
left tree menu code:
var tree_panel = Ext.create('Ext.tree.Panel', {
listeners: {
'itemclick': function( grid, record, item, index, e, eOpts) {
Ext.Ajax.request({
url: 'code/list.js',
success: function(response){
show_tip_message("success!")
},
failure: function(response){
show_tip_message("false!")
}
});
}
}
codecontroller code(codecontroller.rb)
def list
respond_to do |format|
format.js
end
end
codeview code(list.js.erb)
var m_work_space = Ext.getCmp('work-space');
m_work_space.removeAll();
m_work_space.add(m_codegrid);
m_work_space.doLayout();
however when i click the tree item, it pop out notice success ,but the work-space doesn't refresh ,why? any help will appreciate
Maybe you should add your updating code in your success callback?
listeners: {
itemclick: function( grid, record, item, index, e, eOpts) {
Ext.Ajax.request({
url: 'code/list.js',
success: function(response){
var m_work_space = Ext.getCmp('work-space'),
m_codegrid = response.responseText;
m_work_space.removeAll();
m_work_space.add(m_codegrid);
m_work_space.doLayout();
show_tip_message("success!")
},
failure: function(response){
show_tip_message("false!")
}
});
}
}
Related
Want to perform Edit in popup, I have code but its not working
here is my script
$("#mylink").click(function(e) {
var count = 0;
var $dialog = $("<div id='divCreateTask'></div>");
var Id = $(this).data(e);//
url: "TaskTimeSheet/EditTaskPopUp/" + Id //
var url = "EditTaskUrl" + id;var url = '#Url.Action("EditTaskPopUp", "TaskTimeSheet")';
url += '/?Id=' +Id; $("#tab1").load(url);
$dialog.empty();$dialog.dialog({
autoOpen: true,
width: 600,
height: 650,
resizable: false,
modal: true,
open: function (event, ui) {
$(this).load(url);
},
buttons: {
"Cancel": function () {
$(this).dialog("close"); }
});
} });
#Html.ActionLink("Edit", "TaskTimeSheet", new {id="mylink", param = dr["id"].ToString() })
From this link i have to pass id .....
This all is loaded in table Table Each row Have Edit Button ....now ho to pass Id to the querY,..
use an ajax call
$('.btnSubmit').on('click', function(){
$.ajax({
url: '#Url.Action("Action", "Controller")',
type: 'post',
cache: false,
async: true,
data: { id: "ID" },
success: function(result){
$('.divContent').html(result);
}
});
});
your controller action would be something like
[HttpPost]
public PartialViewResult Action(int id){
var Model = //query the database
return PartialView("_PartialView", Model);
}
This will call your controller, return a partial view and put it into a container with class "divContent". Then you can run your dialog code to pop up the container.
row id update
to get the id of a table row I use this in the row click event
$(this).closest('tr').find('.ID').val(); // or .html() if you have put it in the cell itself
this will get the row that you are on and then find a cell in that row with class ID. Hopefully this helps.
I have the popup working but sometimes a user clicks the back button on their browser to close the popup.
How can I make the browser back button close a 'magnific-popup' that is already open?
Thanks
After some digging found history.js and then the following
var magnificPopup = null;
jQuery(document).ready(function ($) {
var $img = $(".img-link");
if ($img.length) {
$img.magnificPopup({
type: 'image',
preloader: true,
closeOnContentClick: true,
enableEscapeKey: false,
showCloseBtn: true,
removalDelay: 100,
mainClass: 'mfp-fade',
tClose: '',
callbacks: {
open: function () {
History.Adapter.bind(window, 'statechange', closePopup);
History.pushState({ url: document.location.href }, document.title, "?large");
$(window).on('resize', closePopup);
magnificPopup = this;
},
close: function () {
$(window).unbind('statechange', closePopup)
.off('resize', closePopup);
var State = History.getState();
History.replaceState(null, document.title, State.data["url"]);
magnificPopup = null;
}
}
});
}
});
function closePopup () {
if (magnificPopup != null)
magnificPopup.close();
}
I'm using this solution:
callbacks: {
open: function() {
location.href = location.href.split('#')[0] + "#gal";
}
,close: function() {
if (location.hash) history.go(-1);
}
}
And this code:
$(window).on('hashchange',function() {
if(location.href.indexOf("#gal")<0) {
$.magnificPopup.close();
}
});
So, on gallery open I add #gal hash. When user closes I virtually click back button to remove it. If user clicks back button - everything works fine olso.
This solution does not break back button behavior and does no require any additional plugins.
Comments are welcome.
Just to add to your answer, these are the meaningful lines that I got to work for me.
callbacks:
open: ->
History.pushState({ url: document.location.href }, null, "?dialogOpen")
History.Adapter.bind(window, 'statechange', attemptToCloseDialog)
close: ->
$(window).unbind('statechange', attemptToCloseDialog)
History.replaceState(null, null, History.getState().data['url'])
With attempt being:
attemptToCloseDialog = ->
$.magnificPopup.close() if $.magnificPopup.instance
I trying to create button in extJs 4 .But due to adding property href and hrefTarget its changing its shape.What should I have to do give link to my Button without making my button as anchor tag ? Actualy I want to open new tab on button click..
var startButton = Ext.create('Ext.Button', {
text:'Start',
id: 'startButton',
href : 'http://www.google.com',
hrefTarget: '_blank',
baseCls:'deviceAuthenticationButtonCls button-link',
handler : function() {
console.log(Ext.getCmp('startButton'));
console.log("Form ",form.getForm().getValues());
form.getForm().setValues([
{id:'First', value: "0006660767C7"},
{id:'Second', value: "00066607644D"}
]);
var data = form.getForm().getValues();
console.log("Data To Send :- ",data);
form.getForm().submit({
url: './mmaGlove/',
method:'POST',
params : {
deviceAuthenticationData: JSON.stringify(data)
},
success: function(){
window.location = "http://www.google.com";
},
failure : function(){
alert('Got Error..');
}
});
}
});
Maybe you can redirect in the function handler:
function() { window.location = "http://www.sencha.com" }
... for instance. In this case you don't set the href propety so the button doesn't become an <a></a> label.
I'm customising cards by using a custom card renderer on a cardboard and would like to add a 'Remove' button on each card in order to do the same 'delete' functionality as provided in the Iteration Status page (i.e move the item to recycle bin).
By inspection, I can see on click the following event is fired when deleting stories from 'Iteration Status' page:
onclick="deleteAR({itemOid:'1234', name:'Item name', formattedID:'Item001', msg:'Are you sure?'}); return false;"
Edit: I'm using JDK 1.3
You should be able to delete in SDK 1.x like so:
function delete(ref, callback, errorCallback) {
var config = {
url: ref,
content: {},
headers: { "Content-Type": "application/json" },
handleAs:"json",
preventCache: true,
load: callback,
error: errorCallback
};
if (rally.sdk.util.Context.isInsideRally()) {
dojo.xhrDelete(config);
} else {
config.callbackParamName = "jsonp";
config.content._method = "DELETE";
dojo.io.script.get(config);
}
}
//delete an item
delete('https://rally1.rallydev.com/slm/webservice/1.32/defect/12345.js',
function(results) {
//success
},
function(results) {
//error
}
);
We were going to expose this functionality via rally.sdk.data.io.httpDelete and rally.sdk.data.RallyDataSource.delete but never fully tested and released it.
I have a store as follows.
var eventsStore = new Ext.data.Store({
model: 'Event',
sorters: [{
property: 'OccurringOn',
direction: 'DESC'
}],
proxy: {
type: 'ajax',
url: BaseURL + 'Events.php',
api: {
read: BaseURL + 'Events.php',
create: BaseURL + 'Events.php'
},
reader: {
type: 'xml',
root: 'Events',
record: 'Event'
},
writer: {
type: 'xml',
writeAllFields: false,
root: 'Events',
record: 'Event'
}
},
getGroupString: function(record) {
if (record && record.data.OccurringOn) {
console.log(record.get('OccurringOn'));
return record.get('OccurringOn').toDateString();
}
else {
return '';
}
}
});
I also have a List view which gets all Events fine. I have a form which allows user to add new event and I have FormPanel for it. The FormPanel has Toolbar which has Save button which when clicked will do following.
var eventCard = It's a card
var newEventCard = eventCard.items.items[1];
var currentEvent = newEventCard.getRecord();
newEventCard.updateRecord(currentEvent);
var errors = currentEvent.validate();
// here I check errors and prompt user about them
var eventList = eventCard.items.items[0].items.items[0];
var eventStore = eventList.getStore();
eventStore.add(currentEvent);
eventStore.sync();
eventStore.sort( [ { property: 'OccurringOn', direction: 'DESC' } ] );
eventList.refresh();
The above code adds two empty rows to the MySQL database and copies the event list view items with 3 empty new items. Why this is the behavior and what I am missing?
If you can tell me what parameters are sent as POST to the Events.php when I sync that would much appreciated.
It was my fault I figured out. I was echo'ing when there was POST request to the service.